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

Table of Contents

Introduction

To host a website on GitHub Pages, follow this straightforward guide to get your site online quickly and efficiently. GitHub Pages is a free hosting service that allows you to publish static websites directly from a GitHub repository. This guide will walk you through the entire process, making it accessible even for those new to web development.

Step 1: Prepare Your Project

Create Your Website Files:
- Organize your website files in a folder. For a simple static website, your structure might look like this

/my-website├── index.html (Main HTML file) ├── style.css (CSS file) └── script.js (JavaScript file)

2. Add Content:

Create an index.html file and add some basic HTML content. For example:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>My GitHub Pages Site</title> </head> <body> <h1>Welcome to My Website!</h1> <p>This is hosted on GitHub Pages.</p> </body> </html>

3. Test Your Website Locally:

Open your index.html file in a web browser to ensure everything looks good.

Step 2: Create a GitHub Account

Sign Up for GitHub:
- Go to GitHub and sign up for an account if you don’t have one already.

Step 3: Create a New Repository

Create a Repository:
- Click the “+” icon in the top right corner and select “New repository.”
- Name your repository (e.g., my-website). Ensure it’s public if you want others to view it.
- You can initialize the repository with a README file if desired.

Step 4: Upload Your Files

Upload Files to GitHub:
- In your new repository, click the “Add file” button and select “Upload files.”
- Drag and drop your website files (e.g., index.html, style.css, script.js) into the upload area.
- Click the “Commit changes” button to save the files to your repository.

Step 5: Enable GitHub Pages

Go to Repository Settings:
- Click on the “Settings” tab in your repository.
Find GitHub Pages Section:
- Scroll down to the “GitHub Pages” section.
Select Source:
- Under “Source,” select the branch you want to use for GitHub Pages (usually the main or master branch). If prompted, select the root directory (/) for the source.
Save Changes:
- Click “Save” to enable GitHub Pages for your repository.

Step 6: Access Your Website

Get Your GitHub Pages URL:
- After enabling GitHub Pages, you will see a message indicating the URL where your site is published, usually in the format https://<your-username>.github.io/<repository-name>/.
Visit Your Website:
- Click the provided link or copy it into your browser to see your live website.

Step 7: Make Updates and Redeploy

Make Changes to Your Files:
- Whenever you want to update your website, make the necessary changes in your local project files.
Commit Changes:
- If using Git, add and commit your changes:
  git add .
  git commit -m "Updated website content"
  git push
Automatic Deployment:
- GitHub Pages automatically updates your website when you push changes to the main or master branch of your repository.