How to host your Hugo website on GitHub pages
Koji Toyota
Posted on December 27, 2017
What is Hugo?
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
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
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/"
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"
Launch Hugo locally
Execute below
hugo server
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
Hugo builds your website under public
folder.
Upload your website
Before you upload it, you should add public
to your .gitignore
echo 'public/' >> .gitignore
and move to public folder
cd public
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
Then, access your website https://<YOUR-USER-NAME>.github.io
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
November 25, 2024
November 21, 2024