How to add a custom domain to GitHub Pages
Introduction
In our last post, GitHub Pages + Hugo, we built a website using Hugo and hosted it on GitHub Pages. At the end, the site was accessible via the GitHub Pages URL -> https://magsther.github.io.
Now, we’re taking it a step further. In this post, I’ll show you how to give your website a unique identity by setting up a custom domain name using GitHub Pages.
GitHub Pages supports using custom domains, or changing the root of your site’s URL from the default, like
octocat.github.io, to any domain you own.
Getting Started
To kick things off, I added a CNAME record that links our subdomain to the default domain for our site using my DNS provider. It’s important to note that this CNAME record must point to <user>.github.io.
The next step is to integrate your domain into your GitHub account. You can find detailed instructions in the official documentation.
- Navigate to your Settings and select Pages.
- Scroll down to the Custom Domain section.
- Enter your domain name and click Save. You can also opt to enable Enforce HTTPS for added security.
Once these steps are completed, you’ll notice that a CNAME file has been automatically generated in the root of your repository. Make sure not to delete this file!
You can use the dig tool to verify that the DNS record is correctly configured. Simply run the command dig www.o11ycloud.com.
Note: DNS propagation may take up to 24 hours.
To confirm that everything is working as intended, open a new browser and navigate to https://www.<your_domain>. For instance, I visited https://www.o11ycloud.com/.
Conclusion
In this post, we successfully integrated a custom domain name into our website using GitHub Pages.
I hope you found this guide helpful. If so, don’t forget to show your appreciation by hitting the clap button and following me for more insightful articles.
