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 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.
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.
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. Follow the steps below to configure the domain settings:
After purchasing the domain, log in to your Namecheap account.
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.
On the domain management page, find and click on the "Advanced DNS" or "DNS" section.
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.
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.
GitHub will automatically generate a CNAME file in the root directory of your repository with the custom domain value.
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.
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.
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.
Top comments (2)
would be a little better if the process was supported with suitable screenshots. on an overall, a good blog!
Thank you for your feedback! I'll make sure to add suitable screenshots to support the process in the blog post.