XQA
Back to Git & Dev Tools
2026-01-287 min read

pages.github.com (Git & Dev Tools)

Learn pages.github.com (Git & Dev Tools) step by step with clear examples and exercises.

Title: Mastering GitHub Pages - Hosting Websites for Developers and Projects

Why This Matters

GitHub Pages is an essential tool for developers, offering a seamless way to host websites directly from their GitHub repositories. By using GitHub Pages, you can edit your website, push the changes, and watch them go live in real-time. It's perfect for personal sites, project portfolios, or even small business websites.

Advantages of Using GitHub Pages:

  1. Version Control: Since GitHub Pages are based on Git, you can easily track changes, collaborate with others, and revert to previous versions if needed.
  2. Continuous Integration: Changes pushed to your repository are automatically reflected on the live site, eliminating the need for manual deployment processes.
  3. Free Hosting: GitHub Pages offers free hosting, making it an affordable solution for developers and small projects.
  4. Integration with Other Services: GitHub Pages can be easily integrated with other popular developer tools such as Jekyll, Travis CI, and more.

Prerequisites

Before diving into GitHub Pages, ensure you have:

  1. A GitHub account: Sign up here if you don't already have one.
  2. Familiarity with the command line (terminal on macOS or Linux, Command Prompt on Windows). If you're new to this, check out our tutorial on Command Line Basics.
  3. Git installed: Follow our guide on Installing and Configuring Git if you haven't set it up yet.
  4. (Optional but recommended) GitHub Desktop: This is a user-friendly application that simplifies the process of using Git and GitHub on macOS and Windows. Download it here.
  5. Basic understanding of HTML, CSS, and Markdown (for creating and editing your website content).

Core Concept

Creating a GitHub Pages Site

  1. Create a new public repository: Go to GitHub, click "New" > "Repository," name your repository username .github.io (replace username with your GitHub username), and set it as public. Make sure the first part of the repository exactly matches your username; otherwise, it won't work.
  1. Clone the repository: Navigate to the folder where you want to store your project and clone the new repository using the command line or GitHub Desktop.

Command Line:

git clone https://github.com/username/username .github.io

GitHub Desktop: Click "Set up in Desktop" and save the project when prompted. If the app doesn't open, launch it and clone the repository from the app.

  1. Create an index file: Navigate to your project folder (username .github.io) and create an index.html file using a text editor. Add some basic HTML code to get started.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My GitHub Pages Site</title>
</head>
<body>
<h1>Welcome to my GitHub Pages site!</h1>
</body>
</html>
  1. Commit and push your changes: Add, commit, and push your changes using the command line or GitHub Desktop.

Command Line:

cd username .github.io
git add .
git commit -m "Initial commit"
git push -u origin main
  1. View your site: Open a browser and go to https://username .github.io (replace username with your GitHub username). Your new site should now be live!

Using Themes

GitHub Pages offers pre-built themes that you can use for your site. To apply a theme, follow these steps:

  1. Go to the repository Settings on GitHub.com.
  2. Scroll down to the GitHub Pages section and choose a theme from the carousel at the top.
  3. Click "Select theme" on the right.

Customizing Your Site with Jekyll

Jekyll is a popular static site generator that can be used with GitHub Pages. To create a Jekyll-powered site, follow these steps:

  1. Create a new repository for your project and name it as desired (e.g., my-project). Make sure the repository is public.
  2. Initialize the repository as a Jekyll project by running the following command in the root directory of your local clone:
jekyll new .
  1. Commit and push the changes to your remote repository.
  2. Go to the Settings of the repository on GitHub.com, scroll down to the GitHub Pages section, and choose the branch you want to use for your site (usually main or master).
  3. Your Jekyll-powered site should now be live at https://username.github.io/my-project (replace username with your GitHub username and my-project with the name of your repository).

Worked Example

In this example, we'll create a simple GitHub Pages site using a pre-built theme and customize it with Jekyll.

  1. Create a new public repository named my-pages.
  2. Clone the repository:
git clone https://github.com/username/my-pages.git
  1. Navigate to the project folder and install the necessary dependencies:
cd my-pages
gem install bundler
bundle install
  1. Apply a theme by modifying the _config.yml file in the root directory of your local clone. Choose a theme from the available options, such as minimal or hyde.
  1. Create an index.html file in the _site folder to add custom content.
  1. Commit and push the changes:
git add .
git commit -m "Initial commit"
git push origin main
  1. View your site by opening a browser and going to https://username.github.io/my-pages (replace username with your GitHub username).
  1. To create a Jekyll-powered site, initialize the repository as a Jekyll project:
cd my-pages
jekyll new .
  1. Modify the _config.yml file to customize your site's settings (e.g., title, description, etc.).
  1. Add content to the index.md file in the _posts folder using Markdown syntax.
  1. Build and serve your Jekyll site locally:
bundle exec jekyll serve
  1. Open a browser and go to http://localhost:4000 to view your local Jekyll-powered site.

Common Mistakes

1. Incorrect Repository Name

Ensure your repository name matches the desired URL format (username .github.io). If you use a different naming convention, GitHub Pages won't work as expected.

2. Forgotten Commits or Pushes

Always remember to commit and push your changes before expecting them to appear on your live site.

3. Incorrect File Structure

Ensure that the index.html file is located in the root directory of your repository (username .github.io) for a static site or in the _site folder for a Jekyll-powered site. If it's placed elsewhere, GitHub Pages won't find it.

4. Misconfigured Themes

Make sure you've correctly configured your theme settings in the _config.yml file and that all required files are present in the appropriate directories.

Practice Questions

  1. Create a simple GitHub Pages site using a pre-built theme. How do you apply the theme to your site?
  2. You have created a new repository for your project but can't seem to access it via GitHub Pages. What could be the issue, and how would you troubleshoot it?
  3. Explain the importance of committing and pushing changes when using GitHub Pages.
  4. Describe the process of creating a Jekyll-powered site on GitHub Pages.
  5. How can you customize your GitHub Pages site with CSS, JavaScript, or other assets?

FAQ

1. Can I create multiple sites with one GitHub account or organization?

Yes, each GitHub account or organization can have one user or organization site and unlimited project sites.

2. How do I update my GitHub Pages site once it's live?

Simply make changes to your repository, commit them, and push the changes. Your updates will be reflected on the live site automatically.

3. Can I use custom domains with GitHub Pages?

Yes, you can set up a custom domain for your GitHub Pages site by following these steps: Custom Domains with GitHub Pages

4. How do I enable SSL for my GitHub Pages site?

By default, GitHub Pages provides free SSL certificates for all custom domains and user sites. If you're using a custom domain, make sure it's properly configured in your repository settings to ensure the SSL certificate is applied.

5. How can I add Google Analytics or other third-party services to my GitHub Pages site?

You can add third-party scripts by including them in your index.html file, using a custom theme that supports it, or by creating a separate JavaScript file and linking to it from your HTML file. Make sure to follow the specific instructions for each service you want to implement.

pages.github.com (Git & Dev Tools) | Git & Dev Tools | XQA Learn