Skip to content
Test of the Futurice architecture for static website with prismic and metalsmith
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Metalsmith Prismic template

An opinionated, bare bones template for static site generation from using metalsmith and deploying to Amazon S3. Read more from the blog post CMS done right, vol 3.

This template includes

overview architecture

How to use this template

  • Install Node.js.
  • Fork or duplicate this template repository.
  • Run npm install
  • Copy .env.tmpl and rename to .env (this will be ignored by git)
  • Optional: Run npm run dev to test this template with example data
  • Set up
    • Create a repository
    • Setup API & Security in settings
      • Create a new app at Settings > API & Security > Create a new Application. No need to provide a callback URL.
      • Put the generated master access token in .env PRISMIC_TOKEN={PRISMIC_API_ACCESS_TOKEN}
    • Setup preview in Prismic settings
      • Preview url: https://{HEROKU_APP_NAME}
    • Setup webhooks in Prismic settings
    • Add tokens to .env
    • Setup custom types in Prismic settings
      • See docs/prismic-conventions for best practices
      • See prismic-custom-types/ for this example repositories custom type json files, that can be copied to your Prismic repository
    • Create your own content
      • Go to the "Everything" tab and "Write something"
      • This repositories example content and their tags can be seen from the API browser by leaving the query parameter empty
  • Setup Amazon S3
    • Create an account
    • Create IAM tokens
    • Create S3 bucket
    • Add tokens to .env
      • S3_REGION={S3_END_POINT}, e.g. 'eu-west-1'
  • Setup a new heroku app
    • Set config variables
    • Configure Github to deploy to heroku.
      • Optionally put Travis CI in the middle if you aren't setting up separate staging and production environments and want some extra confidence that things build correctly.
  • Adjust the template to your needs (sections that need to be adjusted are marked with *TEMPLATE*)
    • Adjust the metalsmith plugins in server.js
    • Configure the metalsmith-prismic linkResolver in server.js that generates prismic links and paths of prismic collections
    • Adjust the docs/
    • Adjust the src/, /layouts and partials/ directories' to match your content to Prismic
  • Run npm run dev. The development mode has live reloading but needs to be restarted manually if content in changes.

Directory structure

  • builds/: Output directory for built sites
  • layouts/: Page layouts
  • partials/: Embeddable page elements
  • plugins/: Custom metalsmith plugins
  • prismic-custom-types/: Backups of Prismic custom types
  • src/: Source files which will be transformed to output
  • utils/: Utility functions
  • server.js: Server and build logic with metalsmith-plugins

Alternative deployments

License and Credits

Metalsmith-prismic-template is licensed with MIT License. It was developed by Futurice in co-operation with our customers Finavia and Clear Funding.

You can’t perform that action at this time.