How to Host a Website on GitHub?

GitHub is not only a powerful tool for version control but also offers an easy way to host static websites through GitHub Pages. This free hosting service is ideal for portfolios, project documentation, blogs, and more, making it an excellent choice for developers, designers, and anyone looking to showcase their work online. In this blog, we’ll walk you through the steps to host your website on GitHub using GitHub Pages.

What You’ll Need

1. A GitHub Account: Sign up at GitHub if you don’t already have an account.
2. Basic HTML/CSS/JS Knowledge: GitHub Pages hosts static websites, so your content should be in HTML, CSS, JavaScript, or Markdown.

Step 1: Create a GitHub Repository

To host a website, you first need a GitHub repository where your website files will live.

1. Log in to GitHub.
2. Create a new repository:

• Click on the “+” icon in the upper-right corner and select “New repository.”
• Give your repository a name, ideally related to your website (e.g., my-portfolio).
• Set the repository to Public (required for GitHub Pages).
• Check the “Add a README file” box to initialize the repository.
• Click Create repository.

---

Step 2: Add Website Files to the Repository

1. Clone the repository to your local machine or upload files directly through the GitHub interface.

   git clone https://github.com/username/my-portfolio.git
   cd my-portfolio

2. Add website files (HTML, CSS, JS) into the repository folder. If you have an existing website project, you can copy your files into this folder.
3. Commit and push the changes to GitHub:

   git add .
   git commit -m "Add initial website files"
   git push origin main

Note: If you’re using GitHub’s web interface, simply click Add file > Upload files, drag your files, and commit the changes.

---

Step 3: Enable GitHub Pages

1. Go to your repository settings:

• Open your repository on GitHub.
• Click on the Settings tab.

1. Scroll down to the “Pages” section:

• Under “Source,” select the branch you want to use, typically main.
• If you want to serve files from a specific folder (like /docs), select it here.

1. Save your settings. GitHub will generate a link to your website, typically in the format https://username.github.io/repository-name/.
2. Wait a few moments for GitHub to deploy your site. Once ready, the website will be live at the generated URL.

---

Step 4: Verify Your Website

To verify your website is live:

• Visit the URL GitHub provides in the “Pages” section of your repository’s settings. You should see your website displayed.
• If you don’t see your website immediately, allow a few minutes for GitHub Pages to propagate.

---

Step 5: Customizing Your Domain (Optional)

You can use a custom domain instead of GitHub’s default URL.

1. Purchase a domain from a domain registrar (e.g., Namecheap, GoDaddy).
2. Add a CNAME file to your repository:

• In your GitHub repository, create a file named CNAME in the root directory.
• Inside CNAME, add your custom domain (e.g., www.mywebsite.com).

1. Update your domain’s DNS records:

• Go to your domain registrar’s DNS settings.
• Create a CNAME record that points your domain to username.github.io.
• Save the changes, and allow some time for the DNS to propagate.

Tip: GitHub also provides HTTPS for custom domains, which you can enable in the “Pages” settings.

---

Step 6: Updating Your Website

To make changes to your website:

1. Edit your files locally.
2. Commit the changes:

   git add .
   git commit -m "Update content"
   git push origin main

Your changes will automatically update your live website in a few moments.

---

Troubleshooting Tips

• Page not found error: Double-check that your files are in the correct branch (main or master) and in the root directory.
• Cache issues: Clear your browser cache or use an incognito window if your updates don’t show immediately.
• Custom domain setup: Ensure your DNS settings are correct and allow some time for propagation.

---

Conclusion

Hosting a website on GitHub is a straightforward way to get your static site online. With GitHub Pages, you have a fast, free, and secure platform for showcasing your work. Now, you can share your live website URL with others or continue refining it as you go. Whether it’s a personal portfolio, documentation site, or project showcase, GitHub Pages provides an excellent solution for bringing your work to the web.