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
- Open your project in VS Code
- Run the start.js script in the terminal
- 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.