alexanderalmstrom / contentful-middleman

Demo with Middleman static site generator and Contentful.

Contentful Middleman

This is a demo project setup of Middleman (static site generator), Contentful (API based CMS) together with Webpack (Static module bundler).

Requirements

• Homebrew
• Yarn
• Node 8.9.4 (preferably with NVM)
• Ruby 2.4.3 installed (preferably with RVM)
• Bundler gem
• Middleman gem
• Foreman gem

You will find a simplified installation instruction below for Homebrew, NVM, RVM and Ruby gems. I refer to each project documentation if any issues occurs during the setup. Ignore the first steps if you already have the requirements (Homebrew, Yarn, Node and Ruby) installed.

Features

• Webpack dev middleware (bundles and serves files from webpack)
• Webpack hot middleware (hot module reloading, HMR)
• Bundle JS and SCSS files with webpack (overrides Middleman asset pipeline)
• Deployment with Heroku (Heroku CLI)
• Bourbon (Sass tool set) https://www.bourbon.io/
• Bourbon Neat (Sass grid) https://neat.bourbon.io/

Setup

Install Homebrew

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Install Yarn

brew install yarn

Install NVM

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash

Install Node

nvm install 8.9.4

Set Node version

nvm use v8.9.4

Check Node version

node -v

Install RVM (Ruby Version Manager)

\curl -sSL https://get.rvm.io | bash -s stable

Install Ruby

rvm install 2.4.3

Set Ruby version

rvm use 2.4.3

Check Ruby version

ruby -v

Install Bundler and gems

gem install bundler

bundle install

Install Middleman

gem install middleman

See the Middleman docs for more detailed instructions and help if you encounter problems during the install.

Development

Run dev server

yarn run start

Run build

yarn run build

Enter Contentful API credentials

Rename .env.example to .env and enter your Contentful API credentials.

Generate Contentful data yaml files

yarn run contentful

Run local production server

Install foreman

gem install foreman

Start Foreman

foreman start

Deploy to Heroku

• Create Heroku account. Heroku homepage
• Install Heroku CLI.

Create new Heroku app

heroku create example

Add an existing Heroku app

heroku git:remote -a example

Add buildpacks

heroku buildpacks:set heroku/ruby
heroku buildpacks:add heroku/nodejs --index 1

Heroku config variables

heroku config:set CONTENTFUL_SPACE_ID=space_id
heroku config:set CONTENTFUL_ACCESS_TOKEN=access_token

You can also add your CONTENTFUL_SPACE_ID and CONTENTFUL_ACCESS_TOKEN under Settings > Config Variables in your Heroku application.

Run deploy

yarn run deploy

or connect to GitHub under Deploy > Deployment method and select your branch to do a manual deploy.

Open your Heroku application in browser

heroku open