How to Host a Website on GitHub?

GitHub is not just a platform for version control and collaboration; it also provides a powerful feature called GitHub Pages that allows you to host static websites directly from your repository.

Whether you’re showcasing a portfolio, sharing documentation, or launching a personal project, GitHub Pages is an excellent (and free!) solution.

In this blog, we’ll walk you through the process of hosting a website on GitHub.

Step 1: Prepare Your Website Files

Before hosting a website, ensure you have the following:

  • HTML, CSS, and JavaScript files for your website.
  • A clear file structure (e.g., index.html as your entry point).

If you don’t have a website ready, you can create a simple index.html file with the following content:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My GitHub Page</title>
</head>
<body>
  <h1>Welcome to My GitHub Page!</h1>
  <p>This is a sample website hosted on GitHub.</p>
</body>
</html>

Step 2: Create a Repository on GitHub

  1. Log in to your GitHub account.
  2. Click on the + icon at the top-right corner and select New repository.
  3. Fill in the repository details:
    • Repository name: Choose a name (e.g., my-website).
    • Visibility: Public or private (public is recommended for GitHub Pages).
  4. Click Create repository.

Step 3: Upload Your Website Files

You can add your website files to the repository in two ways:

Option 1: Using the GitHub Website

  1. Navigate to your newly created repository.
  2. Click Add file > Upload files.
  3. Drag and drop your website files (including index.html) into the file uploader.
  4. Commit your changes by clicking Commit changes.

Option 2: Using Git on Your Local Machine

  1. Clone the repository to your local machine: git clone https://github.com/your-username/my-website.git cd my-website
  2. Copy your website files into the repository folder.
  3. Add and commit the files: git add . git commit -m "Add website files"
  4. Push the changes to GitHub: git push origin main

Step 4: Enable GitHub Pages

  1. Navigate to your repository on GitHub.
  2. Click on the Settings tab.
  3. Scroll down to the Pages section (usually under the “Code and automation” category).
  4. Under Source, select the branch you want to use for GitHub Pages (e.g., main or gh-pages).
  5. If prompted, select the root directory (/) as the source.
  6. Click Save.

GitHub Pages will now build and deploy your website. This may take a few moments.

Step 5: Access Your Website

Once deployed, your website will be available at the following URL:

https://<your-username>.github.io/<repository-name>/

For example, if your username is johndoe and your repository is named my-website, your website URL will be:

https://johndoe.github.io/my-website/

If you’re hosting your website from a repository named <username>.github.io, the URL will be:

https://<username>.github.io/

Step 6: (Optional) Use a Custom Domain

To use a custom domain, follow these steps:

  1. Purchase a domain from a domain registrar (e.g., Namecheap, GoDaddy).
  2. In your repository, create a file named CNAME (no file extension) in the root directory.
  3. Add your custom domain (e.g., www.example.com) to the CNAME file.
  4. Configure DNS settings with your domain registrar by adding the following records:
    • A Records: Point to GitHub Pages’ IP addresses: 185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153
    • CNAME Record: Point to <your-username>.github.io.

It may take up to 48 hours for the DNS changes to propagate.

Tips for Success

  • Update Regularly: Push changes to your repository to update your website.
  • Check Build Errors: If your site doesn’t load, check the Actions or Pages tab for build error logs.
  • Use Jekyll: GitHub Pages supports Jekyll, a static site generator, for creating more dynamic static sites.

Conclusion

Hosting a website on GitHub is a quick and cost-effective way to get your site online. Whether you’re a beginner or a seasoned developer, GitHub Pages offers a seamless way to share your projects with the world.

By following this guide, you can easily set up and manage a hosted website.

Sharing Is Caring:

Leave a Comment