How to Publish a Website on GitHub (Using GitHub Pages)

GitHub Pages lets you host a static website (HTML, CSS, JavaScript) directly from a GitHub repository — for free. It’s a great way to share your projects, blogs, or portfolios with the world.

---

✅ Prerequisites

Before you begin, make sure you have:

• A GitHub account
• Git installed locally (optional but helpful)
• A folder/project with static website files (index.html, CSS, JS)

---

🚀 Method 1: Publish Using GitHub Web Interface

Step 1: Create a New GitHub Repository

1. Go to GitHub
2. Click New repository
3. Name it something like my-website
4. Choose Public (if you want it visible online)
5. Click Create repository

Step 2: Upload Your Website Files

1. On your new repo page, click “Add file” > “Upload files”
2. Upload your website files (index.html, CSS, images, etc.)
3. Scroll down and click “Commit changes”

---

Step 3: Enable GitHub Pages

1. Go to Settings tab of the repository
2. Scroll to “Pages” (in the left sidebar or near the bottom)
3. Under “Source”, choose:
   • Branch: main
   • Folder: / (root) or /docs, depending on where your index.html is
4. Click Save

✅ You’ll see a message like:

“Your site is published at https://yourusername.github.io/my-website/“

---

🧩 Method 2: Publish from Local Folder Using Git

If you prefer using Git on your computer:

Step 1: Initialize Git Locally and Push to GitHub

cd path/to/your-website-folder
git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/yourusername/my-website.git
git push -u origin main

Then follow Step 3 above to enable GitHub Pages in the repository settings.

---

🧪 Example Project Structure

my-website/
├── index.html
├── style.css
└── script.js

Make sure index.html is at the root or inside /docs if you select that as your Pages folder.

---

🧠 Tips for GitHub Pages

• Your site will auto-update when you push new commits to main
• For custom domains, use the “Custom domain” section in Pages settings
• You can also use Jekyll for simple blog sites (GitHub Pages supports it natively)

---

🔁 GitHub Pages Summary

Task	Action
Create a GitHub repo	Use GitHub or git init and push
Upload website files	Use GitHub UI or git add . → git commit
Enable GitHub Pages	Settings → Pages → Choose branch and folder
View your site	https://yourusername.github.io/repo-name/

---

🎉 Your Website Is Live!

You’ve just published a live website — no hosting or backend setup needed. GitHub Pages is a powerful and simple way to get your site online in minutes.