How to Host a Website on GitHub?

GitHub provides an excellent platform for hosting static websites for free through GitHub Pages. Whether you’re a beginner building your portfolio, a developer showcasing projects, or an organization creating documentation, GitHub Pages is a reliable and straightforward solution.

This blog will guide you step-by-step on how to host a static website on GitHub.

Why Use GitHub Pages?

Here are some benefits of hosting your website on GitHub Pages:

• Free Hosting: No charges for hosting static sites.
• Custom Domain Support: Use GitHub’s domain (username.github.io) or your own custom domain.
• Version Control: Easily manage your website’s code with Git.
• Automatic Deployment: Changes to your repository are instantly reflected on your site.

---

Prerequisites

Before hosting your website, ensure you have:

1. A GitHub Account: Sign up if you don’t have one.
2. Git Installed: Install Git on your local machine.
3. Basic HTML/CSS/JS Files: Your static website files ready for deployment.

---

Steps to Host a Website on GitHub

Step 1: Create a Repository

1. Log in to your GitHub account.
2. Click on + (New) in the top-right corner and select New Repository.
3. Name the repository as either:

• <username>.github.io (for a user or organization site).
• Any name (for project-specific sites).

1. Select Public and check Add a README file.
2. Click Create Repository.

---

Step 2: Add Website Files

Option 1: Upload Files Directly via GitHub

1. Open your repository.
2. Click Add file > Upload files.
3. Drag and drop your website files (HTML, CSS, JS, images, etc.).
4. Commit the changes by clicking Commit changes.

Option 2: Use Git to Push Files

1. Clone the repository to your local machine:
   “`bash
   git clone https://github.com//.git

2. Move your website files into the repository folder.  
3. Stage and commit the changes:  

bash
git add .
git commit -m “Add website files”

4. Push the changes to GitHub:  

bash
git push origin main
“`

---

Step 3: Enable GitHub Pages

1. Open the repository on GitHub.
2. Go to Settings > Pages (scroll down in the sidebar).
3. Under Source, select the branch where your website files are located (usually main) and the folder (root if files are in the repository’s main folder).
4. Click Save.

GitHub will display the website URL (e.g., https://<username>.github.io/) once the deployment is complete.

---

Testing Your Website

1. Open the provided URL in a browser.
2. Verify that the website loads as expected.
3. If there are issues, ensure all file paths are correct (e.g., relative paths for CSS/JS).

---

Adding a Custom Domain

If you have a custom domain, you can link it to your GitHub Pages site:

1. In your repository, create a file named CNAME in the root directory.
2. Add your custom domain (e.g., www.example.com) in the file.
3. Update your DNS settings to point the domain to GitHub’s servers:

• 185.199.108.153
• 185.199.109.153
• 185.199.110.153
• 185.199.111.153

1. Save and wait for DNS propagation (may take up to 48 hours).

---

Best Practices for GitHub Pages

• Optimize Images: Reduce image file sizes for faster loading.
• Secure Your Site: Ensure HTTPS is enabled under Settings > Pages.
• Organize Files: Keep your repository structure clean (e.g., separate CSS, JS, and images into folders).
• Automate Deployments: Use GitHub Actions for more complex workflows.

---

Common Issues

1. Site Not Loading

• Ensure the repository is public.
• Check if the branch and folder are correctly selected in the Pages settings.

2. Broken Links or Missing Files

• Verify file paths (use relative paths).
• Ensure file names match exactly (case-sensitive).

---

Conclusion

Hosting a static website on GitHub Pages is a simple yet powerful way to share your projects or ideas with the world. With its free hosting, custom domain support, and integration with Git, it’s an excellent choice for developers and non-developers alike.

Start hosting your website today and take advantage of GitHub’s robust platform!