Introduction
I’m writing this guide because one of my IT teachers was interested in adding his custom domain to his GitHub Pages website but wasn’t sure how to do it. Since I’ve already done it for my own site, I offered to help. Then I thought, why not share the process here for everyone else?
If you run into trouble, have a look at the official guides. Thanks for reading!
Prerequisites and Disclaimers
Right then!
First, you’ll need a GitHub repository to act as the website’s file store. It’s crucial to know that GitHub Pages only supports static websites. This makes it suitable for project websites, basic blogs, and personal sites, but not for anything requiring server-side code, such as PHP.
Second, you’ll need a custom domain. These can be purchased from providers like Hostinger or other domain registrars. Make sure you follow the rules of your registry. For example, if you’re using a .uk domain like mine, you’ll need to comply with Nominet’s policies.
I’ll be using Hostinger and my own setup as examples, but you may need to adjust things for your circumstances. Factors like me using Safari on macOS shouldn’t affect the outcome.
Initial Website Setup
To begin, ensure that GitHub Pages is enabled for your repository.
Go to your repository and check that it has at least an index.html file in the root directory:
Next, navigate to the "Settings" tab, then to "Pages" under the "Code and automation" section. You should see something like this:
GitHub Pages Walkthrough
Basic Deployment
To set up GitHub Pages, you can deploy your site from either a branch or a GitHub Actions workflow.
I prefer deploying from the root directory (/) of the main branch instead of the alternative /docs/ subdirectory:
Custom Domains
By default, GitHub Pages will serve your website from a URL like https://<username>.github.io/<repository>/. If you’re deploying from the root directory, the site will point to the domain root.
If you have a custom domain, you can configure it to replace the default URL.
DNS Configuration
GitHub Pages supports the following custom domain types:
| Domain Type | Example |
|---|---|
www Subdomain | www.example.com |
| Custom Subdomain | blog.example.com |
| Apex Domain | example.com |
You’ll need to update your DNS records accordingly. Here’s an example for my domain:
ewancroft.uk. 300 IN A 185.199.111.153
ewancroft.uk. 300 IN A 185.199.110.153
ewancroft.uk. 300 IN A 185.199.108.153
ewancroft.uk. 300 IN A 185.199.109.153
www.ewancroft.uk. 300 IN CNAME ewanc26.github.io.
ewanc26.github.io. 300 IN A 185.199.110.153
ewanc26.github.io. 300 IN A 185.199.111.153
ewanc26.github.io. 300 IN A 185.199.108.153
ewanc26.github.io. 300 IN A 185.199.109.153
Once you’ve configured these records, you may need to wait for DNS propagation. GitHub will automatically generate SSL certificates, but this might also take some time.
Wrapping Up
And that’s it! Your GitHub Pages site should now be live on your custom domain. If you run into any issues, don’t hesitate to consult the GitHub Pages documentation. I hope this guide was helpful.
