How to Host Your First Website on GitHub Pages: A Complete Beginner's Guide
webarv
•3 min read

How to Host Your First Website on GitHub Pages: A Complete Beginner's Guide

Learn how to host your first website completely free using GitHub Pages. This step-by-step guide walks you through creating a GitHub account, uploading your website files, and making your site live on the internet - all without any prior experience needed. Perfect for beginners who want to get their HTML, CSS, and JavaScript website online quickly and easily.

Transform your local website into a live one using GitHub Pages - completely free! This guide takes you from zero Git knowledge to having your first website online.

Table of Contents

  1. What is GitHub?
  2. Creating a GitHub Account
  3. Creating Your First Repository
  4. Uploading Your Website Files
  5. Enabling GitHub Pages
  6. Conclusion

What is GitHub?

GitHub is like a cloud storage service specifically designed for code. Think of it as Google Drive for developers, but with superpowers! 🦸‍♂️

Fun Fact: GitHub hosts over 200 million repositories and is used by more than 73 million developers worldwide!

It's a platform where you can:

  • Store your code securely in the cloud
  • Share your work with others
  • Host websites for free using GitHub Pages
  • Track changes to your code over time

The best part? You don't need to be a professional developer to use it!

Creating a GitHub Account

Let's get you started with your very own GitHub account! 🚀

Step-by-Step Guide:

  1. Visit github.com
  2. Click the "Sign Up" button in the top-right corner
  3. Enter your email address
  4. Create a strong password
  5. Choose a username - this will be part of your website's URL
  6. Verify your account through the email you'll receive
  7. Optional: Add a profile picture and bio

Pro Tip: Choose your username wisely - your website's URL will be username.github.io

Creating Your First Repository

A repository (or "repo") is like a project folder that will contain all your website files.

Creating Your Repository:

  1. Click the "+" icon in the top-right corner of GitHub
  2. Select "New repository"
  3. Name: username.github.io
  4. Visibility: Public
  5. Initialize with: README file
  6. Click "Create repository"

Important: The repository name must exactly match your GitHub username followed by .github.io

Uploading Your Website Files

Now comes the exciting part - uploading your website! 🎨

Required Files:

  • index.html - Your main webpage
	<!DOCTYPE html>
	<html>
		<body>
			<h1>My Website</h1>
			<p>My  paragraph.</p>
		</body>
	</html>
  • style.css - Your styling file (optional)
  • script.js - Your JavaScript file (optional)
  • Any images or other assets

Upload Steps:

  1. Inside your repository, click "Add file" → "Upload files"
  2. Drag and drop your files into the upload area
  3. Scroll down to "Commit changes"
  4. Add a message: "Initial website files upload"
  5. Click "Commit changes"

Remember: Your main HTML file must be named index.html

Enabling GitHub Pages

Time to make your website live! 🌐

Activation Steps:

  1. Go to repository Settings
  2. Find "Pages" in left sidebar
  3. Under "Source":
    • Select "Deploy from a branch"
    • Choose "main" branch
    • Set root folder: "/(root)"
  4. Click "Save"

Note: It might take up to 10 minutes for your site to appear. Be patient!

Conclusion

🎉 Congratulations! Your website is now live at https://username.github.io

What's Next?

Quick Tip: Bookmark your repository URL for easy access to update your site in the future!

Stay Updated!

Happy coding, and don't forget to hit the follow button for more beginner-friendly tutorials and web development guides! 🚀