Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Setup GitHub Pages "gh-pages" branch and "master" branch as subfolders of a parent project folder ("grandmaster").

Intro

Description: Setup GitHub Pages "gh-pages" branch and "master" branch as subfolders of a parent project folder ("grandmaster").

Author: Chris Jacob @_chrisjacob

Tutorial (Gist): https://gist.github.com/833223

The Result

The final folder structure on my local system is:

/grandmaster
/grandmaster/master
/grandmaster/master/.git # checkout of "master" branch
/grandmaster/master/README.markdown
/grandmaster/gh-pages
/grandmaster/gh-pages/.git # checkout of "gh-pages" branch (removed "master" branch)
/grandmaster/gh-pages/index.html
/grandmaster/gh-pages/README.textile

See "master" branch: https://github.com/chrisjacob/grandmaster

See "gh-pages" branch: https://github.com/chrisjacob/grandmaster/tree/gh-pages

See GitHub Page (auto generated): http://chrisjacob.github.com/grandmaster/

The Process

A note for GitHub novices - replace "chrisjacob" with your own GitHub username.

A note for Terminal novices - you don't need to enter the "ichris:Sites $ " parts of the code listed below. ^_^

Visit GitHub and create a new repository with the project name "grandmaster".
https://github.com/repositories/new

Don't follow GitHub's Next steps instructions! Follow the steps below to setup your projects folders on your local system.

Open Terminal.app, create project parent folder "grandmaster", and a subfolder for the "master" branch. Initialise a new git repository for the project and push the "master" branch to GitHub.

ichris:Sites $ mkdir grandmaster
ichris:Sites $ cd grandmaster/
ichris:grandmaster $ mkdir master
ichris:grandmaster $ cd master/
ichris:master $ git init
ichris:master $ echo "# Master README file" > README.markdown
ichris:master $ git add .
ichris:master $ git commit -m "Master README added"
ichris:master $ git remote add origin git@github.com:chrisjacob/grandmaster.git
ichris:master $ git push origin master

Refresh your projects "master" branch page on GitHub to see the committed files.
https://github.com/chrisjacob/grandmaster

Auto generate a GitHub Pages branch, with some default content.
https://github.com/chrisjacob/grandmaster/pages/create

Or follow these steps to get to the generator page:

  1. Go to the projects Admin page on GitHub https://github.com/chrisjacob/grandmaster/admin

  2. Check the "GitHub Pages" checkbox

  3. A popup will ask you to "Activate GitHub Pages" - click the big "Automatic GitHub Page Generator" button

Check that your GitHub Pages page has been built and is available.
http://chrisjacob.github.com/grandmaster/

Back in Terminal.app, change directory back to the parent folder, setup a "gh-pages" subfolder for your "gh-pages" branch and change directory into it.

ichris:master $ cd ../
ichris:grandmaster $ mkdir gh-pages
ichris:grandmaster $ cd gh-pages/

Clone your "grandmaster" repository into the "gh-pages" folder (this will clone in the "master" branch), checkout the "gh-pages" branch, list the files (should have "index.html" and ".git") and then remove the "master" branch to avoid any confusion. Last step is to check that "master" branch was removed and only "gh-pages" branch is listed.

ichris:gh-pages $ git clone git@github.com:chrisjacob/grandmaster.git .
ichris:gh-pages $ git checkout origin/gh-pages -b gh-pages
ichris:gh-pages $ ls -la
ichris:gh-pages $ git branch -d master
ichris:gh-pages $ git branch

You will probably get a warning when deleting the "master" branch... don't worry about it ^_^

Lets add a "README.textile" file to the "gh-pages" branch

ichris:gh-pages $ echo "h1. GitHub Pages README file" > README.textile
ichris:gh-pages $ git add .
ichris:gh-pages $ git commit -m "Child README added"

Now push to the "gh-pages" branch

ichris:gh-pages $ git push origin gh-pages

Visit your projects "gh-pages" branch page on GitHub to see the committed files.
https://github.com/chrisjacob/grandmaster/tree/gh-pages

If everything has gone well you now have a parent project folder named "grandmaster", with subfolders for its two branches "master" and "gh-pages"; each containing a checkout of their respective branch.

For me this system keeps things nice and tidy without needing to do git checkout gh-pages each time I want to view my "gh-pages" branch.

Might also be a useful structure for output from static site generators like Jekyll, Webby, or nanoc.

Enjoy ^_^

@dlzi
Copy link

dlzi commented Jun 10, 2013

Hey, very nice tutorial.

Since i'm new to GitHub, I was using their tutorial https://help.github.com/articles/fork-a-repo to create a fork. However, I prefer your approach since I like to keep things organised. But I'm not sure if I got it right. At Github article they show us how to keep your fork updated with the original one, doing this:

cd Spoon-Knife
# Changes the active directory in the prompt to the newly cloned "Spoon-Knife" directory
git remote add upstream https://github.com/octocat/Spoon-Knife.git
# Assigns the original repository to a remote called "upstream"
git fetch upstream
# Pulls in changes not present in your local repository, without modifying your files

But that is only for the 'master' branch, right? Using your approach, how can I have both master and gh-pages in sync with the original repo?

Thanks.

@sheabunge
Copy link

sheabunge commented Jul 26, 2013

So basically all you're doing is creating two separate working copies on different branches? In no way are the working copies linked, aside from having the same remote?

@dideler
Copy link

dideler commented Sep 13, 2013

I stumbled on this and at first had no idea why you would want to do this, then you mentioned it being useful for output from static site generators. With this I can probably use a single repo instead of two repos (one for the documentation's source which uses Sphinx, the other for gh-pages). Thanks!

BTW, the webpage 404s: http://chrisjacob.github.com/grandmaster/

@dideler
Copy link

dideler commented Sep 13, 2013

Has anyone tried to replicate this with git submodules?

@krlmlr
Copy link

krlmlr commented Dec 4, 2013

@krlmlr
Copy link

krlmlr commented Dec 4, 2013

I have written a small script that assists in synchronizing a subdirectory with the gh-pages branch. It's in my scriptlets repo. Use ghpsd init for creating an empty gh-pages subdirectory that will hold the contents of your gh-pages branch. After adding to this subdirectory, use ghpsd merge for updating the gh-pages branch. Note that you still have to push to GitHub.

It works by cloning a copy of the repo into a shadow subdirectory named .gh-pages (which is added to .gitignore, too); this makes updating the gh-pages branch work seamless. Call ghpsd checkout to recreate the hidden .gh-pages folder, this clones locally and does not require network access.

@bryanjhv
Copy link

bryanjhv commented May 28, 2014

Hi! Very nice tutorial. I have a question: how can I create the two repositories via Github web interface and then do what your tutorial says (I don't want to use automatic page generator)?
Thanks in advance!

@jobinson99
Copy link

jobinson99 commented Jul 22, 2014

use symbolic link for _site to gh-pages, and when you build the site ,it will auto-update the gh-pages.

alias blog0='~/.gem/ruby/2.1.0/bin/jekyll build'
alias blog99='git add . && git commit -a -m "update site" && git push'
alias blog.username='blog0 && cd .. && cd gh-pages && blog99 && cd .. && cd master'

@rafaelespericueta
Copy link

rafaelespericueta commented Aug 21, 2014

I'm very new at this, and your instructions didn't at first work for me. When I tried to push, I got an error message: Permission denied (publickey). A web search led to me setting up the necessary keys for the SSH stuff to be in place. And then your instructions worked until this line:

ichris:gh-pages $ git checkout origin/gh-pages -b gh-pages

When I tried that, I got an error message:

 fatal: not a git repository (or any of the parent directories): .git

Any ideas what I may have missed??

@Keav
Copy link

Keav commented Sep 16, 2014

@rafaelespericueta I had the same issues!

Instead of running git remote add origin git@github.com:username/grandmaster.git I had to run git remote set-url origin git@github.com:username/grandmaster.git.

When trying to checkout gh-pages, I found that in the previous step to clone the repo, it had cloned the whole repo under gh-pages - creating the folder structure:

/grandmaster/gh-pages/grandmaster/

Manually moving all the files and folders (including the .git folder) up the tree one level (into gh-pages) and deleting the now empty extraneous "grandmaster" folder got everything back on track.

@Keav
Copy link

Keav commented Sep 16, 2014

Further to my post above - at the clone step, use:

git clone -b gh-pages --single-branch git@github.com:username/grandmaster.git .

Note the "." at the end!

This will clone only the gh-pages branch (no need to do the delete master branch step) and also place it correctly without creating a further project folder.

@koppor
Copy link

koppor commented Nov 23, 2015

With git 2.5, you don't need two clones. Just use git worktree add -b gh-pages ../gh-pages origin/gh-pages as described at https://github.com/blog/2042-git-2-5-including-multiple-worktrees-and-triangular-workflows.

@hafizhmakmur
Copy link

hafizhmakmur commented May 14, 2016

how to make an existing project to become just like in this format? I have an existing project in github and would like to have a local storage formatted like this but this guide seems to help build the format from zero. What steps should I do to make it?

@hafizhmakmur
Copy link

hafizhmakmur commented May 14, 2016

how to make something like this for an existing repository?

@hendrawd
Copy link

hendrawd commented Jun 14, 2016

i got this error

fatal: Cannot update paths and switch to branch 'gh-pages' at the same time.
Did you intend to checkout 'version-control/grandmaster/gh-pages/origin/gh-pages' which can not be resolved as commit?

when try to
git checkout origin/gh-pages -b gh-pages

@hendrawd
Copy link

hendrawd commented Jun 14, 2016

hmm, well i somehow able to achieve the same result with different commands

@jgusta
Copy link

jgusta commented Jun 16, 2016

The essence of this gist answers the question "how do I alter two branches without having to checkout constantly between them?"

For an existing repo you can actually skip most of the instructions in this gist since most of them are a sort of complicated way of creating the repo as you go.

So if you already have a repo on github, follow these instructions to create the branch locally and push it back to github: https://help.github.com/articles/creating-project-pages-manually/

Once you have the branch made, clone the repo locally into a sibling folder with a different name. In this sibling folder checkout the gh-pages repo, then delete the master branch. This way you can push to master from one folder and push to gh-pages from the other but you can see the files side by side.

@codazoda
Copy link

codazoda commented Jun 27, 2016

I really like this approach. Thanks for the tip.

@morgendorffer
Copy link

morgendorffer commented Jul 23, 2016

Thanks for the post. It works for my pages

@theskillwithin
Copy link

theskillwithin commented Oct 2, 2016

git push --force origin $(git commit-tree -m "auto" master:dist):gh-pages
tree="$(cp .git/index{,-bk} && git add -f dist && git write-tree --prefix=dist && mv .git/index{-bk,})"

git push -f origin "$(git commit-tree -m auto "$tree")":gh-pages
tree="$(export GIT_INDEX_FILE="$(mktemp)"; cat .git/index >"$GIT_INDEX_FILE"; git add -f dist && git write-tree --prefix=dist)"
    after that, imo you should do something like 
    git update-ref refs/heads/gh-pages "$(git commit-tree -p gh-pages -m auto "$tree")"

still trying to figure it out with a build folder that is in gitignore but would be root level on gh-pages deploy

@ooade
Copy link

ooade commented Mar 11, 2017

I think you can cut some few steps off. If you don't clone the repo, you won't have the master branch hanging around the gh-pages. Nice tho 👍

@dreyks
Copy link

dreyks commented Apr 27, 2017

also you can use git worktree
for an existing project inside your workdir

$ git worktree add ../gh-pages gh-pages

@AndrejGajdos
Copy link

AndrejGajdos commented Jul 25, 2017

@hendrawd I got the same error message. How did you solve it?

@glfmn
Copy link

glfmn commented Jan 26, 2018

You could easily use a hook to synchronize pushing, if anyone is still wondering how to approach that

@equero
Copy link

equero commented Feb 2, 2018

This example is dead

@interglobalmedia
Copy link

interglobalmedia commented May 8, 2018

It sure is dead. It should be removed.

@Convincible
Copy link

Convincible commented Jan 10, 2019

Why is it dead?

@ranolfi
Copy link

ranolfi commented Dec 2, 2019

A post-commit hook is a much clearer approach. Refer to https://githooks.com/.

@Vadorequest
Copy link

Vadorequest commented Mar 28, 2020

Example is dead because Github made things much easier I believe. Example if from 2013...

@AlexByte
Copy link

AlexByte commented Nov 26, 2021

Once the branch is pushed to GitHub, you have to go to the Settings page of the repository. In the section “GitHub Pages”, select gh-pages as the source. The step is described in more details here. If successful, you will see a message saying “Your site is published at https://your-username.github.io/your-repository/”.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment