How to host your Hugo website on GitHub pages

toyotarone

Koji Toyota

Posted on December 27, 2017

How to host your Hugo website on GitHub pages

What is Hugo?

Official site

Installing Hugo

At first, Install Hugo.
Install Hugo (official)

Setup

Follow the procedures below:
Quick start
You can skip step1.

About step3, some websites might explain using git clone instead of git submodule.
You can choose either, but I recommend you to use git submodule because using it enables you tracking the newest version of the theme.
If you chose git clone, You should add themes folder to .gitignore like below:

echo 'themes/' >> .gitignore
Enter fullscreen mode Exit fullscreen mode

Add contents

If you chose gohugo-theme-ananke as your theme, you should see below:
Getting started(gohugo-theme-ananke)
Of course you can add your first content with

hugo new posts/foobar.md
Enter fullscreen mode Exit fullscreen mode

but I recommend you to copy the contents of exampleSites from gohugo-theme-ananke and tinker them.

Config your config.toml

If you wanna upload the website to your GitHub Pages, you should modify config.toml.

baseURL = "https://<YOUR-USER-NAME>.github.io/"
Enter fullscreen mode Exit fullscreen mode

The part <YOUR-USER-NAME> should be your user name of github.

And if you are tracking the Quick start you should add the line below like official procedure:

theme = "ananke"
Enter fullscreen mode Exit fullscreen mode

Launch Hugo locally

Execute below

hugo server
Enter fullscreen mode Exit fullscreen mode

and hugo starts soon.
Let's access to localhost:1313 with your web browser.
You can see the aesthetic of the website.

Build your website

When you done your website, please execute

hugo
Enter fullscreen mode Exit fullscreen mode

Hugo builds your website under public folder.

Upload your website

Before you upload it, you should add public to your .gitignore

echo 'public/' >> .gitignore
Enter fullscreen mode Exit fullscreen mode

and move to public folder

cd public
Enter fullscreen mode Exit fullscreen mode

After that, git push whole contents of the public folder.

git init
git remote add origin https://github.com/<YOUR-USER-NAME>/<YOUR-USER-NAME>.github.io
Enter fullscreen mode Exit fullscreen mode

Then, access your website https://<YOUR-USER-NAME>.github.io

đź’– đź’Ş đź™… đźš©
toyotarone
Koji Toyota

Posted on December 27, 2017

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related