Philip Jama

Build Pipeline Flow

📄
projects.json
Data Layer
🎨
*.pug
Templates
⚙️
Node.js
Build Engine
🌐
*.html
Static Pages

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 commands

This 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:

github.com/pjama/pjama.github.io

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