MetalsmithJS is Still Really Useful
TLDR; This post highlights a stack of useful plugins to rapidly assemble a static site generator that’s powerful and easy to program… even though the core tool has stopped growing.
I needed to pick a static site framework about two years ago and I chose Metalsmith. It’s a lovely, minimal, open-source tool… however since summer of 2018 there hasn’t been any substantive work. Segment officially handed it off. Scamper to the next shiny thing right!? 🐿
I manage a medium-sized (mostly marketing) website for my day job and rely on Metalsmith along with community plugins and still enjoy it. I’m not held back, it’s simple to adjust, and a huge library of plugins have aligned on sensible norms. 🙌🏻 The architecture makes it very simple to add your own custom plugins and adjust data on it’s way to be rendered.
What Is Metalsmith?
First, here are some useful quick links about the platform and plugins:
- Official plugin list
- Less official, bigger plugin list
- List of resources
- Slack channel
- Frontmatter explanation
What Do These Plugins Do?
These plugins construct a pipeline to render a site without boilerplate or complexity. Of course, the point of such architecture is to conform to your specific needs… but it never hurts to peek at someone else’s core blueprint.
- Most content should be editable in a CMS, pull it from Prismic.
- Data from APIs needs to be available to templates/pages/layers.
- One-off pages can be hard-coded markdown/YAML.
Essential Plugins
- Assemble Components and Pages
- metalsmith-layouts - page level templates
- metalsmith-discover-partials - expose partials/includes
- metalsmith-in-place - use data and partials in markdown
- metalsmith-collections - organize grouped pages
- Expose Content Beyond Markdown Files
- metalsmith-json-to-files - convert JSON into pages
- metalsmith-data - expose JSON data to templates
- metalsmith-prismic-server - content via Prismic CMS
- Handy Utilities
- metalsmith-permalinks - easy file named urls
- metalsmith-alias - simple HTML aliases
- metalsmith-fingerprint - hash filenames for cache busting
- metalsmith-i18n - simple internationalization
- metalsmith-sitemap - generate a dynamic xml sitemap
Build Tasks
There are Metalsmith plugins for common build tasks like: SASS compile, JS concat/minify, etc. I recommend not using them and doing this stuff with a build tool like: Gulp, Grunt, Webpack, etc. That’s what it’s for. You’ll probably need a build step to download and transform API data and reload the browser when done anyway. Use Metalsmith as a site generator, that’s what it’s for.