Build Process
The project employs a dual-strategy approach: a simple, real-time setup for local development and a robust, optimizing build process for production. This ensures a fast authoring experience and a highly performant final product.
Local Development Environment
For local development, the site operates without a build step to provide a simple and immediate authoring experience.
Live Tailwind CSS via CDN
During development, HTML files reference the Tailwind CSS CDN directly. This provides access to the full utility class library without needing to run a local Node.js server or file watcher, enabling rapid prototyping and styling.
Dynamic Component Loading
Shared UI elements like the header, footer, and sidebars are not hardcoded in every file. Instead, a vanilla JavaScript module (project-loader.js) fetches and injects these components into the page at runtime, mimicking a modern component framework without the overhead.
Production Build (in CI/CD)
When code is pushed to the `main` branch, the GitHub Actions workflow executes a formal build process to prepare the site for production. This process is fully automated and focuses on optimization.
CSS Compilation & Minification
The workflow uses the Tailwind CLI to scan all source files for utility classes. It then generates a single `style.css` file containing only the necessary styles. The `--minify` flag ensures this file is compressed to the smallest possible size for faster load times.
HTML Transformation
After the CSS is built, the workflow uses `sed` commands to automatically process every HTML file. It removes the development-only CDN script and injects a standard `` tag pointing to the newly compiled `style.css` file. This is the crucial step that prepares the site for a production environment.