Hosting Your Website on GitHub Pages with a Custom Domain: A Step-by-Step Guide
Published: 2023-06-24 08:31:01

Are you looking to host your website on GitHub Pages but unsure how to proceed? Don't worry, I've got you covered! In this blog post, I'll walk you through the process of hosting your website on GitHub Pages and setting up a custom domain, using [WPNizzle](https://wpnizzle.com/) as an example. I encountered a similar situation recently and wanted to share my solution to help others facing the same challenge. Plus, I've partnered with some reputable affiliates to bring you exclusive deals. So let's dive in and get your website up and running!

**Step 1: Setting Up Your GitHub Repository**
To begin, create a new repository on GitHub. Unlike before, you now have the freedom to choose any name you like for your repository. It doesn't have to be "username.github.io" anymore. Once created, clone the repository to your local machine using Git or GitHub Desktop. This allows you to work on your website's content and make necessary changes.

![setting repo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mjmh1y8uz6mny5pjqav2.png)


**Step 2: Publishing Your Website on GitHub Pages**
After making changes to your website, push your local repository to GitHub. Now, head to your repository's Settings tab and scroll down to find the GitHub Pages section. Here, you'll need to select the branch you want to use for your website, such as the "main" branch or any other branch of your choice. Once selected, save the settings to generate a GitHub Pages URL for your website.

![publishing to github pages](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b6abcuiu52d4zczpnypr.png)

**Step 3: Configuring a Custom Domain**

To use a custom domain for your website, start by purchasing a domain from a reliable domain registrar like [Namecheap](namecheap.pxf.io/anxrDo). Follow the steps below to configure the domain settings:

After purchasing the domain, log in to your Namecheap account.


![log in ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hukn1jgz276qp8unt4pd.png)


In the Domain List, locate the domain you want to use for your GitHub Pages website and click on the "Manage" button next to it.


![Manage domain](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uyw3yms01jza58607xts.png)

On the domain management page, find and click on the "Advanced DNS" or "DNS" section.

![DNS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3i9t6hpoonc1dhe65mwg.png)

In the DNS settings, you'll need to set up the necessary records.

Note: Each domain registrar may have a slightly different interface, but the general concept remains the same.

Set up the "A" records by adding two records with the following details:

Record 1: Name/Host: @ or leave it blank, Type: A, Value/IPv4 Address: Enter the GitHub Pages server IP address (e.g., 185.199.108.153)

Record 2: Name/Host: @ or leave it blank, Type: A, Value/IPv4 Address: Enter another GitHub Pages server IP address (e.g., 185.199.109.153)

Next, set up the "CNAME" records by adding two records with the following details:

Record 1: Name/Host: www, Type: CNAME, Value/Target: Enter your GitHub Pages username or repository name (e.g., username.github.io or username.github.io/repository-name)

Record 2: Name/Host: leave it blank, Type: CNAME, Value/Target: Enter your GitHub Pages username or repository name (e.g., username.github.io or username.github.io/repository-name)

Save the DNS settings and wait for the changes to propagate, which usually takes some time.

![DNS settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ayxbxabxuvaft65qn7k.png)

By correctly setting up the DNS records, you'll be able to link your custom domain to your GitHub Pages website. Remember, the specific steps and interface may vary slightly depending on your domain registrar, but the essential configuration remains the same. If you encounter any difficulties, refer to your registrar's documentation or contact their support for further assistance.

Note: It's important to ensure that your GitHub Pages repository settings are also configured to use the custom domain as explained in Step 4.

Now that you've successfully configured your custom domain's DNS settings, you're one step closer to hosting your website on GitHub Pages with a personalized touch.

**Step 4: Linking Your Custom Domain to GitHub Pages**
Returning to your GitHub repository's Settings tab, locate the Custom Domain field within the GitHub Pages section. Enter your custom domain (e.g., www.yourdomain.com) and save the changes. 


![custom domain](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q83jribbclelh1a23r7a.png)

GitHub will automatically generate a CNAME file in the root directory of your repository with the custom domain value.

![CNAME](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pt8ofmt7a3y7ug448650.png)

Please note that after linking your custom domain, it may take some time for the changes to propagate across the internet. This process typically involves DNS checks to ensure the linking is successful. Be patient and allow sufficient time for the DNS changes to propagate before verifying the functionality of your custom domain.

![DNS check](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3g6wbsgr572s2uvael6s.png)

By following these steps, you'll successfully link your custom domain to your GitHub Pages website, making it accessible through your chosen domain name.

**Step 5: Verifying and Enabling HTTPS**
To ensure everything is working smoothly, visit your custom domain in a web browser and check if your website is accessible. GitHub Pages automatically secures your website with HTTPS, but it's a good idea to verify if it's enabled. Navigate to the "Enforce HTTPS" section in your repository's Settings tab and enable it if necessary.


![Enforce HTTPS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r36y812xqg6wzbhzivvc.png)



Conclusion:
Congratulations! You've successfully hosted your website on GitHub Pages using a custom domain. I hope this step-by-step guide, in partnership with Namecheap, has been helpful in simplifying the process for you. Remember, you're not alone on this journey. I encountered the same situation and wanted to share my solution to assist others. Now you can showcase your work and reach a wider audience on the web. Happy coding, publishing, and best of luck with your website!

Disclosure: This blog post contains affiliate links. If you sign up for Namecheap through the provided link, I may earn a commission at no additional cost to you. Rest assured, I only recommend products and services that I have personally used and trust.