Complete Web Designing Course for Beginners

Lesson 11.3 – GitHub Pages Deployment

Introduction

After creating a website using HTML, CSS, and JavaScript, the next step is making it available on the internet so anyone can access it through a web browser.

One of the easiest and completely free methods for hosting static websites is GitHub Pages.

GitHub Pages allows developers, students, and beginners to publish websites directly from a GitHub repository without purchasing web hosting.

In this lesson, we will learn what GitHub Pages is, its benefits, requirements, and the complete process of deploying a website using GitHub Pages.

What is GitHub Pages?

GitHub Pages is a free website hosting service provided by GitHub.

It allows users to host static websites directly from GitHub repositories.

Definition

GitHub Pages is a platform that publishes HTML, CSS, and JavaScript files from a GitHub repository and makes them available on the internet.

Example Website URL:

https://username.github.io

https://username.github.io/project-name

What Can Be Hosted on GitHub Pages?

GitHub Pages is ideal for static websites.

Examples:

Personal portfolios
Student projects
Landing pages
Resume websites
Documentation websites
Course websites
HTML/CSS practice projects

What Cannot Be Hosted?

GitHub Pages does not support server-side technologies such as:

PHP
Node.js Backend
Python Flask
Django
ASP.NET
Java Servlet

GitHub Pages only supports:

HTML
CSS
JavaScript
Images
Videos
Fonts

Advantages of GitHub Pages

Free Hosting

No hosting charges.

Easy Deployment

Upload files and publish quickly.

HTTPS Support

Secure website connection.

Git Integration

Works directly with GitHub repositories.

Good for Learning

Perfect for beginners and students.

Reliable Infrastructure

Hosted on GitHub’s servers.

Requirements for GitHub Pages

Before deployment, you need:

GitHub Account

Create a free GitHub account.

Website Files

Example:

index.html
style.css
script.js
images/

Internet Connection

Required for uploading files.

Creating a GitHub Account

Step 1:

Visit GitHub.

Step 2:

Click Sign Up.

Step 3:

Enter:

Username
Email Address
Password

Step 4:

Verify your account.

Step 5:

Understanding GitHub Repository

A repository (repo) is a storage location where project files are stored.

Example:

MyPortfolioWebsite

Repository contents:

MyPortfolioWebsite
│
├── index.html
├── style.css
├── script.js
└── images

Creating a New Repository

Step 1

Step 2

Click:

New Repository

Step 3

Enter repository name.

Example:

portfolio-website

Step 4

Select:

Public

GitHub Pages requires public repositories for free hosting.

Step 5

Click:

Create Repository

Repository is now created.

Uploading Website Files

After creating the repository:

Step 1

Open the repository.

Step 2

Click:

Add File

Step 3

Choose:

Upload Files

Step 4

Drag and drop website files.

Example:

index.html
style.css
script.js

Step 5

Click:

Commit Changes

Files are now uploaded.

Importance of index.html

GitHub Pages looks for a file named:

index.html

This file acts as the homepage.

Example:

<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<h1>Welcome to My Website</h1>
</body>
</html>

Without an index.html file, the website may not load properly.

Enabling GitHub Pages

After uploading files:

Step 1

Open repository.

Step 2

Click:

Settings

Step 3

Find:

Pages

in the left menu.

Step 4

Under Source:

Select:

Deploy from a branch

Step 5

Choose:

main

branch.

Step 6

Choose:

/ (root)

folder.

Step 7

Click:

Save

GitHub starts deployment.

Deployment Process

GitHub automatically:

Reads repository files.
Builds the website.
Publishes the website.
Generates a public URL.

Example:

https://username.github.io/portfolio-website

After a few minutes, the website becomes accessible online.

Example Deployment Structure

Repository:

portfolio-website
│
├── index.html
├── style.css
├── script.js
└── images

Generated URL:

https://username.github.io/portfolio-website

Users can open this URL from anywhere.

Updating the Website

One advantage of GitHub Pages is easy updates.

Example

Suppose you change:

<h1>My Portfolio</h1>

<h1>Welcome to My Professional Portfolio</h1>

Steps:

Upload updated file.
Commit changes.
GitHub automatically redeploys.

Website updates within a few minutes.

Using Custom Domain Names

GitHub Pages supports custom domains.

Example:

Instead of:

username.github.io

you can use:

www.myportfolio.com

Requirements:

Purchase a domain.
Configure DNS settings.
Connect domain to GitHub Pages.

Common GitHub Pages File Structure

website-project
│
├── index.html
├── about.html
├── contact.html
├── style.css
├── script.js
│
├── images
│   ├── logo.png
│   └── banner.jpg
│
└── assets

Keeping files organized improves maintenance.

Troubleshooting Common Issues

Website Not Opening

Possible reasons:

GitHub Pages not enabled
Deployment still processing
Wrong repository settings

CSS Not Loading

Incorrect file path.

Wrong:

<link rel="stylesheet" href="styles/style.css">

Correct:

<link rel="stylesheet" href="style.css">

(if CSS file is in root folder)

Images Not Displaying

Wrong image path.

Example:

<img src="images/logo.png">

Verify image folder structure.

404 Error

Possible reasons:

Missing index.html
Incorrect URL
Deployment incomplete

GitHub Pages Workflow

Create Website
       ↓
Create Repository
       ↓
Upload Files
       ↓
Enable GitHub Pages
       ↓
Deployment
       ↓
Public Website URL
       ↓
Website Available Online

Best Practices

Use Meaningful Repository Names

Good:

portfolio-website
college-project

Keep Files Organized

Use folders:

images/
css/
js/

Test Website Before Deployment

Check:

Links
Images
CSS
Responsive design

Commit Changes Regularly

This helps track project updates.

Maintain Backup

Store local copies of project files.

Real-World Uses of GitHub Pages

GitHub Pages is commonly used for:

Student projects
Portfolio websites
Online resumes
Documentation sites
Course projects
Event websites
Open-source project pages

Advantages vs Traditional Hosting

Feature	GitHub Pages	Traditional Hosting
Cost	Free	Paid
Setup	Easy	Moderate
Static Websites	Excellent	Excellent
Dynamic Websites	Not Supported	Supported
Maintenance	Low	Medium
Learning Purpose	Excellent	Good

Summary

GitHub Pages is a free hosting service provided by GitHub that allows users to publish static websites directly from GitHub repositories. By creating a repository, uploading website files, and enabling GitHub Pages, a website can be deployed within minutes. GitHub Pages is ideal for portfolios, student projects, documentation websites, and learning web development. It supports HTML, CSS, JavaScript, images, and custom domains, making it one of the easiest hosting platforms for beginners.