How to Host a Website on GitHub Pages Free (Custom Domain Setup Included)

Introduction

This tutorial will guide you through the process of hosting a website on GitHub Pages for free, including how to set up a custom domain. By following these steps, you'll create a professional online presence that can impress visitors and showcase your work.

Step 1: Create a GitHub Repository

1. Sign in to GitHub: If you don't have an account, create one at GitHub.
2. Create a new repository:
   • Click the “+” icon in the top right corner and select "New repository."
   • Name your repository (e.g., username.github.io where username is your GitHub username).
   • Set the repository to public.
   • Check the box for "Initialize this repository with a README."
   • Click "Create repository."

Step 2: Add Files to Your Repository

1. Upload your website files:

   • Navigate to your new repository.
   • Click on "Add file" and select "Upload files."
   • Drag and drop your HTML, CSS, and any other files into the upload area.
   • Click "Commit changes" to save your files.

2. Use a template (optional):

   • You can use free templates from sites like:
     • HTML5 UP
     • Technext Template Bundle
     • Templates Jungle
   • Download your chosen template, then upload the files to your repository.

Step 3: Set Up GitHub Pages

1. Go to repository settings:
   • Click on the "Settings" tab in your repository.
2. Scroll to GitHub Pages section:
   • Under "Source," select the branch to use (typically main or master).
   • Click "Save."
3. Access your website:
   • Your website will be live at https://username.github.io after a few minutes.

Step 4: Set Up a Custom Domain

1. Purchase a domain: Buy a custom domain from a registrar (e.g., GoDaddy, Namecheap).
2. Configure DNS settings:
   • Log into your domain registrar account.
   • Find the DNS settings for your domain.
   • Add the following records:
     • A Record:
       • Name: @
       • Value: 185.199.108.153
     • CNAME Record:
       • Name: www
       • Value: username.github.io (replace username with your GitHub username).
3. Update GitHub repository settings:
   • Go to your repository settings again.
   • In the GitHub Pages section, enter your custom domain (e.g., www.yourdomain.com).
   • Click "Save."

Conclusion

You've successfully set up a website on GitHub Pages with a custom domain! This enhances your online presence and provides a professional touch. As next steps, consider customizing your website further, adding content, or exploring more advanced features like integrating forms or analytics. For more tips and tutorials, visit IdeaSpot.