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

Build Pipeline Flow