Host Your Hugo Website on GitHub - Everything You Need To Know

Hugo is fast becoming the best choice for static websites. It is incredibly fast and easy when it comes to building websites. Already, many users have jumped the ship to Hugo from Jekyll. In this article, we will be showing how you can build your own Hugo based website and host it on GitHub. Follow the steps and even people with minimal computer know-how will find it a breeze.

Why Github?

Hosting your hugo site on Github is one of the easiest way to host your site and did I mention, ITS FREE!

Requirements

Github account
Hugo CLI to execute commands
Your preferred Hugo Theme

Installing Hugo CLI

First of all, you need to download and set up Hugo CLI on your ~Computer~. Hugo can be installed on Windows, Mac, Linux, and pretty much any device which supports the Go compiler. Now, download your Hugo version from here-Download.

Site Creation

Execute the commands listed below in your terminal and you would have created your very own Hugo website.

hugo new site mysite
cd mysite

hugo server -D

Now, your website by default would be accessible at http://localhost:1313/.

However, as of now, the site is nothing but a domain name. You need to fill it with content like Themes, and other info.

Selecting a Theme

Hugo offers hundreds of different themes. There are both free themes as well as premium ones. You can find suited for business, blogging, freelancing, e-commerce, and for personal use as well. The thing is that there is no shortage of choice when it comes to themes. You can view the full list of themes here-Hugo

We have chosen the theme called Ink. It is minimal, crisp, and ideal for Blogs. The installation procedure is fairly easy. The commands below will show you how to get it done. However, kindly note that the installation command varies depending upon the theme. It is best to refer to the documentation while installing.

cd themes 
git clone https://github.com/knadh/hugo-ink.git

The image below depicts the home page of Hugo Ink.

Now, Hugo Ink is a minimal theme and does not offer you many customization features. However, there are themes out there where you can change the font, layout, etc. So it is best to explore the various features of your theme(if you have chosen a theme besides Ink).

Step 4: Content Generation

After you have personalized the theme, the next step is where you need to generate the content. You can manually create content files. Without any content, there won’t be any subpages. Example- content/<CATEGORY>/<FILE>.<FORMAT>) and provide metadata as well. Additionally, you can make use of the new command. hugo new posts/my-first-post.md.

Step 5: Creating Repositories

You need to understand that Github pages don’t support Hugo files like it does for Jekyll. Hence, it is necessary to create two Github repositories. One for your site and another one to hold the HTML files needed for the website. The commands below will help you.

Next, we need to link these repositories to our website.

git remote add origin [email protected]:<username>/hugo_site.git

git add .

git commit -m "Initial commit for our hugo site"

Step 6: Adding HMTL as git submodule

git submodule add [email protected]:<username>/<github_username>.github.io.git

git add .

git commit -m "Initial commit for generated html site"

Finally, push to github

git push -u origin master

Step 7: Creating HTML Content

We still need to create HTML content for our repo. In fact, there is a built-in command called Hugo that creates the files to the Public folder. We need to alter the config.toml file to output the HMTL files to the submodule <github_username>.github.io.

Open your config.toml:

https://<github_username>.github.io/"
languageCode = "en-us"
title = "Ink"
theme = "Ink"
disqusShortname = "username" # delete this to disable disqus comments
googleAnalytics = ""
publishDir = "<github_username>.github.io

The above block is what you see when you open the config.toml. Also, the publishDir param instructs Hugo the location to create the HTML files from the content. By hitting the hugo command, you can generate the content. Now, view your <github_username>.github.io folder and you can find the HTML and CSS files. Now, there is one small check before deploying.

cd <github_username>.github.io

git remote -v
 > origin [email protected]:<github_username>/<github_username>.github.io.git (fetch)
 > origin [email protected]:<github_username>/<github_username>.github.io.git (push)

If everything looks right we can easily move on to viewing our website.

Step 8: Viewing the Website

Without any delay, let’s host the website.

Luckily for us, Github does this automatically if it finds an index.html in a repo.

Before we continue let’s push our html output to github.

git add .

git commit -m "I'm hosting my first Hugo website!"

git push origin master

Head out to your Github page <github_username>.github.io. Thus, you have your very own Hugo site.

Wrap Up

We hope that you might have benefited from this article. Creating your very own Hugo website does not cost a dime and could prove to be a very valuable asset for you. For any queries, do contact us.

Additional menu