You might be wondering how to deploy your HUGO Static Site. But you are not convinced with Google Firebase stuff.

If you are in a rush, using Github Pages together with Github Actions is a great way to streamline your workflow.

Make the Setup once, and just focus in your project’s content.

The Website will be autimatically updated as you push changes to your Github repository.

Why HUGO + Github Pages?

Why do we need Github Actions?

HUGO to Github Pages

HUGO & GH Actions - Step by Step

  • Go to GH settings - Pages - Build & Deployment
  • Then, instead of deploy from a branch -> deploy from GH actions
    • The previous step will create the file .github/workflows/hugo.yml
# Sample workflow for building and deploying a Hugo site to GitHub Pages
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 one concurrent deployment
concurrency:
  group: "pages"
  cancel-in-progress: true

# Default to bash
defaults:
  run:
    shell: bash

jobs:
  # Build job
  build:
    runs-on: ubuntu-latest
    env:
      HUGO_VERSION: 0.108.0
    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
      - name: Setup Pages
        id: pages
        uses: actions/configure-pages@v2
      - 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 \
            --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@v1

Basically this configuration file is telling to run the last version of ubuntu, where HUGO will be installed (at version 0.108.0).

Then it will install the dependencies and look for changes in the main branch, then deploy the new HUGO files.

FAQ

Other options to Deploy HUGO for FREE

F/OSS alternatives to Hosting Static Sites

  • Self-hosting your Static WebSite
  • Supabase
  • PocketBase

Example of HUGO deployed with Github Actions

You can find a couple of examples at my Github pages:

Github Pages with other SSGs