Deployment
Relevant source files
The following files were used as context for generating this wiki page:The deployment system for this project is centered around the Hexo static site generator. It automates the process of building the website from source files and deploying the generated static assets to a GitHub Pages repository. The workflow is orchestrated through npm scripts and configured within the main _config.yml file.
The process includes building the site, running optimization scripts for assets like CSS, and then using a Git-based deployer to push the final build to the production repository. Additionally, the project utilizes GitHub Actions for automated tasks related to the newsletter system, which runs on a separate but integrated schedule.
Deployment Configuration
The core deployment strategy is defined in the _config.yml file. The project uses the hexo-deployer-git plugin to deploy the generated static site to a specific GitHub repository.
Sources: _config.yml:102-111
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
- type: git
repo:
github:
url: "https://github.com/thomas-iniguez-visioli/thomas-iniguez-visioli.github.io.git%22
token: $TOKEN
message: "chore: update build"
name: alphaleadership
email: alphaleadershipyt@protonmail.com
The configuration specifies the following parameters for the deployment process:
| Parameter | Value | Description |
|---|---|---|
type | git | Specifies that the deployment method is Git. |
repo.github.url | .../thomas-iniguez-visioli.github.io.git | The target GitHub repository where the static site will be pushed. |
repo.github.token | $TOKEN | An environment variable for the GitHub token used for authentication. |
message | chore: update build | The default commit message for deployment commits. |
name | alphaleadership | The author name for the deployment commit. |
email | alphaleadershipyt@protonmail.com | The author email for the deployment commit. |
Sources: _config.yml:102-111
Build and Deployment Workflow
The entire build and deployment process is triggered by a single npm script. This workflow ensures that assets are optimized and the site is cleaned before the final deployment command is executed.
The following diagram illustrates the high-level deployment flow initiated by the npm run build command.
Sources: package.json:5, _config.yml:21
NPM Scripts
The package.json file defines a set of scripts to manage the build and deployment lifecycle. These scripts act as the primary interface for developers to build, test, and deploy the site.
| Script | Command | Description |
|---|---|---|
build | npm run optimize && npm run clean && npx hexo deploy | Runs the full optimization, clean, and deployment sequence. This is the standard command for production deployment. |
build:fast | npm run clean && npx hexo deploy | A faster build that skips the optimize step. |
clean | ... && hexo clean | Installs theme dependencies and then runs Hexo's clean command to delete the database and public folder. |
deploy | hexo deploy | Executes the deployment process as configured in _config.yml. |
optimize | node scripts/build-optimizer.js | Runs a custom build optimization script. |
optimize:css | node themes/matrix-flow/scripts/critical-css-extractor.js | A specific optimization script to extract critical CSS. |
Sources: package.json:5-10
Build Process and Asset Optimization
The build process is handled by Hexo's generate command, which processes files from the source directory and outputs the static site to the public_dir, configured as ./dist.
Sources: _config.yml:20-21, src/t.txt:5
A key part of the build is asset optimization, specifically for CSS. The optimize:css script executes critical-css-extractor.js to improve rendering performance.
Critical CSS Extraction
This process extracts above-the-fold CSS rules and prepares them to be inlined directly into the HTML. This technique reduces render-blocking requests and improves metrics like First Contentful Paint (FCP).
The script identifies critical selectors, filters them from the main stylesheet, and generates a partial template (critical-css.ejs) containing only the essential CSS.
The following diagram shows the CSS extraction flow.
Automated Processes via GitHub Actions
The repository also leverages GitHub Actions for automated, scheduled tasks, particularly for the newsletter system. While this is separate from the main site deployment, it represents another form of automated deployment within the project.
The "Newsletter Scheduler" workflow has the following capabilities:
- Can be triggered manually from the GitHub Actions tab.
- Runs automatically on an hourly cron schedule.
- Checks for newsletters with a
scheduledstatus. - Sends newsletters whose scheduled time has arrived.
- Archives successfully sent newsletters.
- Sends a Discord notification upon completion.
This automation ensures that time-sensitive content (newsletters) is deployed without manual intervention.
Sources: newsletters/README.md:58-70