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.
- 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.
- Cuộn xuống phần “Pages”.
- Trong cài đặt “Build and deployment”, tìm menu thả xuống “Source”.
- 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:
- Tạo file mới có tên
hugo.yamltrong thư mục.github/workflows/của repository site Hugo của bạn. - 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