Neste post do blog, discutiremos como implantar um site estático do Hugo no GitHub Pages usando o GitHub Actions. O GitHub Actions é um recurso de automação fornecido pelo GitHub que permite criar fluxos de trabalho personalizados de desenvolvimento de software diretamente em seu repositório do GitHub. Ao usar o GitHub Actions, você pode automatizar o processo de construção e implantação do seu site estático do Hugo no GitHub Pages com facilidade.

Configurando as configurações do GitHub Pages

Antes de poder implantar com sucesso seu site estático do Hugo no GitHub Pages usando o GitHub Actions, você precisa configurar as configurações do GitHub Pages para o seu projeto.

1. Vá para a página do seu projeto no GitHub e clique na guia “Settings” no canto superior direito.
2. Role para baixo até a seção “Pages”.
3. Nas configurações “Build and deployment”, localize o menu suspenso “Source”.
4. Selecione “GitHub Actions” entre as opções disponíveis. Isso diz ao GitHub Pages para usar os artefatos gerados pelo GitHub Actions para a implantação.

Agora que você configurou as configurações do GitHub Pages, seu site será implantado usando o fluxo de trabalho definido no arquivo hugo.yaml.

Configurando seu fluxo de trabalho do GitHub Pages

Para configurar um fluxo de trabalho do GitHub Pages com o Hugo e o GitHub Actions, siga estas etapas:

1. Crie um novo arquivo chamado hugo.yaml no diretório .github/workflows/ do repositório do seu site do Hugo.
2. Copie a seguinte configuração YAML para o arquivo 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

Este arquivo de configuração cria um fluxo de trabalho que constrói seu site estático do Hugo e o implanta no GitHub Pages quando você faz push para o ramo main ou executa o fluxo de trabalho manualmente na guia Actions.

Conclusão

Com a adição da configuração das configurações do GitHub Pages em seu projeto e usando a configuração de fluxo de trabalho hugo.yaml fornecida, você pode facilmente automatizar o processo de construção e implantação do seu site estático do Hugo no GitHub Pages. Ao utilizar o GitHub Actions, você pode se concentrar na criação de conteúdo e nas atualizações do seu site sem precisar implantá-lo manualmente toda vez. Essa configuração também permite que você aproveite as capacidades integradas de CI/CD fornecidas pelo GitHub Actions, aprimorando ainda mais o seu fluxo de trabalho de desenvolvimento.

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

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