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.

The web will be 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

  # Runs on pushes targeting the default branch
    branches: ["main"]

  # Allows you to run this workflow manually from the Actions tab

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
  contents: read
  pages: write
  id-token: write

# Allow one concurrent deployment
  group: "pages"
  cancel-in-progress: true

# Default to bash
    shell: bash

  # Build job
    runs-on: ubuntu-latest
      HUGO_VERSION: 0.108.0
      - name: Install Hugo CLI
        run: |
          wget -O ${{ runner.temp }}/hugo.deb${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
          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
          # 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
          path: ./public

  # Deployment job
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
      - 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.


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

  • Jekyll
  • With the Knitr package and Rmarkdown - It is not a SSG, but it can render html from markdown, which can be seen as a Web in GithubPages