Trong bài đăng blog này, chúng ta sẽ thảo luận về cách triển khai site tĩnh Hugo lên GitHub Pages bằng GitHub Actions. GitHub Actions là tính năng tự động hóa được cung cấp bởi GitHub, cho phép bạn tạo các workflow phát triển phần mềm tùy chỉnh trực tiếp trong repository GitHub của mình. Bằng cách sử dụng GitHub Actions, bạn có thể dễ dàng tự động hóa quá trình build và triển khai site tĩnh Hugo lên GitHub Pages.

Cấu hình cài đặt GitHub Pages

Trước khi có thể triển khai thành công site tĩnh Hugo lên GitHub Pages bằng GitHub Actions, bạn cần cấu hình cài đặt GitHub Pages cho dự án của mình.

  1. Vào trang dự án GitHub của bạn và nhấp vào tab “Settings” ở góc trên bên phải.
  2. Cuộn xuống phần “Pages”.
  3. Trong cài đặt “Build and deployment”, tìm menu thả xuống “Source”.
  4. Chọn “GitHub Actions” từ các tùy chọn có sẵn. Điều này hướng dẫn GitHub Pages sử dụng các artifact được tạo bởi GitHub Actions để triển khai.

Bây giờ bạn đã cấu hình cài đặt GitHub Pages, site của bạn sẽ được triển khai bằng workflow được định nghĩa trong file hugo.yaml.

Thiết lập GitHub Pages Workflow

Để thiết lập GitHub Pages workflow với Hugo và GitHub Actions, hãy làm theo các bước sau:

  1. Tạo file mới có tên hugo.yaml trong thư mục .github/workflows/ của repository site Hugo của bạn.
  2. Sao chép cấu hình YAML sau vào file hugo.yaml:
name: Deploy Hugo site to Pages

on:
  # Runs on pushes targeting the default branch
  push:
    branches:
      - main

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
  group: "pages"
  cancel-in-progress: false

# Default to bash
defaults:
  run:
    shell: bash

jobs:
  # Build job
  build:
    runs-on: ubuntu-latest
    env:
      HUGO_VERSION: 0.111.3
    steps:
      - name: Install Hugo CLI
        run: |
          wget -O ${{ runner.temp }}/hugo.deb https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb \
          && sudo dpkg -i ${{ runner.temp }}/hugo.deb
      - name: Install Dart Sass Embedded
        run: sudo snap install dart-sass-embedded
      - name: Checkout
        uses: actions/checkout@v3
        with:
          submodules: recursive
          fetch-depth: 0
      - name: Setup Pages
        id: pages
        uses: actions/configure-pages@v3
      - name: Install Node.js dependencies
        run: "[[ -f package-lock.json || -f npm-shrinkwrap.json ]] && npm ci || true"
      - name: Build with Hugo
        env:
          # For maximum backward compatibility with Hugo modules
          HUGO_ENVIRONMENT: production
          HUGO_ENV: production
        run: |
          hugo \
            --gc \
            --minify \
            --baseURL "${{ steps.pages.outputs.base_url }}/"
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v1
        with:
          path: ./public

  # Deployment job
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v2

File cấu hình này thiết lập một workflow build site tĩnh Hugo và triển khai nó lên GitHub Pages khi bạn push lên nhánh main hoặc chạy workflow thủ công từ tab Actions.

Kết luận

Với việc cấu hình cài đặt GitHub Pages trong dự án và sử dụng cấu hình workflow hugo.yaml được cung cấp, bạn có thể dễ dàng tự động hóa quá trình build và triển khai site tĩnh Hugo lên GitHub Pages. Bằng cách tận dụng GitHub Actions, bạn có thể tập trung vào việc tạo nội dung và cập nhật site mà không cần phải triển khai thủ công mỗi lần. Thiết lập này cũng cho phép bạn tận dụng các khả năng CI/CD tích hợp được cung cấp bởi GitHub Actions, giúp cải thiện hơn nữa quy trình phát triển của bạn.


Source code : https://github.com/hobbyworker/hugo-demo

Demo : https://hobbyworker.me/hugo-demo