How to deploy a static website using GitHub Pages

GitHub Pages is a free hosting service for static websites straight from a GitHub repository. It’s perfect for hosting personal websites, project documentation, portfolios, and more. This guide will walk you through the steps to deploy a static website on GitHub Pages.

Prerequisites

• A GitHub account. If you don’t have one, you can sign up here.
• Basic knowledge of Git and GitHub.
• A static website or a template ready to be deployed.

Step 1: Create a GitHub Repository

1. Go to GitHub and log in to your account.
2. Click on the New button to create a new repository.
3. Give your repository a name, e.g., my-static-website.
4. Set the repository to Public to make it accessible.
5. Optionally, add a description and select Add a README file.
6. Click Create repository to initialize your repo.

Step 2: Add Your Website Files

1. On your local machine, prepare your static website files. These may include:
   • HTML files (e.g., index.html)
   • CSS stylesheets
   • JavaScript files
   • Any other resources (images, fonts, etc.)

2. Clone the repository to your local machine:

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

3. Move your website files into the cloned repository folder.

4. Once all files are in place, stage, commit, and push them to GitHub:

   git add .
   git commit -m "Add static website files"
   git push origin main
   

Step 3: Deploy to GitHub Pages

1. Navigate to your GitHub repository on the website.
2. Click on the Settings tab.
3. Scroll down to the GitHub Pages section.
4. Under Source, select main branch as the publishing source.

5. Click Save. GitHub will automatically deploy your website to https://your-username.github.io/my-static-website.

   Note: It may take a few minutes for your website to become live.

Step 4: Customize Your GitHub Pages Site

1. Change the URL (Optional): If you want to customize the URL (e.g., using a custom domain), go to the Custom domain section in the GitHub Pages settings and enter your domain name.
2. HTTPS: GitHub provides free HTTPS for your site. Make sure the Enforce HTTPS option is enabled.

Conclusion

Congratulations! You’ve successfully deployed a static website using GitHub Pages. Now, every time you push changes to your repository, GitHub will automatically update your live site.

Further Reading:

• GitHub Pages Documentation
• Jekyll on GitHub Pages