Step-by-Step Guide to Setting Up GitHub Pages

by

Setting up a website using GitHub Pages is one of the easiest ways to publish a static website online. It requires no server configuration, no hosting fees, and no complex setup. In this guide, you will learn step by step how to create, publish, and customize your first GitHub Pages website.

Creating a Repository

The first step in setting up GitHub Pages is creating a repository.

A repository is a cloud-based project folder that stores all your website files, including HTML, CSS, and JavaScript.

Steps:

  1. Log in to your GitHub account
  2. Click New Repository
  3. Name your repository:
username.github.io

This name is important because it automatically becomes your main website address.

  1. Choose Public repository
  2. (Optional) Add a README file

Add Your Website Files

At minimum, your site needs one file:

index.htmlWhat is this?

Example:

<!DOCTYPE html>
<html>
<head>
  <title>My First Website</title>
</head>
<body>
  <h1>Hello GitHub Pages 🚀</h1>
</body>
</html>What is this?

Activating GitHub Pages

After creating your repository and adding files:

  1. Go to the Settings tab
  2. Scroll to Pages section
  3. Under “Source”, select:
    • Branch: main
    • Folder: /root or /docs
  4. Click Save

👉 GitHub will automatically start building your site.

Publishing Your First Website

Once GitHub finishes processing your files, it will provide you with a live URL:

https://username.github.io

Open the link in your browser, and your website will be live.

Automatic Updates

One of the most powerful features of GitHub Pages is automatic deployment.

Every time you:

  • Edit a file
  • Commit changes
  • Push updates

GitHub automatically rebuilds and updates your website.

This creates a seamless workflow where your live site always matches your repository.

Customizing Your GitHub Pages Website

After publishing your site, you can start customizing it.

Using Themes

GitHub Pages supports built-in themes, and when combined with Jekyll, you can easily change your website design.

You can:

  • Apply ready-made templates
  • Change layouts
  • Build blogs and documentation sites

Adding CSS and JavaScript

To make your website more attractive and interactive, you can add CSS and JavaScript.

CSS Example:

<link rel="stylesheet" href="style.css">What is this?

JavaScript Example:

<script src="script.js"></script>What is this?

What You Can Do:

  • Change colors and fonts
  • Add animations
  • Create interactive buttons
  • Build responsive layouts

How GitHub Pages Works Behind the Scenes

When you publish your site:

  • GitHub reads your repository
  • Builds your static files
  • Deploys them to a global CDN

This ensures:

  • Fast loading speed ⚡
  • High availability 🌍
  • Secure hosting 🔒

Conclusion

GitHub Pages makes website publishing extremely simple.

With just a few steps, you can:

  • Create a repository
  • Add an HTML file
  • Activate Pages
  • Publish your site online

👉 In minutes, your project becomes a live website accessible to anyone in the world.

FAQs

❓ Do I need hosting for GitHub Pages?

No, it is completely free hosting.

❓ Can I use my own domain?

Yes, you can connect a custom domain easily.

❓ Is coding required?

Basic HTML is enough to start.

Leave a Comment