Getting a Domain Name
Firstly, we need to buy a domain name from a domain name registrar, they are typically charged at an annual fee and are quite affordable. I use Namecheap, however, feel free to use a registrar of your choosing, the following steps should be similar for other registrars.
Registrar Configuration
Once you bought your domain name, we will want to configure several new records for our website, specifically address records (also known as an A record) to point to the Github Pages IP addresses, and a canonical name record (also known as a CNAME record) to point to our Github Pages user address.
From the dashboard page select Manage and then the Advance DNS tab. Press the Add New Record button and select the type as a CNAME record from the drop-down menu. Enter www as the host of the CNAME and set the value to your Github username prepended to the github.io. domain. The Time To Live (TTL) option can be left on the default automatic setting for now.
| type | host | value |
|---|---|---|
| CNAME | www | username.github.io. |
Next, we need to point our domain name to Github Pages; to do this add four new address records with the IP address of Github Pages. These IP addresses may change, therefore if they don't work check the offical documentation for any modifications.
| type | host | value |
|---|---|---|
| A Record | @ | 185.199.108.153 |
| A Record | @ | 185.199.109.153 |
| A Record | @ | 185.199.110.153 |
| A Record | @ | 185.199.111.153 |
Hugo Configuration
In the config.toml Hugo configuration file, ensure the baseURL property is set to the new domain name.
baseURL = "https://www.<YOUR_DOMAIN_NAME>.com"
Also, create a CNAME record file in the static folder of your Hugo repository and add your web address to the file. For example, by using the following shell command.
# From your website's root directory echo "https://www.<YOUR_DOMAIN_NAME>.com" > static/CNAME
If the static folder doesn't exist, just create one in the root directory of your Hugo repository.
You can set the domain name from the Github web interface, however, I advise against it as configuring the domain name from Github will automatically add the CNAME record to your build folder, and require a Git merge when pushing any changes.
Github Pages Settings
I recommend enabling HTTPS to enforce an encrypted security protocol for your website. From Github, go to your website's repository and select the Settings tab, then Pages from the Code and Automation section and ensure Enforce HTTPS is enabled.
Conclusion
Your Github Pages website should now be available at the new web address. If it is not available, be patient as it can occasionally take 24-48 hours for the DNS propagation to complete.