Build Pipeline Flow
Portfolio Publishing Press
Static Site Build System
Project Overview
The build system that powers this portfolio site. Built with Node.js and Pug templating, it demonstrates how data-driven architecture can create maintainable and scalable publishing workflows for static sites.
Architecture Overview:
The system uses a data-driven approach where project information is stored in projects.json
, then processed through Pug templates to generate static HTML. This separation of data, templates, and build logic creates a maintainable and extensible architecture.
Build Pipeline:
- Data Layer - JSON files define project metadata, descriptions, and configuration
- Template Layer - Pug templates provide semantic HTML structure with template inheritance
- Build Scripts - Node.js scripts orchestrate compilation of templates with data
- Asset Pipeline - Static assets (CSS, JS, images) are served directly
Key Features:
• Template Inheritance - Shared layout templates ensure consistency across all project pages
• Markdown Support - Integrated marked.js for rich content formatting
• Modular Structure - Each project is self-contained with its own template and assets
• NPM Scripts - Simple
npm run publish:projects
and npm run publish:home
commandsThis project page itself was generated by the system it describes, serving as both documentation and a practical demonstration of the build pipeline's capabilities.
Project Details
Date: | January 2017 |
Type: | Static Site Generator |
Template Engine: | Pug (formerly Jade) |
Build Tool: | Node.js Scripts |
Data Format: | JSON Configuration |
Architecture: | Data-Driven Template System |
Tags: | Node.js, Build System, Static Site Generation |
Repo: |
Note: This project page was built using the publishing system it documents.
System Components
Project Configuration (projects.json)
{
"NAME": "PUBLISHING-PRESS",
"title": "Portfolio Publishing Press",
"template": "src/projects/publishing-press/index.pug",
"locals": { ... }
}
Build Script (publish_projects.js)
const pug = require("pug");
const projects = require("./projects.json");
for (let project of projects) {
let fn = pug.compileFile(project.template);
let html = fn(project.locals);
fs.writeFileSync(project.outputPath, html);
}
Template Structure (layout.pug)
doctype html
html(lang="en")
head
title= title
each path in stylesheets
link(rel="stylesheet" href=path)
body
include ../_header
block content
include ../_footer