2023-04-06

How to add a Jekyll blog to an existing github pages website

I wrote this blog at the Open Science Retreat. Thanks to the organizers for giving me the time and inspiration to finally get this done!

Yesterday I added a blog to my website, because I wanted to write a blog post. I couldn’t find clear instructions for doing this, and I ended up going down several dead ends, so here’s what worked for me.

I already had a website, which was very simple (pretty much just a single html page), but I recently started wanting to write a blog. I’d previously written some things on Medium, but I wanted to move away from using a third party, and I figured “how hard could it be to make one on my website?”. Spoiler: it took some faffing.

Jekyll seemed like a sensible option, so without much further thought I dove in.

I work on Windows, so following these instructions from github, and then these instructions from Jekyll I installed Ruby+Devkit.

Since I already had a clone of my repo locally I could skip straight to point 7 of the github instructions (I’m linking to the web archive version of the instructions, just in case they change):

• jekyll new --skip-bundle --force . (--force is needed because jekyll expects an empty repo)
• Opening the Gemfile in a text editor (I used Notepad++)
  • Comment out line 10 # gem "jekyll", "~> 4.3.2" in the Gemfile
  • Modify line 15 to gem "github-pages", "~> 228", group: :jekyll_plugins (checking the version here)
• bundle install
• Modify the config file. For me the important part was: url: "https://www.dannygarside.co.uk"

Then to test my site locally I continued with these instructions and ran: bundle exec jekyll serve. At first it threw an error (cannot load such file -- webrick) which I resolved with bundle add webrick (info here), and then it worked!

Well, it sort of worked, in that it showed my original site, and if I went to http://127.0.0.1:4000/blog/ it showed a 404…

To tell Jekyll that I wanted to keep my original home page, and that I wanted to have the blog at dannygarside.co.uk/blog I did the following:

• added this line to the config file: permalink: /blog/:title/ (this also makes it so that the URL for each blog is just the title, rather than the date and title, which I prefer).
• Copied my previous html homepage into a new folder (_layouts) and renamed it home.html.
• Added blog.html to my root directory. I honestly don’t remember where from, somewhere near here I think…

And that was all the heavy lifting done! 🎉

Extras

I then did a couple of snazzy extra things like:

• Added a custom font
• Increased the default size of the font
• Added a gradient background

This post is published under a CC BY 4.0 licence.