CI/CD untuk Hugo: GitHub Actions dan Deployment Otomatis

Update: 3 February 2026

Baca: 5 menit

CI/CD untuk Hugo: GitHub Actions dan Deployment Otomatis

Continuous Integration dan Continuous Deployment (CI/CD) adalah practices yang essential untuk workflow pengembangan modern. Untuk Hugo sites, CI/CD dapat mengautomasi build process, testing, dan deployment, memungkinkan developer fokus pada content dan development tanpa manual overhead. Panduan ini akan membahas cara setup CI/CD pipeline yang robust untuk Hugo dengan GitHub Actions.

Implementasi CI/CD untuk Hugo sites memberikan banyak keuntungan: automated testing sebelum deployment, consistent build environment, faster iteration cycles, dan rollback capability jika ada issues.

Memahami GitHub Actions untuk Hugo

GitHub Actions adalah CI/CD platform yang terintegrasi dengan GitHub, memungkinkan workflow automation berdasarkan events di repository.

Struktur GitHub Actions

GitHub Actions menggunakan workflow files dalam format YAML yang disimpan di .github/workflows/:

name: Hugo CI/CD

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

Workflow Basic Build

Setup Hugo dan Build

# .github/workflows/hugo-build.yml
name: Build Hugo Site

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
        with:
          submodules: true
          fetch-depth: 0

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: '0.139.2'
          extended: true

      - name: Build
        run: hugo --minify

      - name: Upload build artifacts
        uses: actions/upload-artifact@v4
        with:
          name: hugo-build
          path: public/
          retention-days: 7

Deployment Workflows

Deploy ke GitHub Pages

# .github/workflows/gh-pages.yml
name: Deploy to GitHub Pages

on:
  push:
    branches: [main]
  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
        with:
          submodules: true
          fetch-depth: 0

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: '0.139.2'
          extended: true

      - name: Build
        run: hugo --minify

      - name: Setup Pages
        uses: actions/configure-pages@v4

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: public/

      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

Deploy ke Cloudflare Pages

# .github/workflows/cloudflare-pages.yml
name: Deploy to Cloudflare Pages

on:
  push:
    branches: [main]
  workflow_dispatch:

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
        with:
          submodules: true

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: '0.139.2'
          extended: true

      - name: Build
        run: hugo --minify

      - name: Deploy to Cloudflare Pages
        uses: cloudflare/pages-action@v1
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          projectName: my-hugo-site
          directory: public
          gitHubToken: ${{ secrets.GITHUB_TOKEN }}

Deploy ke Netlify

# .github/workflows/netlify.yml
name: Deploy to Netlify

on:
  push:
    branches: [main]
  workflow_dispatch:

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
        with:
          submodules: true

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: '0.139.2'
          extended: true

      - name: Build
        run: hugo --minify

      - name: Deploy to Netlify
        uses: nwtgck/actions-netlify@v3
        with:
          publish-dir: './public'
          production-branch: main
          github-token: ${{ secrets.GITHUB_TOKEN }}
          deploy-message: "Deploy from GitHub Actions"
          enable-pull-request-comment: true
          enable-commit-comment: true
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}

Automated Testing

Lighthouse CI

# .github/workflows/lighthouse.yml
name: Lighthouse CI

on: [push]

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      
      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: '0.139.2'
          extended: true
      
      - name: Build Hugo
        run: hugo --minify
      
      - name: Run Lighthouse CI
        uses: treosh/lighthouse-ci-action@v11
        with:
          urls: |
            https://example.com
            https://example.com/posts
          budgetPath: ./lighthouse-budget.json

Lighthouse budget configuration:

{
  "ci": {
    "assert": {
      "assertions": {
        "categories:performance": ["error", { "minScore": 0.9 }],
        "categories:accessibility": ["error", { "minScore": 0.9 }],
        "categories:best-practices": ["error", { "minScore": 0.9 }],
        "categories:seo": ["error", { "minScore": 0.9 }]
      }
    }
  }
}

Link Checker

# .github/workflows/link-checker.yml
name: Check Links

on:
  push:
    branches: [main]
  schedule:
    - cron: '0 0 * * 0'  # Weekly

jobs:
  link-check:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      
      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: '0.139.2'
      
      - name: Build
        run: hugo --minify
      
      - name: Check links
        uses: freebroccolo/github-action-markdown-link-check@1
        with:
          use-quiet-mode: 'yes'
          use-verbose-mode: 'yes'
          config-file: '.linkcheckerrc.json'

HTML Validation

# .github/workflows/html-validator.yml
name: HTML Validation

on:
  push:
    branches: [main]

jobs:
  validate:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      
      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: '0.139.2'
      
      - name: Build
        run: hugo --minify
      
      - name: Validate HTML
        run: |
          npm install -g html-validate
          html-validate public/**/*.html

Content Update Triggers

Scheduled Builds

# .github/workflows/scheduled-build.yml
name: Scheduled Content Update

on:
  schedule:
    - cron: '0 */4 * * *'  # Every 4 hours
  workflow_dispatch:

jobs:
  rebuild:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0
      
      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: '0.139.2'
          extended: true
      
      - name: Build
        run: hugo --minify
      
      - name: Deploy to Production
        # Your deployment step here

Webhook-Based Rebuild

# .github/workflows/webhook.yml
name: Webhook Trigger

on:
  repository_dispatch:
    types: [content-update]
  workflow_dispatch:

jobs:
  rebuild:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      
      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: '0.139.2'
          extended: true
      
      - name: Build and Deploy
        run: |
          hugo --minify
          # Deployment commands

Environment-Specific Builds

Multi-Environment Setup

# .github/workflows/multi-env.yml
name: Multi-Environment Deploy

on:
  push:
    branches: [main, develop]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      
      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: '0.139.2'
          extended: true
      
      - name: Build
        run: hugo --environment ${{ github.ref == 'refs/heads/main' && 'production' || 'development' }}
      
      - name: Upload artifact
        uses: actions/upload-artifact@v4
        with:
          name: hugo-build
          path: public/

  deploy-staging:
    if: github.ref == 'refs/heads/develop'
    needs: build
    runs-on: ubuntu-latest
    steps:
      - name: Download artifact
        uses: actions/download-artifact@v4
        with:
          name: hugo-build
          path: public/
      
      - name: Deploy to Staging
        # Staging deployment

  deploy-production:
    if: github.ref == 'refs/heads/main'
    needs: build
    runs-on: ubuntu-latest
    steps:
      - name: Download artifact
        uses: actions/download-artifact@v4
        with:
          name: hugo-build
          path: public/
      
      - name: Deploy to Production
        # Production deployment

Caching Strategies

NPM Dependencies Cache

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

Hugo Resources Cache

- name: Cache Hugo resources
  uses: actions/cache@v4
  with:
    path: resources
    key: ${{ runner.os }}-hugo-resources-${{ hashFiles('**/*.md') }}
    restore-keys: |
      ${{ runner.os }}-hugo-resources-

Notification dan Monitoring

Slack Notifications

- name: Notify on failure
  if: failure()
  uses: 8398a7/action-slack@v3
  with:
    status: failure
    channel: '#deployments'
    text: 'Hugo build failed!'
  env:
    SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}

Build Summary

- name: Build Summary
  if: always()
  uses: actions/github-script@v7
  with:
    script: |
      const { data } = await github.rest.repos.createCommitStatus({
        owner: context.repo.owner,
        repo: context.repo.repo,
        sha: context.sha,
        state: '${{ job.status }}' === 'success' ? 'success' : 'failure',
        target_url: '${{ env.RUN_URL }}',
        description: 'Hugo build ${{ job.status }}'
      });

Best Practices

Security

Simpan secrets dengan aman menggunakan GitHub Secrets. Jangan pernah commit sensitive data. Gunakan specific versions untuk actions. Review permissions yang diminta oleh actions.

Performance

Gunakan caching untuk mempercepat builds. Parallelize jobs jika memungkinkan. Use artifacts untuk share build outputs antar jobs.

Reliability

Implementasikan retry logic untuk network operations. Monitor build times dan optimize jika terlalu lama. Use specific Hugo version untuk consistency.

Kesimpulan

CI/CD pipeline yang well-designed adalah essential untuk Hugo sites production. Dengan GitHub Actions, Anda dapat mengautomate seluruh workflow dari code commit hingga deployment. Implementasi tips dan best practices di panduan ini akan membantu membangun pipeline yang reliable dan efficient.