1. Introduction

In this tutorial, we will learn how to deploy a static website using GitHub Pages. This platform allows us to transform our repositories into websites to showcase our projects, documentation, or portfolio.

By the end of this tutorial, you will be able to:

• Initialize a new GitHub repository
• Add your HTML files to this repository
• Deploy your site using GitHub Pages

Prerequisites: Basic knowledge of HTML and Git.

2. Step-by-Step Guide

2.1 Creating a new GitHub repository

Start by signing in to your GitHub account. Click on the '+' icon at the top right corner of the homepage and select 'New repository'. Provide a name for the repository, for example, 'my-website'. Leave it as a public repository and initialize it with a README.

2.2 Pushing your HTML files

Clone the repository to your local machine using the command:

git clone https://github.com/username/my-website.git

Replace 'username' with your GitHub username.

Navigate into the cloned repository and add your HTML files:

cd my-website
// Add your HTML files here

Then, push them to the GitHub repository:

git add .
git commit -m "Initial commit"
git push origin master

2.3 Configuring your site's settings for deployment

Go back to your GitHub repository and navigate to 'Settings'. Scroll down to the 'GitHub Pages' section. Under 'Source', select 'master branch'. Your site is now published at 'https://username.github.io/my-website'.

3. Code Examples

3.1 Creating and Cloning a Repository

# Create a new repository on GitHub
# Clone the repository to your local machine
git clone https://github.com/username/my-website.git

3.2 Adding HTML files and pushing to GitHub

# Navigate into the cloned repository
cd my-website

# Add your HTML files here
# ...

# Add the files to the staging area
git add .

# Commit the changes
git commit -m "Initial commit"

# Push to the master branch
git push origin master

4. Summary

In this tutorial, you've learned how to:

• Create a new GitHub repository
• Clone this repository to your local machine
• Add HTML files to this repository
• Deploy your site using GitHub Pages

Next steps: Learn how to customize your GitHub Pages site with Jekyll, add a custom domain, or set up a CI/CD pipeline.

Additional resources: GitHub Pages Documentation, Jekyll Documentation

5. Practice Exercises

1. Exercise: Create a simple 'Hello, World!' webpage and deploy it using GitHub Pages.
   Solution: Follow the steps in the tutorial, using a single index.html file containing <h1>Hello, World!</h1>.

2. Exercise: Add a CSS file to your GitHub Pages site and use it to style your 'Hello, World!' page.
   Solution: Create a styles.css file in your repository, link it in your index.html, and add some styles. Don't forget to commit and push the changes!

3. Exercise: Add a second page to your site, linked from your 'Hello, World!' page.
   Solution: Create a second.html file, and add a link to it in index.html. Commit and push the changes, then verify that the link works on your published site.