#static-site

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.

I’ve tried multiple sites such as www.paperplane.io and some other alternatives which could emulate the old Dropbox Public folder feature. Recently as I received an email about paperplane’s lack of update to new Dropbox API, I decided to build my own. You can use it for yourself too!

Prerequisites

Heroku account. Heroku is sort of a web-host for developers' apps. There's a free tier for every account.

Dropbox account. Dropbox is a cloud storage much like Google Drive, iCloud, Baidu Drive. There's a free 2GB account or something.

Steps

Go here to create a Dropbox app for yourself. Be sure to select "Dropbox API" and also "App folder". Set a name for your app and create it.

Click "Generate token" and make sure you copy that random gibberish words

Go here and click the that purple button saying "Deploy to Heroku".

Replace "never_gonna_give_you_up" with the random gibberish words you just copied earlier. Choose a name for your heroku app, then click "Create app".

Copy all your files to your dropbox folder such as ~/Dropbox/Apps/dropbox-app-name-earlier

If you have a file at say ~/Dropbox/Apps/cool_app/resume.html, then you can go to http://heroku-app-name.herokuapp.com/resume.html to see your file.

http://bit.ly/1rgNDC3