Developing MarkHazleton.com

The Tools, Technologies, and Thought Process Behind the Site

Building MarkHazleton.com was a journey defined by choosing the right tools for rapid development and efficient management. Every tool was carefully selected to ensure that the website was reliable, easy to maintain, and able to grow with the needs of the business.

Node.js
Pug
Azure
Bootstrap
GitHub Actions

Open Source Foundation

Built on the Start Bootstrap Resume template, showcasing the power of open source in rapid development

Introduction

This article highlights the key technologies that made MarkHazleton.com what it is today, demonstrating how careful tool selection can lead to rapid development and efficient site management.

Key Focus Areas
  • Rapid development with modern tools
  • Efficient deployment automation
  • Scalable architecture design
  • Performance optimization

Leveraging a Well-Thought-Out Template

When I began working on MarkHazleton.com, I started by forking the Start Bootstrap Resume GitHub Repository which provided a well-planned, thoughtfully designed foundation. Its structure allowed me to quickly come up to speed with static site development.

Easy Adaptability

The design of the Start Bootstrap Resume template made it easy to add new sections, adjust layouts, and integrate dynamic elements with Node.js and npm.

Quick Learning

Thanks to the well-thought-out structure, I quickly learned how to manage static site builds, minify assets, and automate tasks using Node.js.

Flexible Foundation

The Start Bootstrap Resume template provided both a solid foundation and the flexibility needed for evolution, allowing efficient creation and scaling.

Development Workflow

Node.js plays a crucial role in the development and deployment workflow of MarkHazleton.com. It powers both the local development environment and the automated build and deployment pipeline, ensuring efficient site management.

The project's `package.json` includes multiple npm scripts that automate key tasks like cleaning, building SCSS, generating Pug templates, and copying assets.

Build Scripts Configuration 
"scripts": {
  "build": "npm run clean && npm run build:pug && npm run build:scss && npm run build:scripts && npm run build:assets",
  "build:assets": "node scripts/build-assets.js",
  "build:pug": "node scripts/build-pug.js",
  "build:scripts": "node scripts/build-scripts.js",
  "build:scss": "node scripts/build-scss.js",
  "clean": "node scripts/clean.js",
  "start": "npm run build && node scripts/start.js",
  "start:debug": "npm run build && node scripts/start-debug.js"
}

This is how to set up live reloading for your static website in Visual Studio Code using a custom start.js script and BrowserSync.

Setting Up start.js

The start.js script runs two tasks concurrently:

  • A Script (sb-watch.js) to monitor your source files for changes and trigger a rebuild
  • Serves the site from the docs folder and automatically reloads the browser when changes are detected
  • BrowserSync, which automatically refreshes your browser when files are updated
Running the Site
  1. Open your project in VS Code
  2. Run the start.js script in the terminal
  3. As you update your source files, BrowserSync will automatically refresh your browser
BrowserSync Configuration 
const concurrently = require("concurrently");
const upath = require("upath");
const browserSyncPath = upath.resolve(
  upath.dirname(__filename),
  "../node_modules/.bin/browser-sync.cmd"
);

const browserSyncCommand = `powershell -Command "& '${browserSyncPath}' --reload-delay 2000 --reload-debounce 2000 docs -w --no-online --https"`;

concurrently([
  {
    command: "node scripts/sb-watch.js",
    name: "SB_WATCH",
    prefixColor: "bgBlue.bold",
  },
  {
    command: browserSyncCommand,
    name: "SB_BROWSER_SYNC",
    prefixColor: "bgGreen.bold",
  }
]);

I use GitHub Actions to automate the deployment process. Once changes are pushed to the repository, GitHub Actions triggers a build process, running the same npm scripts that handle asset copying, SCSS compilation, and template generation.

GitHub Actions

Automated CI/CD pipeline

Azure Static Web Apps

Global hosting platform

Automatic Deployment

Seamless updates

Modular Scripts

Break tasks into smaller scripts for better control and flexibility.

Optimization

Use tools like Terser and CSSnano to minimize file sizes for faster load times.

CI/CD Automation

Use GitHub Actions to automate the build and deployment pipeline.

Efficient Workflow

Node.js provides a robust environment for managing both development and deployment workflows, making the process of building and maintaining a static website highly efficient and scalable.

Technology Stack

Each technology was chosen to optimize the development process, ensuring a solid foundation for future growth and updates.

Development Tools

Node.js was chosen for its robust server-side JavaScript environment, enabling seamless integration between development and production.

Example Setup 
// Example Node.js setup for MarkHazleton.com
const express = require('express');
const app = express();
app.set('view engine', 'pug');
app.set('views', './views');

app.get('/', function (req, res) {
  res.render('index', { title: 'MarkHazleton.com' });
});

app.listen(3000, () => console.log('Server running on port 3000'));

The Pug template engine streamlined the creation of dynamic HTML pages with its concise and readable syntax.

Pug Example 
// Pug template example for MarkHazleton.com
doctype html
html
  head
    title= title
  body
    h1 Welcome to Developing MarkHazleton.com: Tools & Approac 
    p This is a sample page created with Pug.

Visual Studio Code was the editor of choice, offering excellent support for multiple programming languages and rich extension ecosystem.

Hosting & Services
SB UI Kit Pro

Modern, responsive design with Bootstrap 5

GitHub

Version control and collaboration platform

Azure Static Web Apps

Seamless hosting with global distribution

Cloudflare

Security, performance, and DNS services

Screaming Frog SEO

SEO auditing and optimization tool

Best Practices for SCSS with Node.js

Using Node.js and SCSS together is a powerful approach to generating and minifying CSS. This method leverages tools such as Sass for compiling SCSS into CSS, Autoprefixer for browser compatibility, and CSSnano for minification.

SCSS Structure

The SCSS setup used in this project is modular, with imports for variables, global styles, and component-specific styles.

SCSS Configuration 
// Import variables and libraries
@import "./variables.scss";
@import "bootstrap/scss/bootstrap.scss";
@import "fontawesome-free/css/all";

// Component-specific styles
@import "./components/sidenav.scss";
@import "./sections/painteddesert-section.scss";
Node.js Processing Script

The Node.js script automates the process of compiling SCSS into a minified CSS file using Sass, PostCSS, Autoprefixer, and CSSnano.

Build Script 
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const sass = require('sass');
const postcss = require('postcss');
const fs = require('fs');

const renderSCSS = () => {
  const result = sass.renderSync({ file: 'styles.scss' });
  postcss([autoprefixer, cssnano({ preset: 'default' })])
    .process(result.css, { from: undefined })
    .then(output => fs.writeFileSync('styles.min.css', output.css));
};
Modular SCSS

Organize styles into reusable components

Autoprefixer

Ensure cross-browser compatibility

CSSnano

Minify CSS for production

CI/CD

Automated build process

Recent Updates (2024)

Since this article was first written, there have been several significant improvements to the build process and toolchain. The following updates reflect the continuous evolution of MarkHazleton.com's development approach.

Build Process Enhancements

The original build process has been expanded with additional steps to improve performance, SEO, and maintenance:

A new dedicated build step for modern SCSS has been added using Dart Sass. This implementation provides better performance and more features compared to the legacy Node-Sass approach.

Modern SCSS Build Script 
// Modern SCSS with Dart Sass and PostCSS
const result = sass.compile(modernStylesPath, {
  loadPaths: [
    upath.resolve(upath.dirname(__filename), '../node_modules')
  ],
  quietDeps: true,      // Suppress deprecation warnings from dependencies
  logger: {
    warn: function(message, options) {
      // Only show warnings that don't contain specific deprecation messages
      if (!message.includes('deprecated') && !message.includes('Deprecation')) {
        console.warn(message);
      }
    }
  }
});
Benefits of Dart Sass
  • Faster compilation times
  • Better support for modern CSS features
  • Active maintenance (Node-Sass is deprecated)
  • More reliable across environments

The build process now includes automatic generation of RSS feeds and sitemaps, which significantly improves SEO and content discoverability.

RSS Feed Generation

Automatically creates an RSS feed from the articles.json data, formatting dates properly in RFC822 format and escaping XML entities.

Sitemap Generation

Dynamically builds a sitemap.xml file that follows the sitemap protocol standards, with proper ISO 8601 date formatting and intelligent change frequency determination.

SEO Impact

These automated SEO tools improve search engine indexing, content discovery, and syndication capabilities. The result is better visibility in search results and improved user experience for followers.

The project now offers multiple options for serving content locally during development, providing flexibility for different development scenarios.

New Serving Scripts 
"scripts": {
  "start": "npm run build && node scripts/start.js",
  "start:debug": "npm run build && node scripts/start-debug.js",
  "start:http": "npm run build && node http-server.js",
  "serve": "npm run build && node simple-serve.js",
  "serve:quick": "node simple-serve.js"
}
Development Workflow Improvements
  • start:http : Simple HTTP server for testing production builds
  • serve : Clean simple server after full build
  • serve:quick : Fast serving without rebuilding (for minor content edits)

The project dependencies have been regularly updated to leverage the latest features and security improvements. Key updates include Bootstrap 5.3, Dart Sass, and modern PostCSS tools.

Frontend Framework
  • Bootstrap 5.3.7
  • Bootstrap Icons 1.13.1
  • Bootswatch 5.3.7
Build Tools
  • Sass 1.89.2
  • PostCSS 8.5.6
  • Autoprefixer 10.4.21
Automated Updates

Using npm-check-updates helps maintain the project with the latest dependencies through the update-deps script, ensuring the site benefits from the latest features and security patches.

Conclusion

The development of MarkHazleton.com relied on carefully selected technologies that aligned with the goals of the business: speed, efficiency, and maintainability.

Key Success Factors
  • Modern toolchain with Node.js and Pug
  • Automated deployment with GitHub Actions
  • Robust foundation from Start Bootstrap
  • Scalable SCSS architecture
Looking Forward

This technology stack provides a solid foundation for future growth and updates, ensuring the site remains maintainable and performant as it evolves.

By combining modern development tools with proven deployment practices, MarkHazleton.com achieves the perfect balance of development efficiency and production reliability.