Dalam postingan blog ini, kita akan membahas bagaimana cara mendeploy situs statis Hugo ke GitHub Pages menggunakan GitHub Actions. GitHub Actions adalah fitur otomatisasi yang disediakan oleh GitHub yang memungkinkan Anda membuat alur kerja pengembangan perangkat lunak khusus secara langsung di repositori GitHub Anda. Dengan menggunakan GitHub Actions, Anda dapat mengotomatisasi proses pembangunan dan penyebaran situs statis Hugo Anda ke GitHub Pages dengan mudah.

Mengonfigurasi Pengaturan GitHub Pages

Sebelum Anda dapat berhasil mendeploy situs statis Hugo Anda ke GitHub Pages menggunakan GitHub Actions, Anda perlu mengonfigurasi pengaturan GitHub Pages untuk proyek Anda.

1. Buka halaman proyek GitHub Anda dan klik tab “Settings” di sudut kanan atas.
2. Gulir ke bawah ke bagian “Pages”.
3. Pada pengaturan “Build and deployment”, cari menu dropdown “Source”.
4. Pilih “GitHub Actions” dari opsi yang tersedia. Ini memberi tahu GitHub Pages untuk menggunakan artefak yang dihasilkan oleh GitHub Actions untuk penyebaran.

Sekarang setelah Anda mengonfigurasi pengaturan GitHub Pages Anda, situs Anda akan didistribusikan menggunakan alur kerja yang ditentukan dalam file hugo.yaml.

Menyiapkan Alur Kerja GitHub Pages Anda

Untuk menyiapkan alur kerja GitHub Pages dengan Hugo dan GitHub Actions, ikuti langkah-langkah berikut:

1. Buat file baru bernama hugo.yaml di direktori .github/workflows/ dari repositori situs Hugo Anda.
2. Salin konfigurasi YAML berikut ke 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 konfigurasi ini mengatur alur kerja yang membangun situs statis Hugo Anda dan mendistribusikannya ke GitHub Pages saat Anda melakukan push ke cabang main atau menjalankan alur kerja secara manual dari tab Actions.

Kesimpulan

Dengan menambahkan konfigurasi pengaturan GitHub Pages di proyek Anda dan menggunakan konfigurasi alur kerja hugo.yaml yang disediakan, Anda dapat dengan mudah mengotomatisasi proses pembangunan dan penyebaran situs statis Hugo Anda ke GitHub Pages. Dengan memanfaatkan GitHub Actions, Anda dapat fokus pada pembuatan konten dan melakukan pembaruan ke situs Anda tanpa harus mendeploynya secara manual setiap kali. Setup ini juga memungkinkan Anda memanfaatkan kemampuan CI/CD bawaan yang disediakan oleh GitHub Actions, sehingga meningkatkan alur kerja pengembangan Anda.

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

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