Embarking on your coding journey? You've probably heard about GitHub, the world's leading platform for version control and collaboration. But did you know you can deploy HTML code directly from GitHub? Let's dive into a step-by-step guide to help you showcase your HTML skills seamlessly.
Before we begin, ensure you have a GitHub account and a repository ready. If you're new to GitHub, don't worry - we'll keep it simple and intuitive. Let's get started!
Setting Up Your Repository
First, let's ensure your repository is set up correctly to host your HTML files.
1. Create a new repository on GitHub. Name it something relevant to your project, like 'my-website'.
Initializing the Local Repository
Now, let's initialize a local Git repository on your computer where you'll store your HTML files.
2. Open your terminal or command prompt, navigate to the directory where you want to create your project, and type:
git init
This command initializes a new Git repository. Your project is now ready to track changes.
Connecting Local to Remote Repository
Next, we'll connect your local repository to the remote one on GitHub.
3. Copy the repository URL from your GitHub repository page. It should look something like this: https://github.com/yourusername/my-website.git
4. In your terminal, type:
git remote add origin YOUR_REPO_URL
Replace YOUR_REPO_URL with the URL you copied earlier. This command connects your local repository to the remote one on GitHub.
Adding Your HTML Code
Now that your repository is set up, let's add your HTML code.
1. Create a new file in your project directory. Name it 'index.html'.
2. Open this file in your preferred text editor or IDE and write your HTML code. For example:
<!DOCTYPE html> <html> <head> <title>My Website</title> </head> <body> <h1>Welcome to my website!</h1> </body> </html>
3. Save the file and close it.
Staging and Committing Your Changes
Now, let's stage and commit your changes so Git can track them.
4. In your terminal, type:
git add . git commit -m "Initial commit"
The first command stages your changes, and the second command commits them with a message "Initial commit".
Pushing Your Changes to GitHub
Finally, let's push your changes to the remote repository on GitHub.
5. Type:
git push -u origin main
This command pushes your changes to the 'main' branch of your remote repository. If you're using another branch, replace 'main' with your branch name.
Deploying Your HTML Code
GitHub provides a simple way to host your HTML files. Let's set it up.
1. Go to your repository page on GitHub.
2. Click on the 'Settings' tab at the top of the page.
Setting the Main Page
Now, let's set your 'index.html' file as the main page.
3. Scroll down to the 'Pages' section. Under 'Source', select 'main' and click 'Save'.
4. It may take a few minutes for GitHub to deploy your site. Once it's live, you'll see a message with a link to your website.
Viewing Your Deployed HTML Code
5. Click on the link to view your deployed HTML code. You should see your website live on the internet!
Congratulations! You've successfully deployed your HTML code on GitHub. Now, every time you push changes to your repository, GitHub will automatically update your live website. Happy coding!