Using unsupported Jekyll plugins with GitHub Pages
This site runs on GitHub Pages. In redesigning it to use its fancy TI-99/4A theme, I made use of the jekyll-menus plugin. Unfortunately, GitHub Pages (GHP) doesn’t support that plugin, so I needed a work-around.
Conceptually what we’re doing is quite simple: we’re just going to configure
GitHub Pages to treat our site as a static site and set up our GHP site to point
to Jekyll’s output directory, _site
. We’ll track our changes to our Jekyll
source files in a brand new repository, and just use the GHP repository for the
compiled output to be served to the world.
In what follows, the repository fsf.io
is a new repository that will now
contain Jekyll source files. ffleming.github.io
is the old repository, and
will now contain only the static output produced when we run jekyll build
in
the root of the fsf.io
repository.
It’s worth noting that the below is a reconstruction of what I did to set up
this site with jekyll-menus
. It’s possible that it has a typo or something
that’ll accidentally ruin your day, so take that into account before pasting
things into your command prompt.
- Set up the relevant repository names (I didn’t actually do this, but if
you’re copy-pasting it will help)
export OLD_REPO=ffleming.github.io export NEW_REPO=fsf.io export GH_USER=ffleming
- Copy the old repository to a new directory and remove the
.git
directorycp -r "$OLD_REPO" "$NEW_REPO" rm -r "$NEW_REPO"/.git
- Initialize a new repository, set the remote. You should also make
NEW_REPO
on your remotecd $NEW_REPO git init git remote add origin git@github.com:"$GH_USER"/"$NEW_REPO".git cd ..
- Make sure that
NEW_REPO
ignores_site
(don’t do this if its.gitignore
already contains the entry)echo _site >> "$NEW_REPO"/.gitignore
- Migrate the old repo’s history to the
_site
directory.mv "$OLD_REPO"/.git "$NEW_REPO"/_site
- Build
cd "$NEW_REPO" bundle exec jekyll build
- Ensure that GitHub Pages will treat your GHP site as static
touch _site/.nojekyll
- Ensure that your CNAME file exists in the GHP site (
jekyll build
doesn’t copy it over)cp CNAME _site
- Push your work
git add -m 'migration' . git push origin master cd _site git add -m 'migration' git push origin master cd ..
That should’ve done it. Unfortunately, every time you run jekyll build
,
Jekyll will remove the important .nojekyll
and CNAME
files. To deal with
that, made a little bash script to build and deploy the static site to GitHub
Pages when I’m done previewing it locally.
Note that the script will not commit changes to your actual source files in
NEW_REPO
. That’s on you to version appropriately - this is just a deploy
script.
#!/bin/bash
set -euo pipefail
HOMEPAGE_DIR=~/Code/fsf.io
pushd "$HOMEPAGE_DIR"
bundle exec jekyll build
cp CNAME _site/
touch _site/.nojekyll
pushd _site
git add .
git commit -m "automated build"
git push origin
popd
popd
echo done