Looking to showcase your HTML website to the world without breaking the bank? GitHub Pages offers a free and robust solution for hosting your static websites. In this comprehensive guide, we'll walk you through the process of hosting your HTML website on GitHub Pages in a simple, step-by-step manner.
Before we dive in, ensure you have a basic understanding of Git and GitHub. If you're new to these tools, don't worry โ we'll keep the explanations beginner-friendly. Let's get started!
Setting Up Your GitHub Repository
First, we need to create a repository on GitHub that will house your HTML website files.
1. Log in to your GitHub account and click the '+' icon in the top-right corner. Select 'New repository'.
Naming Your Repository
Name your repository in the format 'yourusername.github.io', replacing 'yourusername' with your GitHub username. This is crucial for GitHub Pages to recognize your repository as a website.
For example, if your GitHub username is 'johndoe', your repository name should be 'johndoe.github.io'.
Initializing Your Local Repository
Next, initialize a local Git repository on your computer where your HTML files are stored.
Open your terminal or command prompt, navigate to your project's directory, and type the following commands:
git init
git add .
git commit -m "Initial commit"
Connecting Your Local Repository to GitHub
Now, let's connect your local repository to the GitHub repository you created earlier.
1. In your terminal or command prompt, add GitHub as a remote:
git remote add origin https://github.com/yourusername/yourusername.github.io.git
Pushing Your HTML Files to GitHub
Push your local HTML files to the GitHub repository using the following commands:
git push -u origin master
Enabling GitHub Pages
With your HTML files now on GitHub, it's time to enable GitHub Pages for your repository.
1. Go to your repository on GitHub and click on the 'Settings' tab at the top.
Selecting the Source
Scroll down to the 'GitHub Pages' section and click 'Edit'.
Under 'Source', select 'main' branch (or 'master' if that's your primary branch).
Choosing a Theme (Optional)
If you'd like, you can choose a theme for your website from the 'Themes' dropdown menu. Selecting a theme will apply a basic design to your website.
Once you've made your selections, click 'Save'. GitHub will now build your website, and you can view it by clicking the link provided under the 'Your site is published at' message.
Congratulations! You've successfully hosted your HTML website on GitHub Pages. Now, share your creation with the world and keep refining your web development skills. Happy coding!