Deploy Your Hexo Blog with GitHub Actions 🚀

GitHub Actions is a fantastic tool for automating your development workflow. In this post, I’ll guide you through setting up a GitHub Actions workflow to build and deploy your Hexo blog to GitHub Pages automatically!

Overview

This GitHub Actions workflow is designed to:

✅ Build your Hexo blog whenever you push changes to the main branch.
✅ Cache dependencies to speed up the build process.
✅ Generate static files using Hexo.
✅ Deploy the files to GitHub Pages seamlessly.

Let’s dive into the details of the workflow.

References

🔹 Hexo Blog Official Documentation: https://hexo.io/docs/
🔹 GitHub Actions Official Tutorial: https://docs.github.com/en/actions

GitHub Actions Workflow Breakdown

1. Triggering the Workflow

on:
  push:
    branches:
      - main # Adjust this if your default branch is different

This configuration triggers the workflow whenever you push changes to the main branch. If your default branch is different, update it accordingly.

2. Checking Out the Repository

- name: Checkout Repository with Submodules
  uses: actions/checkout@v4
  with:
    submodules: true
    fetch-depth: 1

This step ensures the repository is checked out along with its submodules. Setting fetch-depth: 1 speeds up the process by limiting the Git history.

3. Caching Node Modules

- name: Cache Node Modules
  uses: actions/cache@v3
  with:
    path: node_modules
    key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
    restore-keys: |
      ${{ runner.os }}-node-

Caching node_modules helps speed up subsequent builds. The cache key is based on the operating system and package-lock.json, so dependencies are only reinstalled when necessary.

4. Installing Dependencies

1 2	- name: Install Dependencies run: npm ci

Using npm ci ensures a clean and consistent dependency installation, making it ideal for CI/CD environments.

5. Generating Static Files with Hexo

- name: Generate Static Files with Hexo
  run: |
    npm install hexo-cli -g
    hexo clean
    hexo generate

This step installs the Hexo CLI globally, cleans previous builds, and generates the latest static files for deployment.

6. Deploying to GitHub Pages

- name: Deploy to GitHub Pages (Push Static Files)
  run: |
    # Configure Git
    git config --global user.name "github-actions[bot]"
    git config --global user.email "github-actions[bot]@users.noreply.github.com"

    # Clone the GitHub Pages repository
    rm -rf github-pages
    git clone --depth 1 https://github.com/Appigle/Appigle.github.io.git github-pages || mkdir github-pages
    cd github-pages

    # Ensure the branch exists
    git symbolic-ref HEAD refs/heads/main || git checkout -b main

    # Remove old files (except .git)
    find . -mindepth 1 -maxdepth 1 ! -name ".git" -exec rm -rf {} \;

    # Copy new generated files from public/
    cp -r ../public/* .

    # Commit and push using Personal Access Token (PAT)
    git add .
    git commit -m "Deploy Hexo site - $(date '+%Y-%m-%d %H:%M:%S')" || echo "No changes to commit"
    git push "https://${{ secrets.DEPLOY_PAT }}@github.com/Appigle/Appigle.github.io.git" main --force

🔹 What Happens in This Step?

✅ Git Configuration – Sets up the Git user for committing changes.
✅ Repository Cloning – Clones your GitHub Pages repository (or creates the folder if it doesn’t exist).
✅ Branch Handling – Ensures you’re working on the correct branch.
✅ Cleanup – Removes old files (except .git) to prevent stale content.
✅ Deployment – Copies the new static files from the public/ folder, commits the changes, and pushes them to your GitHub Pages repository using a Personal Access Token (PAT) stored in your GitHub Secrets.

🎉 Wrapping Up

With this GitHub Actions workflow, your Hexo blog is now set up for continuous deployment. Every time you push changes, your site will be automatically updated without any manual intervention.

🚀 Happy blogging! If you have any questions or need further improvements, feel free to connect me: github.com/Appigle. 😃