How to Publish HTML Website on GitHub

Publishing an HTML website on GitHub is a straightforward process that allows you to showcase your web development projects, collaborate with others, and even host your site for free. Here's a step-by-step guide to help you achieve this.

Before we dive in, ensure you have the following: an HTML file (or multiple files if it's a larger project), a GitHub account, and Git installed on your local machine. If you haven't installed Git, you can download it from the official website: git-scm.com/downloads.

Setting Up Your GitHub Repository

First, you'll need to create a repository on GitHub to host your website. A repository, or repo, is like a project folder where your files are stored and tracked.

To create a new repository:

1. Log in to your GitHub account.
2. Click the '+' icon in the top-right corner and select 'New repository'.
3. Name your repository (e.g., 'my-website'), write a short description, and then click 'Create repository'.

Initializing Git Locally

Now, let's initialize Git in your local project folder. This tells Git to start tracking changes in your files.

Open your terminal or command prompt, navigate to your project folder, and type:

git init

You should see a new folder named '.git' appear in your project folder.

Adding and Committing Your Files

Next, you'll add your HTML files to Git and commit them. This is like saving a snapshot of your project.

To add your files, type:

git add .

Then, to commit your changes, type:

git commit -m "Initial commit"

Replace "Initial commit" with a brief description of your commit.

Connecting Your Local Repository to GitHub

Now, you'll connect your local repository to the one you created on GitHub.

First, copy the remote URL of your GitHub repository. You can find this by clicking the green 'Code' button on your repository page and copying the URL in the 'Clone with HTTPS' section.

Adding the Remote Repository

In your terminal, add the remote repository URL to your local Git repository with the following command:

git remote add origin YOUR_REPO_URL

Replace 'YOUR_REPO_URL' with the URL you copied earlier.

Pushing Your Local Changes to GitHub

Finally, you'll push your local changes to the GitHub repository. This makes your website live and accessible online.

To push your changes, type:

git push -u origin main

If you're using a different branch name, replace 'main' with your branch name.

Congratulations! Your HTML website is now published on GitHub. You can access it by visiting https://github.com/yourusername/your-repo-name, replacing 'yourusername' and 'your-repo-name' with your GitHub username and repository name, respectively. To view your website, click the 'Settings' tab, scroll down to the 'GitHub Pages' section, and select the main branch as the source. Then, click 'Save'. Your website should now be live at https://yourusername.github.io/your-repo-name.

Regularly update your website by making changes locally, committing them, and pushing them to GitHub. Happy coding!