Clairnote Website and GatsbyJS

Have you noticed that pages on the Clairnote website now load really fast? For a number of months I’ve been working on moving the Clairnote website from WordPress to GatsbyJS, a super-charged, next-generation, blow-your-socks-off static site generator. The change has been live for a few weeks now, and it brings a number of benefits for visitors and also for future site development and maintenance.

The site looks largely the same, as I took an incremental approach and kept the same basic style and design. (I’d like to give the design a refresh at some point.) The most noticeable improvement is that visitors will have much quicker page loads as they move around the site. (This is one of GatsbyJS’s big selling points.) In the process of porting the site I reworked the dynamic JavaScript-heavy pages, namely the AudioVisualizer, Learning Game, and Sheet Music pages, converting their vanilla JavaScript over to ReactJS (which is what is under GatsbyJS’s hood). The Sheet Music page now has all of the Clairnote sheet music, whereas before some was on the “Sheet Music Library” page and some was on the “More Sheet Music” page. Also, the UI is improved so you can more easily search across all the three different sheet music collections (Mutopia, The Session, and Miscellaneous — Miscellaneous being the sheet music that used to be under “More Sheet Music”). Previously you selected a collection from a drop-down menu and then searched that collection. Now you do a search across all collections, seeing the number of results in each collection’s tab, and then click throught the tabs to see the results from each collection. A small change, but an improvement none the less. Also, the sheet music results are paginated rather than having all the results on one potentially giant page. The AudioVisualizer page is now somewhat better when viewed on a small mobile phone screen. Although, there’s still room for improvement in general in that department.

A lot of the motivation for making the move, besides the speedup for visitors, was to improve the situation for working on and maintaining the site. Dynamic app-like pages like the AudioVisualizer, Learning Game, and Sheet Music, are much more at home, more idiomatic, in a JavaScript/ReactJS environment like GatsbyJS, as compared with WordPress which is tailored for blogging. I’m certainly much more fluent in JavaScript than PHP. Also, particularly now that the site has two versions (Clairnote (DN) and Clairnote SN), it is much easier to maintain that kind of madness setup in GatsbyJS, without pulling your hair out. My hope is that this will make it easier and more enjoyable to work with the site going forward. I sure hope so, because it was more work than I anticipated. Particularly the blog part, since GatsbyJS doesn’t provide blogging features ‘out of the box’, like WordPress, but rather gives you some raw materials you can use to build your own blogging solution. This is where its flexibility and power come with some trade-offs, depending on the use case.

There are a couple of things that have gone away that hopefully won’t be missed too much. The first is the site search feature. For that I’m just punting and sending seekers to DuckDuckGo with “site:clairnote.org”, which should suffice for now. The other is blog comments, and it’s a shame to to lose them, even if they weren’t used all that much. It’s always good to get feedback and encouragement in this obscure corner of the musical landscape. So don’t hesitate to send comments by email instead. I will add them to the post. Note that comments on past posts are still there. Staticman actually provides a clever way to do comments on a static site, so maybe that could work at some point. (But see what I mean about building your own blog.)

In sum, this move to GatsbyJS puts the Clairnote site on solid footing for the future. GatsbyJS is really nice to work with if you’re used to the kind of workflow it provides, and I’ve been pleased with the results so far. But I’m glad that the porting work is done and I can move on to other things.