Initially it seemed the clear winner was Metalsmith, which is a great system, however the more I built it out, the closer to the metal I needed to be. Most of the plugins for Metalsmith simply wrapped many of the tried and true best of breed node.js modules... while being a little out of date behind. I wanted more control.
Fundamentals of Version 6 of My Site
All source code for the site is on GitHub. I still believe in my reasons to use Jekyll and preference of long term updates to notes over blog posts so all content is Markdown files with YAML front matter, in the Jekyll style. I love the portability of that format!
The content goes through a very customized build script that creates a json file for each piece of content after transforming the content in a number of ways: Markdown to HTML, code syntax highlighting, and turning plain Markdown image tags into responsive images using
srcset to name a few. The reason I generate a file instead of using it in memory is so I can get the data via an AJAX call later using
From each content's json file generated, I take that data and pass it to a React template using
renderToString() to create static html in the build directory. React is really a quite fabulous templating language for static sites. I heavily vetted Mustache, Twig, Swig, and Nunjucks before settling on React.
I'm also have a Pattern Lab for my Site that acts as a Styleguide and a Component Library for all my React templates. I've created a custom intermediary step as Pattern Lab doesn't have an engine for React yet, but with all the great work going on with Pattern Lab 2's modular approach to engines and languages I see the proper groundwork laid for it to happen.
I consistently use the BEM naming scheme for my CSS class names to create scope for the components they style. Each Sass file sits next to its Component that it styles.
A clean slate. I really liked my old site's design, but it had been around for a long time and it was necessary to wipe the slate clean and start afresh. I feel really good about the foundation that I've laid here, and I still see many areas of improvement that I look forward to iteratively implementing on. Fun fact: the same theme started on WordPress (v3), got migrated to Drupal and turned responsive (v4), and finally to Jekyll (v5).
index.json to any url on this site to see it's data. Super fun!