Host your hugo website using Github pages and Github action

Gurusabarish
1 min readSep 5, 2021
  • Create Github account here. Then, Create your Hugo website.
  • Create a github repo named as your username.github.io and push your whole code to this repo.

Build your website using github action

Create an action in github from the action tab and paste this code in your action file.

name: Build your hugo websiteon:
push:
workflow_dispatch:
jobs:
deploy:
# The type of runner that the job will run on
runs-on: ubuntu-latest
# Steps represent a sequence of tasks that will be executed as part of the job
steps:
- name: Checkout
uses: actions/checkout@v2
with:
submodules: true
fetch-depth: 0
- name: Install Hugo
uses: peaceiris/actions-hugo@v2
with:
hugo-version: "0.79.0"
- name: Build
run: hugo
- name: Deploy to live website
uses: peaceiris/actions-gh-pages@v3
with:
personal_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./public
#external_repository: gurusabarish/hugo-profile-demo
publish_branch: demo
user_name: Github Actions deployment bot
user_email: githubactionsbot@users.noreply.github.com

It will generate all static files of your website and create a branch called demo branch, push the file inside demo branch for each time whenever you update your repo.

Connecting your demo branch with github pages

  • Go to your settings tab of the repo. There, you can find the pages tab.
  • Go to pages tab and enable github pages and select the source from demo branch.

Now, your site is live at ‘username.github.io’.

--

--

Gurusabarish

Hey there!, I’m Gurusabarish. I build things for the web. A passionate web app developer. I tend to make use of modern web technologies to build websites.