How to Host a Website on Github?

Introduction

GitHub is a renowned platform for version control and collaborative coding and offers a fantastic way to host static websites for free through GitHub Pages. Whether you’re a developer, designer, or someone looking to create a personal site or project showcase, GitHub Pages provides a clear solution. Here’s a step-by-step guide on how to host your website on GitHub.

 

Step 1: GitHub Account Creation

If you don’t already have an account, you’ll need to create one. Go to GitHub and sign up for a free account. Once registered, sign in to your account.

 

Step 2: Set Up a New Repository

• The Next Big Step is to Create a New Repository. Click on the + icon in the top right corner of the GitHub dashboard and select New Repository.
• Name your repository using this method: yourusername.github.io. For example, if your GitHub username is johndoe, name your repository johndoe.github.io.
• Add a description if you like, and choose whether the repository should be public or private (note that GitHub Pages for free accounts work with public repositories).
• Click on Create Repository.

 

Step 3: Clone the Repository Locally

You must clone the repository to your computer to work on your website files locally. You can do this with the Git command line or GitHub Desktop.

Using the command line:

1. Open your terminal (Git Bash, Command Prompt, or any terminal you choose).
2. Run the following command to clone your repository:

          git clone https://github.com/yourusername/yourusername.github.io.git

3. Navigate to the directory:

          cd yourusername.github.io

 

Step 4: Add Your Website Files

1. Add your HTML, CSS, JavaScript, and any other static files to the repository folder you just cloned. Ensure your main file is named index.html, as GitHub Pages looks for this file to serve as the homepage.
2. You can utilize any code editor to create or edit your files. Popular choices include Visual Studio Code, Sublime Text, and Atom.

 

Step 5: Commit and Push Your Changes

Once you’ve added your website files, you must commit and push them to GitHub.

1. Add all your files to the staging area:

        git add .

2. Commit your changes with a message:

        git commit -m “Initial commit”

3. Push your changes to the repository:

        git push origin main

 

Step 6: Enable GitHub Pages

1. Go to your repository on GitHub.
2. Click on Settings.
3. Scroll down to the Pages section in the sidebar.
4. Under Source, select the branch you want to deploy from, usually main or master.
5. Click Save.

After a few moments, your site will be available at https://yourusername.github.io.

 

Step 7: Custom Domain (Optional)

If you want to use a custom domain with your GitHub Pages site:

1. Purchase a domain name from a domain registrar.
2. Create a file named CNAME (without any file extension) in your repository in the root directory.
3. Add your custom domain to this file, for example:

         www.yourcustomdomain.com

4. Commit and push the CNAME file to your repository.
5. Configure your domain’s DNS settings to point to GitHub Pages. You’ll typically need to add a CNAME record pointing to yourusername.github.io.

 

 

Conclusion

Hosting a website on GitHub is an excellent option for static sites due to its simplicity, cost-effectiveness, and integration with version control. With just a few steps, you can have your website up and running and easily manage updates through Git. Whether showcasing a project, hosting a personal blog, or creating a professional portfolio, GitHub Pages offers a robust platform for all your static website needs.