Deploying a simple HTML website on GitHub is an excellent way to showcase your web development skills and host your projects online. GitHub provides a user-friendly platform that allows you to create a personal website in minutes. Let's dive into the step-by-step process of deploying your HTML website on GitHub.
Before we begin, ensure you have the following prerequisites: an HTML file for your website, a GitHub account, and a basic understanding of Git and the command line.
Setting Up Your GitHub Repository
First, let's create a repository on GitHub to host your website.
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 using your GitHub username followed by '.github.io'. For example, if your username is 'johndoe', name your repository 'johndoe.github.io'. This will ensure your website is accessible at 'johndoe.github.io' on the web.
2. Click 'Create repository' to create your new repository.
Cloning Your Repository Locally
Now, let's clone your new repository to your local machine using the command line.
1. Open your terminal or command prompt.
2. Navigate to the directory where you want to store your project using the 'cd' command.
3. Clone your repository using the following command, replacing 'yourusername' with your actual GitHub username:
git clone https://github.com/yourusername/yourusername.github.io.git
Preparing Your HTML Website
Next, let's prepare your HTML website for deployment.
1. Navigate into your newly cloned repository using the 'cd' command:
cd yourusername.github.io
Index.html File
Ensure your HTML website has an 'index.html' file in the root directory. This file is crucial as it's the first page GitHub Pages will display when someone visits your website.
1. Create an 'index.html' file in the root directory if you haven't already.
2. Add your HTML code to this file.
Gitignore File
To avoid pushing unwanted files to GitHub, create a '.gitignore' file in the root directory and add the following line to ignore the 'node_modules' folder:
node_modules/
Deploying Your HTML Website
Now, let's deploy your HTML website to GitHub.
1. Initialize a new Git repository in your project folder:
git init
Adding and Committing Files
Add your 'index.html' file and the '.gitignore' file to your Git repository:
git add index.html .gitignore
1. Commit your changes with a meaningful commit message:
git commit -m "Initial commit"
Pushing to GitHub
Push your local repository to your GitHub repository:
git remote add origin https://github.com/yourusername/yourusername.github.io.git
git push -u origin master
Enabling GitHub Pages
Finally, enable GitHub Pages to serve your website:
1. Go to your repository on GitHub.
2. Click the 'Settings' tab.
3. Scroll down to the 'GitHub Pages' section.
4. Select 'main' (or 'master') as the source and click 'Save'.
After a few minutes, your HTML website should be live at 'yourusername.github.io' on the web. Regularly update your website by pushing new changes to your GitHub repository. Happy coding!