Skip to content
Simple project to show the usage of the contentful-metalsmith plugin
Branch: master
Clone or download
Latest commit 9ec13ba Sep 4, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets Publish Jul 15, 2014
helpers upgrade the new blog content model Sep 4, 2018
layouts upgrade the new blog content model Sep 4, 2018
partials
src upgrade the new blog content model Sep 4, 2018
.editorconfig add editorconfig Aug 29, 2016
.gitignore
README.md
build.js
package.json upgrade to latest contentful-metalsmith Sep 4, 2018
screenshot.png
yarn.lock

README.md

contentful-metalsmith-example

An example to showcase the integration of Metalsmith and Contentful by using a metalsmith plugin: contentful-metalsmith.

About

The goal of this project is to show how easily you can create static sites using the content (text, images, links, etc.) stored on Contentful. This project is configured to fetch data from a public space using Contentful's Content Delivery API.

The Blog Example

The result is a blog site including several posts and authors.

It also uses handlebars templates for templating and sass for writing CSS.

Usage

  1. Clone and install the project dependencies
  $ git clone git@github.com:contentful/contentful-metalsmith-example.git
  $ cd contentful-metalsmith-example
  $ npm install
  1. Run metalsmith
  # for building once
  $ npm start

  # for development and constant building
  # starts watchers to react to file changes,
  # spawns an http server and opens the built
  # site in your browser
  $ npm run dev

After running metalsmith you will have several files into the build dir. Each of this files demonstrate a capability of the contentful-metalsmith plugin:

  • authors.html, shows only entries with contentType author
  • index.html, shows a list of entries with contentType article and rendered child pages for every article
  • images.html, shows a list of entries with contentType image but for a completely different space, which can become handy when you use several spaces.
  • filtered.html, shows a list of entries filtered by keyword rabbit
  • article/*.html, shows one entry resulting of rendering all articles

For more info on the capabalities of the plugin visit its repo.

You can’t perform that action at this time.