Git
How to Add a Custom Domain to GitHub Pages?
GitHub Pages is a popular choice for hosting static websites, providing developers with an easy and cost-effective way to showcase their projects. While GitHub Pages comes with a default domain (e.g., username.github.io), using a custom domain adds a layer of professionalism and branding to your site.
In this blog, we’ll walk you through the process of adding a custom domain to your GitHub Pages site.
Prerequisites
- A GitHub Pages Site: Ensure you have a GitHub Pages site up and running. If not, follow the GitHub Pages documentation to set one up.
- A Custom Domain: Purchase a domain from a domain registrar like Google Domains, Namecheap, or GoDaddy.
- Access to DNS Settings: Ensure you have access to the DNS settings of your domain.
Step 1: Configure Your GitHub Repository for GitHub Pages
- Go to your repository on GitHub.
- Click on the Settings tab.
- Scroll down to the Pages section (under “Code and automation”).
- Select the branch you want to use for GitHub Pages, typically
mainorgh-pages. - Click Save.
Step 2: Add Your Custom Domain to GitHub
- In the same Pages section, you’ll see an option for a Custom Domain.
- Enter your domain name (e.g.,
www.example.com) in the input box. - Click Save.
GitHub will automatically create a CNAME file in the root of your repository with the custom domain name. This file ensures that GitHub Pages associates your site with the custom domain.
Step 3: Update Your Domain’s DNS Records
To point your custom domain to GitHub Pages, you need to configure DNS records with your domain registrar.
3.1. For Apex Domains (e.g., example.com)
If you want your domain without a “www” prefix (e.g., example.com), add the following A records:
| Type | Name | Value |
|---|---|---|
| A | @ | 185.199.108.153 |
| A | @ | 185.199.109.153 |
| A | @ | 185.199.110.153 |
| A | @ | 185.199.111.153 |
3.2. For Subdomains (e.g., www.example.com)
If you want to use a subdomain (e.g., www.example.com), add a CNAME record:
| Type | Name | Value |
|---|---|---|
| CNAME | www | <username>.github.io |
Replace <username> with your GitHub username.
3.3. For Redirecting Apex Domain to Subdomain
If you are using www.example.com as your primary domain and want example.com to redirect to it, add the following CNAME record:
| Type | Name | Value |
|---|---|---|
| CNAME | @ | www.example.com |
This setup ensures both versions of your site work seamlessly.
Step 4: Enable HTTPS
- Return to your repository’s Settings > Pages section.
- Under the custom domain input box, check the box for Enforce HTTPS.
- GitHub will automatically provision an SSL/TLS certificate for your site. This may take a few minutes.
Once HTTPS is enabled, your site will be accessible over a secure connection (e.g., https://www.example.com).
Step 5: Verify Your Setup
- Open a web browser and navigate to your custom domain (e.g.,
https://www.example.com). - Ensure the site loads correctly and the connection is secure (look for the padlock icon in the address bar).
Troubleshooting
- DNS Propagation Delays: DNS changes can take up to 48 hours to propagate fully. Check your configuration using tools like DNS Checker.
- Incorrect CNAME or A Records: Double-check the records you added to your domain registrar’s settings.
- HTTPS Issues: Ensure that “Enforce HTTPS” is enabled in your GitHub Pages settings.
Conclusion
Adding a custom domain to your GitHub Pages site is a straightforward process that significantly enhances the professionalism and branding of your website. By following this guide, you can configure your domain and ensure it’s securely accessible via HTTPS.
With your custom domain in place, your GitHub Pages site is ready to represent your projects, portfolio, or personal brand to the world.
