As Sites created with HUGO will be static site and Github provides a free hosting for static website, we are going to use Github Pages.
Create a Github Repository and Clone it Locally
First thing we need to do is to Create 2 Project repositories on GitHub. Name your first repository with exact name as your website directory
YourProjectNanme (Project that you created in your local machine) and for the second one,name it as <YourUserName>.github.io. This repository will contain static content created with Hugo.
Now, pull those repos to your local machine
cd <YourProjectNanme> git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY.git cd YourUserName.github.io git clone https://github.com/YOUR-USERNAME/YourUserName.github.io.git
<YourProjectNanme> folder with below Command
And repo remotely with
git remote add origin https://github.com/YOUR-USERNAME/YourProjectName.git git pull origin master
Edit Config File
Before we commit our changes we need to edit
config.toml (Located in Root Directory of your Project ‘YourProjectName’) and change Base URL.
baseurl = "https://YourUserName.github.io" // Change YourUserName with your GIthub Username --- OR --- baseurl = "https://MySpecialDomainName.com" // Custom Domain Name
Generate static content
Now lets generate static content with Hugo
hugo -d ../YourUserName.github.io
And now Push our Hugo Code to github repository
cd YourProjectName git add . git commit -m "your message" git push origin master
And Push Static content to github
cd YourUserName.github.io git add . git commit -m "your message" git push origin master
Configuring Custom Domain
In order to use custom domain with our gitthub pages, we will have to configure
A records for our domain (you can do this wil help of DNS Provider)
Add below IP address as a
A records on your domain.
18.104.22.168 22.214.171.124 126.96.36.199 188.8.131.52
There are two way to add custom domain to our project.
1. Create a CNAME file in our root directory of the project
Settings option from github project repo and add a custom domain.
We are going with option 2
Open your github project repo YourUserName.github.io and navigate to settings page.Scroll down untill you see GitHub Pages section and there will be a option to add custom domain there.
Add your custom domain and click on save button.There is a also another check box
Enforce HTTPS. check it (It will provide a layer of encryption and your site will be viewed over
If you are using a
www sub-domain, there are chances that you might not be able to check the
Enforce HTTPS check-box.
I was also receiving a Privacy error with custom domain and i solved it by changing a DNS record.
I had added the CNAME record (you can add this using DNS Provider)
www CNAME priteshusadadiya.com
Problem with above is that I was redirecting my
www sub-domain to my apex(main) domain.
I Solved this issue by changing my CNAME record to
www CNAME YourUserName.github.io // add your github.io url here
It takes around 48 hours for Github to generate HTTPS certificate on custom domain so, you might want to wait for it.
🙌 Congratulations, your website is now live and can be seen at <YourUserName>.github.io
I am documenting this entire process just in case i might need it in future. Maybe this can be useful to you too.