From Domain to Deployment: How to Set Up a Custom Domain with GitHub Pages

Hello folks! I trust you're all doing well and continuously expanding your horizons.

I've always been intrigued by the process of hosting websites on the internet. There's an incredible sense of satisfaction that comes with seeing your project website accessible from any device, anywhere, at any time.

When it comes to hosting a static website using GitHub Pages, you essentially have two options:

1. Hosting the website directly on GitHub Pages: This is a straightforward option where you use GitHub Pages to host your website without a custom domain.

2. Purchasing a custom domain through Namecheap or other platforms and then deploying it using GitHub Pages: This approach allows you to give your website a more professional and memorable web address.

Now, let's delve into each of these options one by one.

Setting Up a Static Website with GitHub Pages: Hosting Alone

If you want to host a static website using GitHub Pages without a custom domain, here's a simple step-by-step guide:

1. Create a Repository: Start by creating a repository named "<github_username>.github.io" on GitHub.

2. Add Your Project: Upload your static website project files into this repository, placing them in a folder named "<Project_folder>."

3. Configure GitHub Pages: Head over to the "Settings" tab of your repository, and scroll down to the "GitHub Pages" section. Here, you can see the link where your website will be hosted and confirmation that it's enabled.

4. Access Your Website: To view your hosted static website, simply open your web browser and type in "https://<github_username>.github.io/<Project_folder>."

That's it! You should now see your static website successfully hosted on GitHub Pages.

Buying a Custom domain and deploying the website on GitHub pages

Protip for college students*: You can make use of the "GitHub Student Developer Pack " and can buy one free custom domain using an institute mail ID linked "namecheap" account*

Once you've completed all the necessary login steps, follow these simple steps to purchase a custom domain from Namecheap and deploy your website on GitHub Pages:

1. Purchase Your Custom Domain: Head to the Namecheap website and select the custom domain that suits your preferences and goals.

2. Access the Domain Dashboard: After purchasing your domain, navigate to your Namecheap dashboard. Find the "manage" button associated with the domain you bought and click it. This will take you to the DNS section.

3. Configure DNS Records: Now, it's time to configure your DNS settings. Add the A-records and CName records according to the following guidelines:

A Records(@):
185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

CName(www):
<github_username>.github.io

You're just a few steps away from having your custom domain up and running! Here's how to complete the process:

1. Install 'gh-pages': Begin by heading to your local project and executing the following command:

npm install gh-pages

1. Update 'package.json': Inside your project's "package.json" file, include the following lines:

"homepage": "https://<custom_domain>",

And within the same "package.json" file, add the following lines under "dependencies":

"dependencies": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}

1. Create a CName File: In the "public" directory of your project, create a file named "CName" and simply write your custom domain name in this file.

2. Push Changes to GitHub: Now, commit and push all the changes to your GitHub repository using these commands:

git add . 
git commit -m "<message>"
git push origin <branch_name>

1. Configure Custom Domain: Head to your repository's settings and locate the custom domain section. Add your custom domain here.

2. DNS Check and Patience: The DNS check will kick in, and this process may take anywhere from 24 to 48 hours. Be patient as it propagates across the internet.

3. Deploy Your Website: Back in your local code editor, execute the following command:

    npm run deploy
   

   Congratulations, Your website, now hosted with a custom domain, is successfully live!

   Check Deployment Status: To verify the deployment status, navigate to the GitHub action section of your repo and click on "view deployment."

Thank you for taking the time to read this blog, and I hope it has been helpful to you on your website deployment journey. Happy learning! 😊