Posts tagged with jekyll - page 2

WordPress to Jekyll part 3 - Site search

Site search is a feature that WordPress got right and, importantly, analytics tell me is popular. A static site is once again at a big disadvantage but we have some options to address that.

Considering options

My first consideration was to use Google Site Search but that was deprecated last year. There are alternative options but few are free. I’m not opposed to people being paid for their services, something has to keep the lights on, but a small personal blog with no income stream can’t justify the cost.

My next thought was to generate reverse index JSON files during site build and then write some client-side JavaScript that would utilize them as the user types in the search box to find the relevant posts. It’s an idea I might come back to but the migration had already taken longer than I anticipated and I like to ship fast and often :)


I soon came across Algolia which not only provides a simple API and a few helper libraries but also a Jekyll plug-in to generate the necessary search indexes AND has a free tier that requires just a logo placement and link to their site! Awesome.

Setup was a breeze and Algolia have a specific guide to indexing with Jekyll that was useful. Once you’ve signed up the main parts are configuring indexing and integrating with your site.

Index integration

First install the jekyll-algolia gem making sure it’s specified in your gemfile.

Then configure your Jekyll _config.yml so it knows what to index and where as well as what document attributes are important:

  application_id: {your-algolia-app-id}
  index_name: {your-algolia-index-name}
      - title
      - excerpt_text
      - headings
      - content
      - categories
      - tags
      - type
      - searchable(categories)
      - searchable(tags)
      - searchable(title)

Finally you’ll need to run the indexing. You need to ensure the environment variable ALGOLIA_API_KEY is set to your private Admin API Key from your Algolia API Keys page then run the following command after your site is built:

bundle exec jekyll algolia

Site integration

Wiring up the search box can be a little overwhelming as they have so many clients, options and APIs available. I went with a design that presents the results as you type like this:

This uses two of their libraries - the search lite and the search helper plus some code to wire it up to my search box and render the results in a drop-down list. I’ll probably further tweak the result format and maybe consider wiring up to the API directly as two libraries for such a simple use case seems a bit overkill.

<script src=""></script>
<script src=""></script>
  let searchForm = document.getElementById('search-form')
  let hits = document.getElementById('hits')
  let algolia = algoliasearch('{your-algolia-app-id}', '{your-algolia-search-token}')
  let helper = algoliasearchHelper(algolia, '{your-algolia-index-name}',
    { hitsPerPage: 10, maxValuesPerFacet: 1, getRankingInfo: false })
  helper.on('result', searchCallback)

  function runSearch() {
    let term = document.getElementById('s').value
    if (term.length > 0)

  function searchCallback(results) {
    if (results.hits.length === 0) {
      hits.innerHTML = '<li><a>No results!</a></li>'
    } else {
    let credits = document.createElement('li');
    credits.innerHTML = "<img src=\"\" onclick=\"'', '_blank')\" />"

  function renderHits(results) {
    hits.innerHTML = ''
    for (let i = 0; i < results.hits.length; i++) {
      let li = document.createElement('li')
      let title = document.createElement('a')
      title.innerHTML = results.hits[i]._highlightResult.title.value
      title.href = results.hits[i].url


I’m a big proponent of analytics when used purely for engineering improvement and Algolia provides a useful dashboard to let you know how performance is doing, what topics are being searching for and what searches might not be returning useful content.

I’ll dig through that when I have a little more time however. The backlog of ideas for posts is taking priority right now!

[)amien Note: I did not and do not receive any compensation from Algolia either directly or via any kind of referral program. I’m just a happy user.

WordPress to Jekyll part 2 - Comments & commenting

I do enjoy discussion and debate whether designing software or writing articles. Many times the comments have explored the subject further or offered corrections or additional insights and tips. For me, they are vital on my blog so I was somewhat disappointed that Jekyll provides nothing out of the box to handle them.

Third-party solutions like Disqus exist that require you either pay a subscription or have ads inlined with the comments. That $9/month adds up and the alternative of injecting ads onto my blog just to support comment infrastructure doesn’t sit right with me.

Storing comments

So what does Jekyll have that we could build upon?

Well, one very useful feature is the ability to process ‘site data’ held in YML files as a kind of data source for generating content via the Liquid templating language.

So, if we store each comment in a file named _data/{blog_post_slug}/{comment_id}.yml with this format:

id: 12345
name: Damien Guard
gravatar: dc72963e7279d34c85ed4c0b731ce5a9
date: 2007-12-18 18:51:55
message: "This is a great solution for 'dynamic' comments on a static blog!"

Then we have a model where we can gather all the ones that respond to a post by traversing a single folder and performing some sorting.

By using one-file-per-comment we also make deleting, approving and managing comments as easy as possible.

Rendering comments

Now we can create test data and attempt rendering. I created three Jekyll includes that match my WordPress theme, they are:

  • Render an individual comment (comment.html)
  • Show a form to accept a new comment (new-comment.html)
  • Loop over individual comments for a post (comments.html)

I’ve included all three includes you can copy to your Jekyll _includes folder.

The simplest option is to then just include the comments.html file. For example, my blog post template file looks like this:

layout: default
<div class="post {{ page.class }}">
  {% include item.html %}
  {{ page.content }}
  {% include comments.html %}

You’ll also need to add the following line to your Jekyll _config.yml. This is required so my sort function can work due to a couple of restrictions in Jekyll.

emptyArray: []

Exporting comments from WordPress

The next step is getting all the comments out of your existing system. I was using WordPress so created a simple PHP script that will extract them all into individual files with the right metadata and structure.

  • Upload this file to your site
  • Access export-blog-comments.php via your browser and wait for it to complete
  • Download the /comments/ folder over SSH and then remove it and the export-blog-comments.php from your server
  • Copy the /comments/ folder into your Jekyll _data/ folder

Disqus users should check out Phil Haack’s Disqus exporter!

Accepting new comments with an Azure function

We can now render existing comments but what about accepting new ones?

At a minimum we need to accept a HTTP form post and commit a new YML file. Ideally with some validation, a redirect to a thanks page and with the new YML file in a pull request or other moderation facility. Merging the PR will cause a site rebuild and publish the new comment :)

Platform and choices

I chose:

  1. GitHub to host my blog and comments as I use it for my code projects
  2. Azure Function App for the form-post-to-pull-request - details below
  3. C# for the function - a great language I know with good libs

I went with Azure Function Apps for a few reasons:

  • They accept HTTP/HTTPS directly without configuring an “API Gateway”
  • Comment posting is a short-lived operation that happens quite infrequently
  • Free monthly grants of 1 m executions/400,000 GB-s should mean no charge
  • Taking a second or two to spin-up the function should be fine in the users context

(Disclaimer: I have a free MSDN subscription that includes Azure credits as part of my ASP Insider membership although I do not expect this solution to use any of it)

Other platforms

You could easily port this to another C#-capable environment - or port the solution entirely to another language.

If you have a lot of comments you could run the function on three platforms and round-robin the DNS to take advantage of the free usage tiers on each.

How it works

The form receiver function for comments relies on a couple of libraries to deal with YML and GitHub but is otherwise self-explanatory. What it does is:

  1. Receives the form post over HTTP/HTTPS
  2. Attempts to create an instance of the Comment class by mapping form keys to constructor args
  3. Emits errors if any constructor args are missing (unless they have a default)
  4. Creates a new branch against your default using the GitHub OctoKit.NET library
  5. Creates a commit to the new branch with the Comment serialized to YML using YamlDotNet
  6. Creates a pull request to merge the branch with an informative title and body


Installation requires a few steps but can then just update whenever you update your fork.

  1. Fork the jekyll-blog-comments-azure repo
  2. Create a Function App in the Azure portal (I went with consumption plan on Windows)
  3. Go to Deployment Options, tap Setup and choose GitHub
  4. Authorize it to your GitHub account
  5. Configure Project to your fork of jekyll-blog-comments-azure
  6. Configure Branch to master

You will also need to setup two Application Settings for your function so it can create the necessary pull requests, they are:

  • GitHubToken should be a personal access token with repo rights
  • PullRequestRepository should contain the org and repo name, e.g. damieng/my-blog

The final step is to modify your Jekyll _config.yml so it knows where to post the form. For example:


You should now be able to post a comment on your blog and see it turn up as a pull request against your repository!

Extra steps

  • You can have post authors replies highlighted differently
  • Threaded comments could be supported - feel free to send a pull request or I’ll get to this in time
  • Anti-spam measures will likely need to be improved at some point - right now this is just client-side in JS that requires a second ‘Confirm comment’ click

In Part 3 of the series I’ll go into how I implemented my site search with Algolia!


WordPress to Jekyll part 1 - My history and reasoning

It’s hard to believe it was 13 years ago back in a cold December on the little island of Guernsey when I decided to start blogging. I’d had a static site with a few odd musings on it since 2000 but this was to be conversational, regularly updated and with more technical content. Blogspot seemed the easiest way to get started.

Briefly hosted at home

Within 18 months of regular blogging I’d moved over to Subtext which being a .NET app required Windows hosting so threw it on a small Shuttle PC on my home DSL. This is where I started using it as an experiment for CSS and web techniques but within a year I’d had my 1MB DSL brought to it’s knees twice through articles being featured on Boing Boing.

I did however contribute a little to the project and started chatting with the maintainer - Phil Haack - who I’d end up meeting when we both joined Microsoft years later and is a friend to this day.

Landing on WordPress

DamienG theme in 2008 In 2007 I migrated to a PHP based CMS that was making a name for itself called WordPress. My blog would remain on WordPress for 10 years across shared hosting, VMs and dedicated servers.

One server was caught in an explosion at the ISP, another time my site got pwned through a WordPress vulnerability. I switched themes several times before creating my own super-light MootStrap theme based around the BootStrap 2 layout and nav bar. I messed with wp-SuperCache trying to improve performance and scalability before switching out the PHP engine for HHVM as well as using NGINX instead of Apache and MariaDB instead of MySQL all in an attempt to eek out a bit of extra performance.

While my theme lives on today - for now at least - MootStrap and PHP are no more as I switched over to the Jekyll static site generator earlier this month after a long meandering journey to get there.

Why Jekyll?

I’ve had a lot of success with Jekyll on some other sites I run. Hosting it on GitHub pages or S3 with a CloudFront brings a lot of benefit:

  1. Cost - S3 and CloudFront cost pennies rather than $40+ a month
  2. Security - there’s no code running to be exploited, no WordPress plug-in back-doors
  3. Speed - CloudFront is a geo-distributed CDN and S3 is no slouch either
  4. Editing - text files are easier to process, find, manipulate and markdown much easier to write

The price aspect is definitely worth mentioning again. With the occasional bursts in traffic my site hosting generally worked out around $40 a month for a decent VM. On AWS I’m expecting it to max out at $3 despite these improvements and benefits.

Of course part of the other reason is static site generators are interesting and I like to play.

Some challenges

Jekyll is a static site generator. That is you run the tool somewhere and it produces plain html files with zero server-side code left in them. By its very nature is going to not have support for:

  • Comments - No way to accept or render them
  • Search - No site search facility
  • URL control - Difficult to match the paging/tags/categories with default plugins

Surprisingly however there are blog-friendly facilities where static generation can support it, specifically: