- Published on
Adding new content to your hugo website hosted on gh-pages
- Authors
- Name
- interglobalmedia
- @letsbsocial1
Note 5.21.19: This website is no longer hosted on Github gh-pages, and no longer created with Hugo, but with another, and much better, in my opinion, static site generator. It's called Gatsbyjs (version 2). However, the information related to gh-pages is still pertinent to those who want to follow the steps and use or continue to use Hugo. Lastly, this site is now HTTPS and no longer HTTP.
As some of you might already know, I just recently switched interglobalmedianetwork.com from WordPress to the Hugo static website generator
. So I'm still fairly new to it. And some of you might already know what a stickler I am for good developer documentation.
So what does being a Hugo newbie have anything to do with developer docs? Plenty! And here I will focus specifically on publishing new content to your Hugo website hosted on the Github gh-pages
branch. Because I have been doing a lot of that lately, and I want it etched in stone!
I'm assuming you have already created your new Hugo site locally. Perhaps you have even pushed it to your remote master branch on Github (origin master
). But now you want to host the site via the (free) gh-pages
branch as opposed to paying oodles for hosting services which you might never need or use.
Navigate to Hosting on Github Pages to read the official Hugo documentation, but refer to this article for explicit clarification.
First off, I chose the deployment via gh-pages branch
route. The setup and functionality is analagous to the gulp-gh-pages
npm package setup and functionality. What I love about gulp-gh-pages
is that once I have the Gulp task set up, I can publish to gh-pages
from my master branch. I don't have to worry about committing changes before checking out to the gh-pages
branch so as not to add unwanted content to it from the master branch, or merging/rebasing branches to keep them in sync. It can get very messy. gulp-gh-pages
ensures that you keep branch histories separate. Deploying your Hugo site via the Hugo gh-pages branch
method ensures that you keep branch histories separate as well.
First make sure that you add your public
folder, the folder which is created when Hugo generates your site for publication, is added to your .gitignore
file. You can do this through Terminal with the command echo "public" >> .gitignore
. To double check that the command was successful, open up your .gitignore
file to make sure the public
directory was added. You are adding the public
directory to your .gitignore
file so that it's ignored on the master branch.
Next you want to initialize your gh-pages
branch as an empty orphan branch
. Why? You don't want to simply create a gh-pages
branch and then checkout out to it, because that would mean 1. an invalid gh-pages
directory structure and 2. unneeded files and directories in gh-pages
you would have to end up deleting anyway. In addition, creating an orphan branch
with the git checkout --orphan gh-pages
command means that the first commit made on this new branch will have no parents and will be the root
of a NEW
history totally DISCONNECTED
from all other branches and commits. And that's exactly what we want, right?
All the commands/steps necessary for successfully initializing the gh-pages
branch as an empty orphan branch
are the following:
git checkout --orphan gh-pages
git reset --hard
git commit --allow-empty -m "Initializing gh-pages branch"
git push origin gh-pages
git checkout master
git reset --hard
deletes any files that might have crept into the gh-pages
branch from master
.
git commit --allow-empty
permits you to initialize an empty branch. By default, you cannot.
git push origin gh-pages
pushes the local gh-pages
branch to the remote gh-pages
branch.
git checkout master
returns you to the master
branch.
Now you want to checkout your gh-pages
branch into your public
folder, because it is the contents of the public
folder which will populate gh-pages
and render the contents of your site there. You will do this using git's worktree
feature. Why? Because the worktree
feature allows you to checkout more than one branch at a time from your main working tree initialized by the command git init
or git clone
. Usually that means the master
branch. The worktree
feature, however, initializes a linked working tree
using the git worktree add
command. A repository has one main working tree
(if it is not a bare repository) and 0 or more linked working trees
. A linked working tree permits you to push content from your main working tree to the linked working tree, which is what is needed when deploying
your Hugo site to gh-pages
from your master
branch. The complete set of commands to check out the gh-pages
branch into your public
folder using git’s worktree feature
is:
rm -rf public
git worktree add -B gh-pages public origin/gh-pages
rm -rf public
removes the public
folder so you can add your linked gh-pages working tree
with a clean slate.
git worktree add -B gh-pages public origin/gh-pages
makes the gh-pages
branch (-B) a linked working tree
(git worktree add). public
recreates the public folder,
and origin/gh-pages
links it to the remote gh-pages
branch.
Since you now have an empty public
folder, you have to regenerate your Hugo site with the hugo
command in Terminal. The complete set of commands to regenerate your Hugo site and commit the generated files on the gh-pages
branch is the following:
hugo
cd public
git add --all
git commit -m "Publishing to gh-pages"
cd ..
The hugo
command regenerates your site by creating a new public folder with all necessary files and directories within it.
cd public
takes you into the public
directory.
git add --all
adds all the files and directories in public
to your staging area so that they are ready to be committed.
git commit -m "Publishing to gh-pages"
commits the files you added to the staging area with the git add --all
command.
cd ..
takes you back up one level into your root
directory.
Go into your public
folder via your text editor to make sure that your site was generated as expected. If you like what you see, you are ready to push your commit to the remote gh-pages
branch:
git push origin gh-pages
Now comes the part you all have been waiting for. You may be asking yourself,
But what do I do when I add new content, i.e., a new page or post, or ANY other changes to the site, and I want to push them to the remote branch without encountering MERGE CONFLICTS?
The complete set of commands for doing just that is the following:
echo "Deleting old publication"
rm -rf public
mkdir public
git worktree prune
rm -rf .git/worktrees/public/
The echo
command and ""
message string is if you want to output status text
in Terminal, letting you know at what stage of the set of comands you are on. I haven't done that yet, but I think I will start implementing the echo
command as well.
rm -rf public
should be pretty familiar by now! It removes your public
directory.
mkdir public
creates a new, empty public directory.
git worktree prune
allows you to prune, or remove a linked working tree.
This is so that you don't have any merge conflicts between your local gh-pages
branch and your remote gh-pages
branch.
rm -rf .git/worktrees/public/
removes the public gh-pages working tree
.
Next we repeat checking out the gh-pages
branch into the public
folder using the git worktree
feature:
echo "Checking out gh-pages branch into public"
git worktree add -B gh-pages public origin/gh-pages
echo "Removing existing files"
rm -rf public/*
echo "Generating site"
hugo
echo "Updating gh-pages branch"
cd public
git add --all
git commit -m "Publishing to gh-pages (publish.sh)"
git worktree add -B gh-pages public origin/gh-pages
repeats the checking out gh-pages branch into the public directory
using the git worktree feature
set of commands which you executed when you first initialized the gh-pages
branch.
Recap: this step allows you to have multiple branches of the same local repo to be checked out into different directories.
rm -rf public/*
removes absolutely everything from public
.
Again, you have to regenerate your site with the hugo
command. This recreates a new public directory with all updated production site files and directories.
cd public
takes you back into the public
directory.
git add --all
adds all public content to the staging area preparing for git commit
.
git commit -m "Publishing to gh-pages (publish.sh)"
commits your staged content.
Last, but not least (and not re-mentioned in the Hugo docs), is the git push origin gh-pages
command. Committing is not enough! Pushing to the remote gh-pages
branch is what completes the site update
for the world to see.
And that's it! Happy publishing!