How to host your Hugo website on Github Pages?

Nov 3, 2024 · 3 min read · hugo github ·

Share on:

Table of content

Here is the step by step guide to host your Hugo website on Github Pages.

Prerequisites

Before diving in, ensure you have the following:

Git
A GitHub account
Hugo installed on your system and running localy

Note

In this article we will copy a local Hugo web site to Git Hub Pages. First ensure your web site is working well locally. For more information on creating your first Hugo website locally, check out this guide.

Setting Up GitHub Pages

GitHub Pages is a free static site hosting service that takes HTML, CSS, and JavaScript files straight from a repository on GitHub, optionally runs the files through a build process, and publishes a website.

Follow these steps to get started:

Create a new repository named username.github.io to publish your user site. eg. Benoit-Gaumard.github.io
Enable GitHub Pages in your repository settings from Setting --> Pages When enabled a new deployment actions pipeline "pages build and deployment" with be automatically created.
Clone the repository to your local machine.

1git clone https://github.com/Benoit-Gaumard/Benoit-Gaumard.github.io.git

Add an index.html file to your repository.

1<h1> Demo site on Git Hub pages</h1>

Commit and push your changes

1cd Benoit-Gaumard.github.io
2git add . && git commit -m 'publish first github pages website' -a && git push

The deployment will start after the push

Within a few moments, your web page be live at https://username.github.io. eg. https://Benoit-Gaumard.github.io

Create the deployment pipeline

Create an empty yaml file in your local repository.

1.github/workflows/hugo.yaml

Copy and paste the YAML below into the file you created. Change the branch name and Hugo version as needed.

1code

Copy your local web site to GitHub Pages

 1$SourcePath = "C:\REPOS\BLOG\hugo-website\bga-new-site"
 2$DestinationPath = "C:\REPOS\BLOG\Benoit-Gaumard.github.io"
 3
 4# Delete existing folder content
 5Get-ChildItem -Path $DestinationPath -Exclude ".git", ".github" |
 6    ForEach-Object {
 7        if ($_.PSIsContainer) {
 8            Remove-Item -Path $_.FullName -Recurse -Force
 9        } else {
10            Remove-Item -Path $_.FullName -Force
11        }
12    }
13
14# Get all items in the source path, excluding .git and .gity
15Get-ChildItem -Path $SourcePath -Recurse -Exclude ".git", ".github" |
16    ForEach-Object {
17        # Adjust the destination path for each item
18        $targetPath = $_.FullName -replace [regex]::Escape($SourcePath), $DestinationPath
19
20        # Ensure that the destination directory exists
21        if ($_.PSIsContainer) {
22            # Create directory if it's a folder
23            if (!(Test-Path -Path $targetPath)) {
24                New-Item -ItemType Directory -Path $targetPath -Force
25            }
26        } else {
27            # Copy files
28            Copy-Item -Path $_.FullName -Destination $targetPath -Force
29        }
30    }
31
32# Commit and deploy
33cd C:\REPOS\BLOG\Benoit-Gaumard.github.io
34git add . && git commit -m 'publish new content' -a && git push

The deployment starts

You new hugo website is up and runnning at https://username.github.io. eg. https://Benoit-Gaumard.github.io