Prismic, Metalsmith and us

Axel Eirola

Static websites?

In case you missed Eemeli Kantolas presentation about Zalando STUPS' use of Metalsmith and Prismic.io last summer, and aren't yet convinved that static websites are really handy, here are some points:

Prismic.io?

An cloud hosted CMS that only handles the content part.

In it's essence, it is a customizeable web form and database with an API.

Well, it also provides libraries that generate OK-ish HTML from the content.

Prismic.io brings the content, you bring the templates and styles.

Metalsmith?

A Node.js tool for building static websites with a versitile plugin ecosystem.

Plugin support for all templating and styling languages, and fetching of content from Prismic.io, obviously.

Nice and simple and hackable.

Backend?

You don't really need your own backend for most of the stuff.

Just replace it with some cloud hosted services.

Making it easy

Many projects are opting for these static website stacks.

We've created a common build server for buliding static websites from Prismic.io using Metalsmith.

And a project template to match!

Metalsmith-prismic-server

Developed by David Sheldrick

A Node.js server that you can run on Heroku free-tier to build your site whenever changes are published in Prismic.io.

Also provides rendering previews for Prismic preview functionality, and a handy devserver for when writing the templates.

Metalsmith-prismic-template

Compiled by Kiia Korpi

An opinionated project template that includes best practice guides and basic setup for running metalsmith-prismic-server.

Demo time!

If we have time, we can look at how it works in reality.

Dev server

The development mode of metalmiths-prismic-server has nice autoreloading features.

npm run dev

Prismic.io

Prismic has some nice content editing features.

Preview server

It also provides a preview feature where you can check how your changes look before publishing.

Web hooks

All changes are pushed via a hook to the build server.