Ever wanted to showcase your web projects or personal portfolio online without the hassle of setting up a web server? GitHub Pages, a static site hosting service, is an excellent solution. It's free, easy to use, and integrates seamlessly with your GitHub repository. Let's delve into how you can host your HTML file on GitHub Pages.
Before we begin, ensure you have a GitHub account and basic understanding of Git and HTML. If you're new to these, don't worry; we'll keep the guide beginner-friendly.
Setting Up Your Repository
First, you need to create a new repository on GitHub. Name it after your desired username, like 'yourusername.github.io'. This will be the URL where your website will be hosted.
Initialize a local Git repository in your project folder and connect it to your GitHub repository. You can do this using the following commands in your terminal:
Initializing and Connecting Local Repository
Open your terminal, navigate to your project folder, and initialize a local Git repository:
git init
Then, connect it to your GitHub repository:
git remote add origin https://github.com/yourusername/yourusername.github.io.git
Adding and Committing Your HTML File
Add your HTML file to the Git repository:
git add index.html
Then, commit it with a meaningful commit message:
git commit -m "Initial commit of index.html"
Enabling GitHub Pages
Now, let's enable GitHub Pages for your repository.
In your GitHub repository, click on the 'Settings' tab at the top. Scroll down to the 'GitHub Pages' section. Under 'Source', select 'main' branch (or your primary branch name) and click 'Save'.
Choosing the Right Branch
By default, GitHub Pages serves content from the 'main' branch. If you've used a different name for your primary branch, ensure you select that here.
Accessing Your Live Website
After a few minutes, your website should be live at https://yourusername.github.io. You can replace 'yourusername' with your actual GitHub username.
Congratulations! You've successfully hosted your HTML file on GitHub Pages. Now, whenever you push changes to your 'main' branch, they'll be reflected on your live website. Happy coding!