How to Host Your Website for Free on GitHub Pages: A Step-by-Step Guide

If you’re looking for a quick and free way to host a personal website, portfolio, or project documentation, GitHub Pages is one of the best options out there. It allows you to host static websites directly from your GitHub repositories with custom domains, SSL support, and no server setup required. In this guide, I’ll walk you through the steps to host your website on GitHub Pages.

Why Host on GitHub Pages?

• Free Hosting: GitHub Pages provides free hosting for public repositories.
• Easy Setup: No need to configure servers, databases, or deployment pipelines.
• Custom Domains: Use a custom domain name or the default your-username.github.io.
• Version Control: Built-in Git version control allows easy collaboration and rollback of changes.

Prerequisites

Before starting, make sure you have:

• A GitHub account (sign up here if you don’t have one).
• Basic knowledge of Git and HTML/CSS (though minimal coding is required).

Step-by-Step Guide to Hosting a Website on GitHub Pages

Step 1: Create a GitHub Repository

The first step is to create a repository where you’ll store your website’s code.

1. Go to GitHub and log into your account.
2. Click the green New button or go to the Create New Repository page.
3. Name your repository following this format: your-username.github.io. For example, if your GitHub username is johndoe, your repository should be called johndoe.github.io. This will make your website accessible at https://johndoe.github.io.
4. Set the repository to Public (GitHub Pages only works with public repositories unless you have a paid plan).
5. Click Create repository.

Step 2: Add Your Website Files

Now that the repository is created, you need to add your website files (HTML, CSS, JavaScript, and any other static assets).

1. Option 1: Upload files directly

. Go to your repository on GitHub.

• Click the Add file button and select Upload files.
• Drag and drop your website files (such as index.html, style.css, etc.) into the repository.
• Click Commit changes to upload the files.

2 . Option 2: Use Git to push files
If you prefer using Git, you can clone the repository and push the files from your local machine.

• Open a terminal and run the following commands:

git clone https://github.com/your-username/your-username.github.io.git
cd your-username.github.io

• Add your website files (such as index.html and other assets) to this folder.
• Run:

git add .
git commit -m "Initial commit"
git push origin main

Step 3: Enable GitHub Pages

After adding your website files, you need to enable GitHub Pages in your repository settings.

1. Go to your repository on GitHub.
2. Click on the Settings tab (located on the right-hand side of the repository).
3. Scroll down to the GitHub Pages section.
4. Under Source, select the branch where your index.html file is located. Typically, this will be the main branch.
5. If your website files are inside a subfolder (e.g., /docs), you can specify the folder here. Otherwise, leave this field empty.
6. Click Save.

GitHub will take a few minutes to deploy your website. Once deployed, you will see a green banner with the URL where your website is now live (e.g., https://your-username.github.io).

Step 4: Test Your Website

Once GitHub Pages has deployed your site, you can visit the URL displayed in the GitHub Pages settings or go directly to https://your-username.github.io to see your live website.

If you see your site live, congratulations! Your website is now hosted on GitHub Pages.

Step 5: Use a Custom Domain (Optional)

By default, GitHub Pages gives you a URL like https://your-username.github.io. If you want to use a custom domain (e.g., www.yourdomain.com), follow these additional steps:

1. Set up your domain on GitHub:

• Go to the Settings tab of your GitHub repository.
• Scroll down to the Custom domain section under GitHub Pages.
• Enter your custom domain name (e.g., www.yourdomain.com).
• Click Save.

1. Update DNS settings:
   Next, you’ll need to configure your domain provider’s DNS settings. Create a CNAME record in your DNS provider’s dashboard that points to your-username.github.io. For example:

• CNAME:
• Host: www
• Points to: your-username.github.io

This process may vary depending on your domain provider (GoDaddy, Namecheap, etc.), but most providers have guides on how to create CNAME records.

3 . Enable HTTPS:
After the DNS changes propagate, go back to the GitHub Pages section in your repository settings and ensure that the Enforce HTTPS option is checked. This will secure your website with an SSL certificate.

Step 6: Update Your Website

One of the great things about GitHub Pages is that it’s version-controlled, making it easy to update your website. Here’s how you can make changes:

1. Modify your files: Edit the index.html, CSS, JavaScript, or other files locally on your computer.
2. Push the changes:

git add .
git commit -m "Updated website content"
git push origin main

3. GitHub will automatically redeploy your site after you push the changes, and your updates will be live within a few minutes.

Step 7: Troubleshooting Common Issues

• 404 Not Found Error: If you see a 404 error when visiting your GitHub Pages URL, check if:
• The branch you selected in the GitHub Pages settings contains the index.html file.
• You correctly named your repository as your-username.github.io.
• Custom Domain Not Working: If your custom domain doesn’t work:
• Ensure that the CNAME record is correctly set up with your domain provider.
• Be patient, as DNS changes can take several hours to propagate.
• Mixed Content Warnings: If you’re using HTTPS but some resources on your site are still being loaded over HTTP, update those links to use https:// instead of http:// in your HTML files.

Conclusion

Hosting a website on GitHub Pages is a fantastic option for developers, designers, and anyone looking to showcase their work or build a static website quickly and for free. With the easy setup process and robust integration with Git, maintaining and updating your website becomes a breeze.

By following the steps in this guide, you should now have your own website live on GitHub Pages. Whether you’re hosting a personal portfolio, project documentation, or even a simple blog, GitHub Pages is an excellent solution for static web hosting.