Step-by-Step Guide to Creating a Gh-Pages Branch for Your GitHub Repository

by liuqiyue

How to Create a gh-pages Branch: A Step-by-Step Guide

Creating a gh-pages branch is a crucial step in GitHub’s workflow for hosting static websites. This branch allows you to keep your main codebase separate from your deployed website, ensuring that your development work remains clean and uncluttered. In this article, we will walk you through the process of creating a gh-pages branch, step by step, so you can easily set up and manage your static website on GitHub.

Step 1: Clone Your Repository

Before you can create a gh-pages branch, you need to have your GitHub repository cloned to your local machine. Open your terminal or command prompt, navigate to the directory where you want to clone your repository, and use the following command:

“`bash
git clone
“`

Replace `` with the URL of your GitHub repository. Once the repository is cloned, you will have a local copy of your code on your machine.

Step 2: Navigate to Your Repository

Change to the directory of your cloned repository using the following command:

“`bash
cd
“`

Replace `` with the name of your GitHub repository.

Step 3: Create a New Branch

To create a new gh-pages branch, run the following command in your terminal or command prompt:

“`bash
git checkout –orphan gh-pages
“`

This command creates a new branch called `gh-pages` and switches to it. The `–orphan` flag ensures that the new branch is a fresh copy of your repository, without any commits from your main branch.

Step 4: Set Up Your Static Website

Now that you have a new, empty gh-pages branch, you can set up your static website. This may involve creating HTML, CSS, and JavaScript files, or copying your existing website into the repository. Ensure that your website is structured correctly and that all necessary files are present.

Step 5: Add and Commit Your Files

After setting up your static website, add your files to the repository using the following commands:

“`bash
git add .
“`

This command adds all files in your current directory to the staging area. Once your files are added, commit them to the gh-pages branch:

“`bash
git commit -m “Initial commit of static website”
“`

Replace the message `”Initial commit of static website”` with a more descriptive message that reflects the contents of your commit.

Step 6: Push the gh-pages Branch to GitHub

To make your static website available on GitHub, push the gh-pages branch to your GitHub repository:

“`bash
git push origin gh-pages
“`

This command pushes the gh-pages branch to the remote GitHub repository, making your static website accessible at `/gh-pages`.

Step 7: Configure Your Repository to Use the gh-pages Branch

Finally, to ensure that your static website is deployed automatically when you push new commits to the gh-pages branch, you need to configure your GitHub repository settings. Go to your GitHub repository’s settings page, find the “Branches” section, and click on “gh-pages.” Enable the “Automatically deploy GitHub Pages” option, and choose the branch that contains your static website (usually `gh-pages`).

Now you have successfully created a gh-pages branch and set up your static website on GitHub. By following these steps, you can easily manage and deploy your static websites while keeping your main codebase clean and organized.

You may also like