GitHow-ToBeginner · 4 min read

How to Use GitHub Pages: Step-by-Step Guide for Beginners

To use GitHub Pages, create a repository on GitHub, add your website files (like index.html), then enable GitHub Pages in the repository settings by selecting a branch to publish from. Your site will be live at https://username.github.io/repository-name within minutes.

📐

Syntax

GitHub Pages does not require command-line syntax but follows a simple setup pattern:

Create a repository: This holds your website files.
Add website files: Usually an index.html file as the homepage.
Enable GitHub Pages: In repository settings, choose the source branch (like main or gh-pages).
Access your site: Visit the URL GitHub provides.

bash

git clone https://github.com/username/repository-name.git
cd repository-name
# Add your website files here
# Commit and push changes
git add .
git commit -m "Add website files"
git push origin main

💻

Example

This example shows how to create a simple website and publish it using GitHub Pages.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My GitHub Page</title>
</head>
<body>
  <h1>Welcome to My GitHub Page!</h1>
  <p>This site is hosted with GitHub Pages.</p>
</body>
</html>

Output

<h1>Welcome to My GitHub Page!</h1> <p>This site is hosted with GitHub Pages.</p>

⚠️

Common Pitfalls

Not enabling GitHub Pages: You must enable it in settings after pushing files.
Wrong branch selected: GitHub Pages only publishes from the chosen branch (usually main or gh-pages).
Missing index.html: The homepage file must be named index.html in the root or docs folder.
Waiting time: It can take a few minutes for the site to appear after enabling.

bash

# Wrong way:
# No index.html file
# GitHub Pages will show 404 error

# Right way:
# Add index.html file
# Enable GitHub Pages from main branch
# Wait a few minutes for site to appear

📊

Quick Reference

Summary tips for using GitHub Pages:

Use a public repository for free hosting.
Name your homepage file index.html.
Enable GitHub Pages in repository settings under the Pages section.
Choose the branch and folder (root or /docs) to publish from.
Access your site at https://username.github.io/repository-name.

✅

Key Takeaways

Create a GitHub repository and add your website files including index.html.

Enable GitHub Pages in the repository settings and select the publishing branch.

Wait a few minutes after enabling for your site to become live.

Access your site at https://username.github.io/repository-name.

Ensure your repository is public for free GitHub Pages hosting.