Deploying a simple HTML website on GitHub Pages is an excellent way to showcase your web development skills or host a personal website. GitHub Pages provides a user-friendly interface that allows you to publish your website with just a few clicks. Here's a step-by-step guide to help you deploy your HTML website on GitHub Pages.
Before we dive into the process, ensure you have the following prerequisites: an HTML file for your website, a GitHub account, and a basic understanding of Git and GitHub.
Setting Up Your GitHub Repository
To host your website on GitHub Pages, you'll need to create a repository with a specific naming convention. Let's create and set up your repository.
1. **Create a new repository**: Log in to your GitHub account, click on the '+' icon in the top-right corner, and select 'New repository'. Name your repository in the format username.github.io, replacing 'username' with your GitHub username. This is crucial for GitHub Pages to recognize your repository as a website.
Cloning Your Repository
Now that you have created your repository, clone it to your local machine using the following command in your terminal:
git clone https://github.com/yourusername/yourusername.github.io.git
Replace 'yourusername' with your actual GitHub username.
Adding Your HTML Files
Navigate into your newly cloned repository folder and add your HTML files. You can create a new HTML file or add an existing one. For this example, let's create a new file named index.html.
Open your favorite text editor or IDE, create a new file, and add the following basic HTML structure:
<!DOCTYPE html>
<html>
<head>
<title>My GitHub Pages Website</title>
</head>
<body>
<h1>Welcome to My GitHub Pages Website!</h1>
</body>
</html>
Committing and Pushing Changes
Now that you have added your HTML files, it's time to commit and push these changes to your GitHub repository.
1. **Initialize Git**: In your terminal, navigate to your repository folder and initialize Git by running:
git init
2. **Add, commit, and push**: Add your changes, commit them with a meaningful message, and push them to your GitHub repository using the following commands:
git add .
git commit -m "Initial commit with index.html"
git push origin main
Setting GitHub Pages as the Source
Now that your HTML files are in the repository, it's time to set GitHub Pages as the source for your website.
1. **Go to your repository**: In your web browser, navigate to your repository on GitHub.
2. **Access the settings page**: Click on the 'Settings' tab at the top of the repository.
3. **Scroll down to GitHub Pages**: Scroll down to the 'GitHub Pages' section and select 'main' (or 'master') as the source. Click 'Save'.
Accessing Your Live Website
After a few moments, GitHub will generate your live website. You can access it by navigating to https://yourusername.github.io in your web browser. Replace 'yourusername' with your actual GitHub username.
Congratulations! You have successfully deployed your HTML website on GitHub Pages. You can now share your website with the world or continue developing it by adding more HTML, CSS, and JavaScript files.
As your website grows, consider organizing your files into folders and using a Jekyll site for better management. Jekyll is a static site generator that works seamlessly with GitHub Pages, allowing you to create more complex and dynamic websites.
Now that your website is live, keep it up-to-date by pushing new changes to your GitHub repository. Happy coding, and enjoy showcasing your web development skills on GitHub Pages!