How to Deploy a Static Website on GitHub Pages: A Step-by-Step Guide

Hosting your static website (HTML, CSS, and JavaScript) on GitHub Pages is a quick, free, and efficient way to get your project online. This guide will walk you through each step to deploy your site and make it live on GitHub Pages.

1. Create a GitHub Account and Repository

If you don’t already have a GitHub account, sign up at github.com. Once signed in, you’ll need to create a repository.

1. Click on the “+” button in the top right corner and select New repository.
2. Name your repository (e.g., my-website). For personal GitHub Pages (usually for portfolios), name the repository as <your-username>.github.io (e.g., username.github.io).
3. Choose between Public (if you want everyone to see your code) or Private.
4. Click on Create repository.

2. Add Your Website Files

Once your repository is created, you’ll need to add your HTML, CSS, and JavaScript files.

• Option 1: Upload via GitHub

  • Navigate to your repository.
  • Click on Add file > Upload files.
  • Drag and drop your files or choose them manually.
  • Click on Commit changes to save your files in the repository.

• Option 2: Push via Git Command Line (Git CLI)

  • Make sure Git is installed on your computer.
  • Open a terminal, and navigate to your project folder.
  • Run the following commands:

  git init
  git add .
  git commit -m "Initial commit"
  git branch -M main
  git remote add origin https://github.com/<your-username>/<repository-name>.git
  git push -u origin main
  

Replace <your-username> and <repository-name> with your GitHub username and the name of your repository.

3. Configure GitHub Pages for the Repository

Now that your files are in the repository, you can enable GitHub Pages.

1. Go to the Settings tab in your repository.
2. Scroll down to the Pages section.
3. Under “Source,” select the branch you’d like to deploy from, usually main (or master).
4. Click Save. GitHub will take a moment to deploy your site.

After enabling GitHub Pages, GitHub will provide you with a URL to access your website. Typically, it will look like this: https://<username>.github.io/<repository-name>/.

4. Access Your Website

Your website is now live! You can visit the link provided in the Pages section to view your site. Changes you make to your files will update automatically when you push them to the repository.

5. Update Content and Redeploy

Anytime you make changes to your code, you need to push those changes to the GitHub repository to see them reflected online. Here’s a quick refresher:

git add .
git commit -m "Update message"
git push

GitHub Pages will automatically redeploy your site when changes are pushed to the repository.

6. Troubleshooting Common Issues

• 404 Error: If you see a 404 error, ensure the repository is set to public and that you selected the correct branch in GitHub Pages settings.
• CSS or JavaScript Not Loading: Double-check that file paths are correct, especially if you’ve moved or renamed any files.
• No index.html file: GitHub Pages looks for an index.html file as the default landing page. If it’s missing, the site may not load correctly.

Bonus Tips

• Custom Domain: You can link a custom domain (like www.mywebsite.com) to your GitHub Pages site. In the Pages section of Settings, add your custom domain and configure the DNS records on your domain provider.
• HTTPS: GitHub Pages provides free HTTPS for your site, which you can enable under the Pages settings.

And that’s it! You now have a live website hosted for free on GitHub Pages. This approach is great for portfolios, documentation, or simple static websites.