January 22, 2018 · webdev jekyll lunrjs sigal

Building bnp.net.au

Berri Native Plants is a native plant nursery in South Australia. In December 2015, I had the task of designing and developing a new website for it. The requirements were fairly simple and as follows:

  • information about the business
  • photo gallery
  • blog/articles view
  • ability to search for articles, pages, and photos
  • work on standard shared hosting

For the simplest possible hosting, I decided to build the site on Jekyll, a static site generator. This allowed me to avoid PHP like the plague, while still working on basic shared web hosting. Also, since I was fairly new to web development in those days, I also simply built off the default jekyll theme for all the styling (don't recommend; there are heaps of good css frameworks available!). Anyway, here is a screenshot of the homepage as it turned out. You can probably tell I was new to designing webpages, but hey it has all the information required and it's readable! :P

bnp.net.au homepage screenshot

So that was the first requirement done. Now for the second requirement, Jekyll has brilliant support for a list of articles, so that was done from the beginning.

Now on to a photo gallery! This was an interesting challenge, since I wanted to be able to easily update it from a set of directories containing photos and potentially metadata, and it had to integrate with the jekyll site (theme, header/footer, html metadata, etc.) and the search feature to come. The workflow had to be [directory with photos and config files] --> [html output with jekyll frontmatter] --> [build with jekyll] --> [final static site].

First attempt: I discovered that digiKam, a totally epic photo management program, also featured a html photo gallery export function. It took a fair bit of work experimenting with the xml templating (!!!!) it used to actually get it to integrate with the Jekyll site, but the end result was pretty good. However, this wasn't the end... sadly the html export in digiKam was unexplicably removed in newer versions. :(

Second attempt: I finally came across a static html gallery generator called Sigal. This is a neat highly configurable python program that also had a sane templating system (Jinja2!). I was able to develop a custom theme (released on GitHub) that output pages suitable for integrating into the Jekyll site. Final result below:

screenshot of a gallery page

Now all the content of the site was organized, all I had to do was set up a search feature. Now this was also constrained by the self-imposed static site requirement. Lunrjs to the rescue! This is an awesome little javascript library that enables powerful search over a collection of javascript objects. I was able to get Jekyll to build a json file containing metadata for all the pages, photos, and articles, and then load that file into Lunr on the search page. This enabled fast, filter-as-you-type search, with support for image thumbnails, article metadata, etc. Example search below:

screenshot of an example search

Some things I've learnt from building the site include:

  • Static sites can feel dynamic! If you're willing to perform the CMS side of things locally, and regenerate and push the site when you're done, this can be a simple and powerful way of managing a site. Note that this wouldn't scale well if multiple users need to update things on the site, or the site needs changes fairly often.
  • You don't need to reinvent the wheel for everything! Since building the site I've found many css frameworks that would have made initial development so much quicker.
  • Lunr js is amazing! As long as the index isn't too huge, it works really well for fast searching on a site.
  • There are many software gems hidden away online if you search hard enough, Sigal being a notable example. They might not always be exactly what you need, but the beauty of open source software is that it's often possible to hack/configure/customize it to suit.