Deploying a Website with GitHub Pages

What Is GitHub Pages?

A free service that publishes files from a GitHub repository as a website.

Free: No cost for public repositories
Auto-deploy: Changes go live within minutes of a commit
Custom domains: You can connect your own domain

Commonly used for portfolios, project documentation, and personal blogs.

Creating a Personal Profile Page

Create a repository named username.github.io, and it becomes a personal page accessible at https://username.github.io.

Create a new repository
- Repository name: yourusername.github.io (e.g., daleschool.github.io)
- Select Public
- Check Add a README file
Click Create repository

Adding index.html

Add an index.html file to the repository.

Add file → Create new file
File name: index.html
Write the content:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My GitHub Page</title>
    <style>
      body {
        font-family: sans-serif;
        max-width: 600px;
        margin: 50px auto;
        padding: 0 20px;
      }
    </style>
  </head>
  <body>
    <h1>Hello!</h1>
    <p>This is my first web page built with GitHub.</p>
    <ul>
      <li>Name: John Doe</li>
      <li>Interests: coding, reading</li>
      <li>GitHub: <a href="https://github.com/yourusername">@yourusername</a></li>
    </ul>
  </body>
</html>

Commit message: feat: add personal page
Click Commit new file

Enabling GitHub Pages

Go to the repository Settings → click Pages in the left menu:

Source: Deploy from a branch
Branch: select main / / (root)
Click Save

After a few minutes, your website will be live at https://yourusername.github.io.

The first deploy takes about 1-3 minutes. It is ready once the deploy URL appears on the Pages settings page.

Creating a Project Page

Beyond your personal page (username.github.io), you can also publish any existing repository as a web page.

If you enable Pages on my-first-repo:

URL: https://username.github.io/my-first-repo

Go to the repository Settings → Pages → configure the Branch.

Note that the repository needs an index.html for a main page. Without one, README.md is displayed by default.

Updating the Website

Edit a file and commit — it deploys automatically.

Click index.html → pencil icon
Make changes (e.g., update the intro text)
Commit message: docs: update intro text
After committing, refresh the website in 1-2 minutes

You can track the deploy progress in real time under the repository's Actions tab.

"Why?" — You Can Have a Website Without Writing Code

Even non-developers can use GitHub Pages for:

Portfolios: Project listings, resumes
Project docs: Usage guides, API documentation
Team wikis: Onboarding docs, guides
Personal blogs: Integrate with static site generators like Jekyll or Hugo

GitHub Pages + Markdown lets you create professional websites without coding.

Deep Dive

Connecting a Custom Domain

If you want to use example.com instead of username.github.io:

Purchase a domain (Namecheap, Google Domains, etc.)
Set up an A record in your domain's DNS settings pointing to the GitHub Pages IP
Go to the repository Settings → Pages → enter your Custom domain
Check the enforce HTTPS option

See your domain provider's docs and the GitHub Pages official documentation for details.

Building a Blog with Jekyll

GitHub Pages natively supports Jekyll, a static site generator.

Write blog posts as Markdown files in your repository, and Jekyll automatically converts them into a blog format. You can run a blog without coding.

Go to Settings → Pages → Theme Chooser to select a pre-built theme.

Create a yourusername.github.io repository.
Add an index.html file with a simple self-introduction page.
Enable GitHub Pages and verify it at the actual URL.
Edit the content, commit, and confirm the website updates automatically.

Q1. If you create a repository named username.github.io, what URL can you access it at?

A) https://github.com/username
B) https://username.github.io
C) https://pages.github.com/username
D) https://github.io/username