I was working on all the blog updates and posts for the new year when I was thinking about a possible restyle. Read this all the way through, because I promise there is some code, too.
Let’s start saying that finding a new theme wouldn’t have been an easy task. At the moment I was using Minimal Mistakes, which is great since it offers support for Disqus, Google Analytics and keeps the blogger in the center of the scene with their bio and social network links.
What I didn’t like, though, was that it was too… Giant. What I mean is mainly “big fonts”. In addition to this, I did my own tweaks to the theme and keeping it updated was a huge pain, since I had to check each file and correct the changes.
In this post, I’ll cover the entire story behind the new theme, and I’ll share with you my setup to make it work and self-update.
Searching for a theme
Before continuing let me say that to serve my blog I’m using Jekyll on GitHub Pages.
To find the right theme I dove into those websites like jekyllthemes.org, which are nothing but a collection of Jekyll themes. However, nothing was perfectly suiting my style or offered everything I needed. I started feeling defeated almost immediately, but at some point I came across Ghost and I instantly fell in love with its default theme, Casper. I felt the urgent need to have it.
Ghost is a sort of open source CMS for blogs. It is used by DuckDuckGo, Tinder, Mozilla and many other companies which prove nothing but how good that is.
Being open source means that it’s free, but being a CMS also means that it is a back-end service, which GitHub Pages, that hosts static websites, does not support.
What I tried at first was hosting Ghost locally, scraping the static website and uploading that on GitHub. I spent hours doing the porting and, you won’t believe that, it turned out a mess. Scraping is just a terrible idea, but, in my defense, I must say I was just following the instructions from many different tutorials.
I was going to keep Minimal Mistakes, trying not to think about the beauty of Casper. But then… a thought… how is that possible that no one did a Casper theme for Jekyll?!? And in fact… someone did.
Download the theme: done. Configure the theme: done. Copy all the posts: done. Publish on GitHub: error.
Nothing can be perfect, right? So.. what is the problem now? Actually, the README file of Jasper2 has a very clear Deployment section which says that for security reasons GitHub does not allow plugins in the
_plugins/ folder and because of that you need another way to deploy the blog.
The simple version is that the website needs to be compiled by Jekyll and then the generated static folder needs to be uploaded to GitHub. The README talks about different ways to achieve that, but I used my own.
First of all, I created a new private repository, named
blog-backend which contains the Jekyll project. In the
.gitignore file I put the
_site folder, which contains the generated website. Instead, I cloned the blog repo into this
_site folder, allowing me to directly push the built blog.
My very first idea was to do all the edits, run
jekyll build and push the updated blog. But then I realized there was a huge problem in doing that: scheduling. The way Jekyll works (if told so) is that “future” posts are not compiled and displayed. Every time the website is built every post is checked and, if set in the past (or present), generated.
With my previous theme, the setup was quite simple: I had set a cronjob on my Raspberry Pi (which runs 24/7) that used the GitHub API to request a fresh build every day at 1 pm. Everything was automatic. But now this isn’t possible because GitHub can’t build the blog for me.
This is my workaround:
- configure all the ssh deploy keys needed (
- clone my
blog-backendrepo in the
/home/pi/blogfolder and, inside that, clone the
- install Jekyll, bundler and all the Gems required to run
bundler exec jekyll build(sounds easier than it was)
- set up a cronjob to execute a bash script that:
- pulls all the updates for the back-end
- builds the blog
- commits the changes to the front-end
- pushes the updated blog
And this is the bash script (let me add that I cannot really code in bash and therefore this could definitely be improved. But it works just fine):
#!/bin/bash echo "Pulling updates..." (eval $(ssh-agent -s); ssh-agent $(cd /home/pi/blog; ssh-add /home/pi/.ssh/id_rsa; git pull)) echo "Building blog..." (cd /home/pi/blog; bundler exec /usr/local/bin/jekyll build) echo "Pushing..." DATE=`date '+%Y-%m-%d %H:%M'` (eval $(ssh-agent -s); ssh-agent $(cd /home/pi/blog/_site; ssh-add /home/pi/.ssh/github; git add -A; git commit -m "$DATE update (pi)"; git push))
Is this perfect?
Absolutely not. The Jasper2 theme generates xml files containing the date and time of build, that means that even if there is no real update there are changes to be commited and my repo is now spammed with commits. Just imagine one commit per day (just from the Pi). This is crap.
I could (and should) fix this by checking if there are actual post updates, but I’m lazy and for the moment this is functioning.
If you have questions or suggestions remember that down below there is a “comment” area. (Oh yeah you can share, too).