Site Generator: A NodeJS Tool for Website Synchronization and Modernization

Overview

The Site Generator is a custom command-line tool built with Node.js to solve the challenge of maintaining consistency and efficiency across multiple websites. It was developed to automate the synchronization of shared components—such as headers, footers, and navigation bars—and to streamline the migration of a legacy website from a restrictive visual builder to a modern, scalable architecture.

The core problem this tool addresses is the manual, error-prone process of updating common elements across numerous HTML pages. By centralizing assets and employing a templating system, the Site Generator allows developers to make a single change that propagates globally. It programmatically builds a clean, structured, and deployment-ready website from a collection of templates and content files, significantly reducing maintenance overhead and ensuring a uniform user experience.

This project was instrumental in refactoring my original portfolio site, which was built using NicePage and suffered from a flat, unmanageable file structure. The Site Generator not only rebuilt the site with a proper directory hierarchy for hosting on Nginx but also integrated with the TGM Auth API to dynamically inject authentication-related information into the static pages during the build process.

Key Features

• Centralized Asset Management: Consolidates shared HTML partials (headers, footers), CSS stylesheets, and JavaScript files into a single source of truth, eliminating code duplication and simplifying global updates.

• Dynamic Content & Auth Injection: Utilizes a templating engine to inject content into pages before deployment. This includes not only static components but also dynamic data fetched from the TGM Auth API, enabling features like displaying user login status on static pages.

• Automated Build Process: A single script orchestrates the entire site generation process, reading source files, processing templates, and outputting a complete, structured website into a dist directory ready for deployment.

• Legacy Site Refactoring: Specifically designed to parse and transform websites with poor architectural patterns, such as a flat file structure, into a clean, hierarchical layout suitable for professional hosting environments like Nginx.

Technologies & Implementation

The tool is built entirely on Node.js, leveraging its native fs (File System) and path modules for robust file manipulation and directory traversal. The choice of Node.js was driven by its powerful scripting capabilities and vast ecosystem, making it ideal for creating a custom build tool without external dependencies.

The implementation follows a clear, multi-stage process:

1. Scan: The script recursively scans a source directory for HTML files to be processed.

2. Parse & Inject: For each file, it reads the content and replaces custom placeholder tags (e.g., <!-- INJECT:HEADER -->) with the corresponding content from centralized asset files.

3. Integrate: During injection, it communicates with the TGM Auth API to fetch and embed relevant authentication scripts or user data.

4. Output: The processed files are written to a new directory structure that mirrors a professional web server layout, optimized for deployment on Nginx.

The workflow can be visualized as follows:

graph TD
    A["Source Directory (Templates, Assets)"] --> B["Node.js Build Script"];
    C["TGM Auth API"] -->|Auth Data| B;
    B --> D{"Parse & Inject Content"};
    D --> E["Output Directory (Clean, Structured Site)"];
    E --> F["Deploy to Nginx Server"];

Challenges & Solutions

The primary challenge was architecting a solution to refactor a website created with the NicePage builder. The builder generated a project with dozens of HTML files all dumped into the root directory, making it impossible to manage or update efficiently. Manually restructuring the site and updating every file's internal links and asset paths would have been a monumental and tedious task.

To solve this, I engineered the Site Generator to act as an automated refactoring engine. The script was designed to:

• Intelligently Identify Common Code: It programmatically identified repeating blocks of HTML across all files, which were then extracted into centralized header and footer partials.

• Rewrite Paths and Links: As it rebuilt the site with a new directory structure, the script automatically updated all relative links (href, src) to reflect the new file locations, ensuring no broken assets or pages.

• Establish a Maintainable Workflow: The final solution replaced a manual, UI-based editing process with a repeatable, code-driven build step. This not only fixed the immediate problem but also established a far more scalable and professional development workflow for future updates.

Results & Impact

The Site Generator was a resounding success, delivering significant improvements in efficiency, consistency, and technical architecture.

• Drastic Time Savings: Reduced the time to update the website's navigation or footer from over an hour of manual copy-pasting to under a minute by running a single command.

• Architectural Modernization: Successfully migrated a legacy, flat-file website into a structured, maintainable project ready for a professional Nginx deployment, improving performance and scalability.

• Seamless Integration: Enabled the static website to reflect user authentication states by integrating with the TGM Auth API at build time, a feature typically complex to implement on purely static sites.

• 100% Consistency: Eradicated inconsistencies across pages by establishing a single source of truth for all shared UI components, ensuring perfect brand and functional uniformity.

{TODO: Add a before-and-after diagram of the website's file structure}

Links

This was an internal tool, so no public links are available.