DEV Community

masoomjethwa
masoomjethwa

Posted on

How to Create and Publish Your Own Web Page Using GitHub Pages

#webdev #html #gihub #beginners

Lets Learn:

  • 🧠 What GitHub Pages is
  • 🛠️ How to host a self-made HTML page
  • 🌐 Creating a simple index.html (homepage)
  • ⭐ Adding a custom favicon
  • 🚀 Going live with GitHub Pages

Want to create your own personal website or project page without paying for hosting?
GitHub Pages lets you host static websites (HTML/CSS/JS) for free — and it’s easier than you think.

In this post, you’ll learn how to:

✅ Set up GitHub Pages
✅ Create your first index.html homepage
✅ Add a custom favicon
✅ Publish your site at https://yourusername.github.io/

Let’s go!

📁 Step 1: Create a GitHub Repository

  1. Go to https://github.com/new
  2. Set your repository name as: 
yourusername.github.io
Enter fullscreen mode Exit fullscreen mode

👉 Replace yourusername with your actual GitHub username (must match exactly).

  1. Choose Public
  2. Leave everything else blank (don’t add README, .gitignore, etc.)
  3. Click Create repository

🛠 Step 2: Add Your First Web Page (index.html)

You can do this by uploading files directly via GitHub’s interface:

  1. Click “Add file” → “Upload files”
  2. Create a new file called index.html
  3. Paste the following code: 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Welcome!</title>
  <link rel="icon" href="favicon.ico" />
</head>
<body>
  <h1>Hello, world!</h1>
  <p>This is my first self-hosted page using GitHub Pages.</p>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode
  1. Scroll down and click “Commit changes”

🌟 Step 3: Add a Favicon (optional but cool)

A favicon is the small icon you see in browser tabs.

  1. Create or download a favicon.ico (you can use favicon.io)
  2. Upload it to the same repository
  3. Make sure this line is in your <head>: 
<link rel="icon" href="favicon.ico" />
Enter fullscreen mode Exit fullscreen mode

Done! Your site now has a personal touch.

🌐 Step 4: Go Live with GitHub Pages

Now the magic part.

  1. Go to the Settings tab of your repository
  2. Scroll down to "Pages" in the sidebar (or search for it)
  3. Under "Deploy from a branch", choose:
  • Source: main or master
  • Folder: / (root)
    1. Click Save

Within 30–60 seconds, your website will be live at:

https://yourusername.github.io/
Enter fullscreen mode Exit fullscreen mode

🎉 Congrats, you’re live!

🧠 Tips

  • Your homepage should always be named index.html
  • You can create more pages (e.g. about.html, projects.html) and link them
  • For a more professional look, add CSS styles or use a static site generator (like Jekyll or Hugo)

💬 Final Thoughts

GitHub Pages is perfect for:

  • Personal portfolios
  • Documentation sites
  • Project demos
  • Student assignments
  • Web experiments

And the best part? It’s free and super lightweight.

Have you published your own page yet? Drop a link in the comments — I’d love to see it! 👇

📌 Follow me for more web dev tips, GitHub tricks, and DIY web projects!

Top comments (0)