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.
Related: Where to host your Hugo Website
Hosting your hugo site on Github is one of the easiest way to host your site and did I mention, ITS FREE!
- 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.
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.
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.