Automate Jekyll Production
The main benefit I see of using jekyll is being able to edit a plain markdown file and have it appear live on the Internet in just a few seconds. In order for this to happen, I have to perform the following:
- Make an edit
- Build the website
- Commit and push the changes to
gh-pages
branch - Copy the contents under
_site
from thegh-pages
folder into theproduction
folder CD
into the production-ready folder- Commit and push the changes to the
master
branch - Wait 5 seconds for github to publish the changes live on github.io.
I wanted a way to automate this.
I have to perform the above steps since I am using jekyll-maps which is not one of the approved plugins that I can use on github pages. This forces me to NOT have github automatically build my jekyll site. I must therefore upload all of the static HTML content on my master branch and have my source files in a gh-pages
branch. Github pages will serve the static content from the master branch live for you for free!
I created two folders, one for production and one for source edits. I did the following after already creating the gh-pages branch previously:
cd ~/Documents/github
mkdir production source
cd production; git pull <my_git_repo>.git; git checkout master
cd ../source; git pull <my_git_repo>.git; git checkout gh-pages
I have already forked a jekyll theme that includes all of the scaffolding. I can CD
into the source
folder, make an edit, and push my changes. I can see the website live on my localhost by running bundle exec jekyll serve
. All of the links are relative to my localhost, so I now need to export JEKYLL_ENV=production
so that jekyll will produce links with my http://bauerjj.github.io
baseurl.
This is where I encounter a jekyll bug that causes a double slash (//) in place of where a single slash should be (/). For example, links will show up as http://bauerjj.github.io//blog
instead of http://bauerjj.github.io/blog
. I followed jira 6057 and its proposed solution of using URLFilters, however I was not able to resolve my problem. I created a simple script instead that fixes the slashes in the _site
directory by iteratiing through all of the files and performing a replace. My config has this: baseurl : "/"
. Notice how I put multiple slahes. This was so that the script could look for 5 slashes and do the replace since some valid //
occur such as those in an http://
url.
#!/bin/bash
# Small script that replaces \\\\\ with a single \
FILES=$(find ./ -type f -name '*')
for file in $FILES; do
sed -i -e 's/\/\/\/\/\//\//g' $file
done
I then needed a method to monitor the source directory for any changes and then commit, push, and deploy the static content up to github for me. I used gitwatch and forked it so that I could customize it do run my replace.sh
script, copy the static contents to my production folder, and then commit/push everything to github. You can see my simple changes to the script on my own fork. Now, just execute ./gitwatch
and watch it do its magic whenever you edit a source file!
Please let me know if you have any problems.
Leave a Comment
Your email address will not be published. Required fields are marked *
Note - Sometimes a comment submission will fail. Simply press the "Submit Comment" button again until a green success box is shown