How to Host Website on GitHub- Beginner's Guide

What You Need Before You Start

GitHub Pages is free. That's the main reason people use it. No hosting costs, no complex server setup, just static files served directly from a GitHub repository.

Here's what you actually need:

A GitHub account (free tier works fine)
Some basic Git knowledge or willingness to learn
A static website (HTML, CSS, JS files)
10 minutes of your time

That's it. You don't need to know command line wizardry. You can do most of this through GitHub's web interface.

Two Ways to Host on GitHub Pages

Method 1: User/Organization Site

This creates a site at username.github.io. You get one per account.

Steps:

Create a new repository named username.github.io (replace "username" with your actual GitHub username)
Make it public
Add your HTML files
Your site goes live automatically

Method 2: Project Site

This creates a site at username.github.io/repository-name. You can have unlimited project sites.

More flexible for most people. Works great for documentation, portfolios, or landing pages for specific projects.

Step-by-Step: Creating a Project Site

Let's walk through the project site method since it's more versatile.

Step 1: Create the Repository

Go to GitHub and click New repository. Name it something relevant to your project. Keep it public. Initialize with a README (optional but recommended).

Step 2: Add Your Files

You need an index.html file at minimum. This becomes your homepage.

Click Add file → Create new file. Name it index.html and add some basic HTML:

<!DOCTYPE html>
<html>
<head>
    <title>My Site</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is my GitHub Pages site.</p>
</body>
</html>

Click Commit new file at the bottom.

Step 3: Enable GitHub Pages

Go to your repository's Settings tab. Scroll down to Pages.

Under Source, select:

Branch: main
Folder: / (root)

Click Save.

Step 4: Wait and Verify

Give it 2-3 minutes. GitHub builds and deploys your site. Check the Pages section in Settings—you'll see your live URL there.

Your site will be live at username.github.io/repository-name.

Adding CSS and More Pages

GitHub Pages serves any static files you include. Structure your repository like a normal website:

/
├── index.html
├── about.html
├── contact.html
├── css/
│   └── style.css
└── js/
    └── script.js

Link to them normally in your HTML. GitHub handles the rest.

Using a Custom Domain

You can use your own domain instead of the github.io subdomain.

In your repository Settings → Pages:

Enter your custom domain under Custom domain
Check Enforce HTTPS (GitHub provides free SSL)
Add the required DNS records at your domain registrar

For apex domains (domain.com), add an A record pointing to GitHub's IP addresses. For subdomains (www.domain.com), use a CNAME record pointing to username.github.io.

DNS changes can take up to 24-48 hours to propagate.

GitHub Pages vs Alternatives

Here's how it stacks up against other free hosting options:

Feature	GitHub Pages	Netlify	Vercel
Free tier	Yes	Yes	Yes
Custom domain	Yes	Yes	Yes
Free SSL	Yes (auto)	Yes (auto)	Yes (auto)
Server-side code	No	No	Limited
Build commands	Jekyll only	Any	Any
Private repos	No (paid)	No (paid)	Limited

GitHub Pages works best for pure static sites. No backend processing, no server-side languages. Just HTML, CSS, JavaScript, and assets.

Common Problems and Fixes

Site not loading?
Check the Pages settings. Make sure your branch and folder are correct. Verify your index.html is in the right location.

404 errors on subpages?
GitHub Pages serves static files. If you have clean URLs like /about instead of about.html, you need to either add .html extensions or use a workaround.

CSS not loading?
Check your file paths. Paths are case-sensitive on GitHub. style.css and Style.css are different files.

Build failing with Jekyll?
GitHub Pages auto-builds with Jekyll by default. Add a .nojekyll file to skip Jekyll processing if you don't want it.

Best Practices

Always commit to main branch only when ready—each push triggers a rebuild
Use a CNAME file if you're using a custom domain (keeps the setting after rebuilding)
Keep your repository public if you want free hosting
Use meaningful commit messages—you're not graded on creativity here

When GitHub Pages Is the Wrong Choice

Don't use it if you need:

Server-side processing (PHP, Python, Node.js backends)
Database connections
Authentication backends
Real-time features
Private repository hosting on free plan

For those cases, look at Vercel, Netlify, or traditional hosting with a provider that supports your stack.

Wrapping Up

GitHub Pages is straightforward. Create repo, add files, enable Pages, wait. That's the whole process. It handles HTTPS automatically, serves your files fast, and costs nothing.

For static sites, portfolios, project documentation, or learning web development—it's one of the best free options available. No catches, no hidden fees, just hosting.