이 블로그 게시물에서는 GitHub Actions를 사용하여 Hugo 정적 사이트를 GitHub Pages에 배포하는 방법에 대해 설명합니다. GitHub Actions는 GitHub에서 제공하는 자동화 기능으로, GitHub 리포지토리에서 직접 사용자 정의 소프트웨어 개발 워크플로우를 만들 수 있습니다. GitHub Actions를 사용하면 쉽게 Hugo 정적 사이트를 빌드하고 GitHub Pages에 배포하는 프로세스를 자동화할 수 있습니다.

GitHub Pages 설정 구성

GitHub Actions를 사용하여 Hugo 정적 사이트를 GitHub Pages에 성공적으로 배포하려면 프로젝트의 GitHub Pages 설정을 구성해야 합니다.

  1. GitHub 프로젝트 페이지로 이동하고 오른쪽 상단에 있는 “Settings” 탭을 클릭합니다.
  2. “Pages” 섹션으로 스크롤합니다.
  3. “Build and deployment” 설정에서 “Source” 드롭다운 메뉴를 찾습니다.
  4. 가능한 옵션 중 “GitHub Actions"을 선택합니다. 이렇게 하면 GitHub Pages가 GitHub Actions에서 생성된 아티팩트를 배포에 사용하도록 지시됩니다.

이제 GitHub Pages 설정을 구성했으므로 hugo.yaml 파일에서 정의된 워크플로우를 사용하여 사이트를 배포할 수 있습니다.

GitHub Pages 워크플로우 설정

Hugo 및 GitHub Actions를 사용하여 GitHub Pages 워크플로우를 설정하려면 다음 단계를 따르세요.

  1. Hugo 사이트 리포지토리의 .github/workflows/ 디렉토리에 hugo.yaml 파일을 새로 만듭니다.
  2. 다음 YAML 구성을 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

이 구성 파일은 main 브랜치로 푸시하거나 Actions 탭에서 수동으로 워크플로우를 실행할 때 Hugo 정적 사이트를 빌드하고 GitHub Pages에 배포하는 워크플로우를 설정합니다.

결론

프로젝트에서 GitHub Pages 설정을 구성하고 제공된 hugo.yaml 워크플로우 구성을 사용하여 Hugo 정적 사이트를 GitHub Pages에 빌드하고 배포하는 프로세스를 쉽게 자동화할 수 있습니다. GitHub Actions을 활용하면 사이트를 수동으로 배포할 필요 없이 콘텐츠를 생성하고 업데이트할 수 있습니다. 이 설정을 사용하면 GitHub Actions에서 제공하는 내장 CI/CD 기능을 활용하여 개발 워크플로우를 더욱 개선할 수도 있습니다.

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

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