How to Host Websites with GitHub Pages

If you want to host a website for free—without servers, domain costs, or complicated setup—GitHub Pages is one of the easiest ways to do it. Whether you’re a student, developer, blogger, or small business owner, you can publish a website in minutes.

In this guide, we’ll learn what GitHub Pages is, why it’s useful, and how to publish your website step-by-step.

---

🌐 What Is GitHub Pages?

GitHub Pages is a free hosting service from GitHub that lets us publish websites directly from our GitHub repositories.

We can use it to host:

• Personal portfolios
• Project websites
• Documentation sites
• Blogs
• Static HTML/CSS/JS websites

No backend or server required.

---

✨ Why Use GitHub Pages?

Here are the biggest reasons beginners love it:

• Free hosting forever
• No coding required beyond simple HTML
• Easy to update (just push changes to GitHub)
• Works with custom domains
• Supports static site generators like Jekyll

---

🚀 What You Need Before Starting

• A GitHub account (free)
• Basic knowledge of uploading files to a repository
• Your website files (like index.html)

---

⭐ Different Ways of Creating GitHub Pages Sites

GitHub Pages supports two website types in the same user account:

---

🔹 Option 1: Personal Website (Main Homepage)

This is your primary GitHub Pages website, available at:

https://your-username.github.io

Repository Naming Rule

The repository name must be exactly:

your-username.github.io

Example (using username heartin):

• GitHub Pages website: https://heartin.github.io
• Repo name: heartin.github.io

You can have only ONE personal site.

This is best for:

• Portfolio
• Resume
• Personal homepage

---

🔹 Option 2: Project Websites (Unlimited Extra Sites)

You can create unlimited project websites, one for each repository.

URL format:

https://your-username.github.io/repository-name

Repository Naming Rule

The repository name can be anything.

Examples (using username heartin):

Repo Name	URL
portfolio	https://heartin.github.io/portfolio
resume-site	https://heartin.github.io/resume-site
weather-app	https://heartin.github.io/weather-app

Best for:

• Experiments
• Assignments
• Demo apps
• Documentation projects

---

🧱 Common Steps for Creating GitHub Pages Sites (Option 1 or 2)

Regardless of which option you choose, the setup steps are mostly the same.

---

Step 1 — Create a Repository

Choose the correct repository name depending on your option:

✔️ For Personal Site (Option 1):

your-username.github.io

Example:
heartin.github.io

✔️ For Project Sites (Option 2):

any-repo-name

Examples:
portfolio, resume-site, weather-app

Then:

1. Go to GitHub
2. Click New Repository
3. Enter the repo name
4. Click Create Repository

---

Step 2 — Add Your Website Files

Files to upload:

• index.html (required)
• style.css (optional)
• script.js (optional)
• images, folders, assets

Example index.html

<!DOCTYPE html>
<html>
<head>
  <title>Welcome to My Website</title>
</head>
<body>
  <h1>Hello from GitHub Pages!</h1>
</body>
</html>

---

Step 3 — Enable GitHub Pages

1. Open the repository
2. Go to Settings
3. Scroll to Pages
4. Under Source, select:
   • Branch: main
   • Folder: / (root)
5. Click Save

GitHub generates your website URL automatically.

---

Step 4 — Visit Your Live Website

✔️ Personal Site (Option 1)

General:

https://your-username.github.io

Example:

https://heartin.github.io

---

✔️ Project Site (Option 2)

General:

https://your-username.github.io/repository-name

Examples:

https://heartin.github.io/portfolio
https://heartin.github.io/resume-site
https://heartin.github.io/weather-app

Your website is now live!

---

🌐 (Optional) Add a Custom Domain

You can connect any custom domain (e.g., www.heartinJK.com) to your GitHub Pages website.

---

Step 1 — Add Domain in GitHub

1. Go to Settings → Pages
2. Enter your custom domain URL
3. Save
4. GitHub will create a CNAME file automatically

---

Step 2 — Add DNS Records

At your domain provider, add:

CNAME Record

Type	Host	Points To
CNAME	www	your-username.github.io

Example
For username heartin:

Type	Host	Points To
CNAME	www	heartin.github.io

---

Step 3 — (Optional) Root Domain Redirect

To redirect:

heartinjk.com → www.heartinjk.com

Add these A records:

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

---

Step 4 — Enable HTTPS

When DNS completes:

1. Go to Settings → Pages
2. Enable Enforce HTTPS

Your custom domain is now working.

---

🧠 Quick Summary

Feature	Option 1: Personal Site	Option 2: Project Sites
Repo Name	your-username.github.io	Any name
Example Repo	heartin.github.io	portfolio, resume-site
URL	username.github.io	username.github.io/repo-name
Example URL	https://heartin.github.io	https://heartin.github.io/portfolio
Allowed	Only 1	Unlimited
Best Use	Portfolio / Resume	Demos / Projects

---

🧪 Testing and Updating Your Website

Whenever we want to make changes:

1. Edit the files
2. Commit and push to GitHub
3. Refresh our published website

Changes usually appear within seconds.

---

💡 Tips for Beginners

• Your website must have a file named index.html
• File names are case-sensitive
• Use the built-in GitHub Pages themes if you don’t want to write HTML
• Use README.md for simple documentation-style pages

---

🎁 Final Thoughts

GitHub Pages is one of the easiest and most beginner-friendly ways to publish a website. It’s free, simple, and powerful enough for portfolios, documentation, and even full static sites.

If you follow the steps above, you can publish your website within 5 minutes.