Developing MarkHazleton.com

A straightforward look at the tools and process behind building this site. This documentation covers the technical stack, build process, and deployment pipeline.

Built on Node.js with Pug templates, hosted on Azure Static Web Apps, and deployed via GitHub Actions. Based on the Start Bootstrap Resume template for rapid development.

Template Foundation

Started with the Start Bootstrap Resume template for a solid foundation. This gave me a well-structured starting point and helped speed up initial development.

What made this template useful:

  • Clean, semantic HTML structure
  • Bootstrap-based responsive design
  • Good separation of concerns
  • Easy to customize and extend

Technology Stack

Core Technologies

  • Node.js 20 - JavaScript runtime and build environment
  • Pug 3.0.3 - Template engine for HTML generation
  • Sass 1.93.2 - CSS preprocessing with Dart Sass
  • Bootstrap 5.3.8 - CSS framework for styling
  • Bootstrap Icons 1.13.1 - Icon library

Build Tools

  • PostCSS & Autoprefixer - CSS processing and vendor prefixes
  • Terser - JavaScript minification
  • Prism.js - Syntax highlighting for code blocks
  • Browser-sync - Live reloading during development

Build Process

The site uses a unified build script that handles all compilation and optimization tasks. Everything runs through a single build.js script that coordinates different build steps.

Main Build Commands

# Full build
npm run build

# Individual components
npm run build:pug     # Compile Pug templates
npm run build:scss    # Process SCSS files
npm run build:scripts # Minify JavaScript
npm run build:assets  # Copy and optimize assets

# Development
npm run start         # Build and serve locally
npm run dev           # Watch mode with live reload

What the Build Does

  • Compiles Pug templates to HTML
  • Processes SCSS with Dart Sass and PostCSS
  • Minifies JavaScript with Terser
  • Generates RSS feeds and sitemap
  • Optimizes images and assets
  • Creates performance-optimized output in /docs folder

The build system includes caching for faster rebuilds and parallel processing where possible. It automatically handles vendor prefixes, CSS minification, and asset optimization.

Deployment Pipeline

The site deploys automatically to Azure Static Web Apps via GitHub Actions. Changes pushed to the main branch trigger a build and deployment process.

How Deployment Works

  1. Code changes are pushed to GitHub repository
  2. GitHub Actions workflow triggers automatically
  3. Node.js 20 environment is set up
  4. Dependencies are installed with npm ci
  5. Build runs with npm run build
  6. Azure Static Web Apps deploys from /docs folder
  7. IndexNow API is notified for search engine updates

Hosting Details

  • Platform: Azure Static Web Apps
  • Source: GitHub repository
  • Output Directory: /docs
  • Node Version: 20
  • Domain: markhazleton.com

The deployment is fully automated - no manual steps required. Azure handles SSL certificates, CDN distribution, and scaling automatically.

Development Workflow

Local development is straightforward with live reloading and automatic builds. The development server watches for changes and rebuilds as needed.

Local Development Setup

  1. Clone the repository
  2. Run npm install
  3. Start development with npm run dev
  4. Browser opens automatically with live reload

File Structure

src/
├── pug/           # Pug templates
├── scss/          # SCSS stylesheets  
├── js/            # JavaScript files
└── assets/        # Images and other assets

docs/              # Built output (deployed)
tools/             # Build scripts
├── build/         # Build tools
└── audit/         # Performance auditing

Browser-sync provides live reloading during development. Changes to Pug, SCSS, or JavaScript files trigger automatic rebuilds and browser refresh.

Key Development Features

  • Build caching for faster rebuilds
  • Parallel processing where possible
  • Automatic sitemap and RSS generation
  • Built-in performance auditing tools
  • SEO validation and accessibility checks

Summary

This setup provides a simple, effective workflow for building and maintaining a static site. The combination of Node.js build tools and Azure Static Web Apps makes deployment automatic and reliable.

Key benefits of this approach:

  • Fast local development with live reload
  • Automated deployment via GitHub Actions
  • Modern toolchain with good performance
  • Easy to maintain and extend
  • Built-in SEO and accessibility features

The site uses standard web technologies with a focus on simplicity and maintainability. All the tools work together to create a smooth development experience.