Hosting Static Websites for Free with GitHub Pages: A Step-by-Step Guide

GitHub Pages is, in fact, one of the most accessible and cost-effective ways to host static websites. This tutorial provides a detailed, step-by-step guide on how to host a static website using GitHub Pages, from repository setup to deployment, including custom domain configuration.

What are GitHub Pages?

GitHub Pages are  static site hosting services offered by GitHub. It allows users to publish web content directly from a repository:

• Personal portfolios

• Project showcases

• Landing pages

• Technical documentation

Key Features

• Free of charge with unlimited public repositories

• Direct integration with GitHub for seamless version control

• Automatic HTTPS support

• Custom domain support

• Ideal for front-end technologies (HTML, CSS, JavaScript)

Prerequisites

• A GitHub account (https://github.com)

• A static website (HTML, CSS, and JavaScript files)

• Optional: Git installed locally (for command-line users)

Step-by-Step Guide

Step 1: Create a New GitHub Repository

1. Sign in to your GitHub account.

2. Click the “+” icon at the upper-right corner and select “New repository.”

3. Enter a repository name (e.g., my-static-site).

4. Choose Public visibility.

5. Optionally, check “Add a README file.”

6. Click “Create repository.”

Step 2: Add Your Website Files

There are two main ways to upload your files:

Option A: Upload via GitHub Web Interface

1. Navigate to your repository.

2. Click “Add file” > “Upload files.”

3. Drag and drop your HTML, CSS, and JS files into the window.

4. Click “Commit changes.”

Note: Make sure your main index.html file is located in the root of the repository.

Step 3: Enable GitHub Pages

1. Go to your repository on GitHub.

2. Click the “Settings” tab.
   
3. Scroll down to the “Pages” section (usually under “Code and automation”).
   
   
4. Under Source, select the branch you are using (typically main) and the folder (usually /root).

5. Click “Save.” Check a link and you may see a sample of https://yourusername.github.io/my-static-site/

Step 4 (Optional): Use a Custom Domain

If you have a registered domain name, you can connect it to your GitHub Pages site:

1. In your repository’s Pages settings, locate the Custom domain section.

2. Setup your specific domain and click Save.

Best Practices

• Always include an index.html file in the root directory.
• Keep filenames lowercase and avoid spaces to ensure compatibility.
• Commit often and use clear commit messages for version control.
  
• Use a .nojekyll file if your project includes files or folders starting with an underscore (_), which GitHub Pages may ignore due to Jekyll processing.

Conclusion

GitHub Pages is a powerful and practical option for deploying static websites at no cost. With direct integration into GitHub, developers can take advantage of version control and easy publishing in a matter of minutes. GitHub Pages provides an efficient platform to get your work online with minimal setup.

References