Middleman Template

The base Middleman application used at cantierecreativo, ready to deploy to Netlify.

Requirements

This project requires Node.js (v9.3.0) with yarn and Ruby (v2.6.2)

Usage

Install or set Ruby (2.6.2) with RBENV:

$ rbenv install/set 2.6.2

Install or use Middleman gem:

$ gem install middleman

Install or set Node (9.3.0) with NVM:

$ nvm install/use 9.3.0

Then run:

$ middleman init project -T=cantierecreativo/middleman-template

Configuration

The template init scripts asks you for the following information:

Languages string, this should be a comma-separated list of locales, e.g. "it,en",
DatoCMS read-only API token (from DatoCMS settings -> API Tokens),
Base URL of the site (e.g. https://sitedomain.ext),
Git origin repository,
Git repository that triggers builds (optional).

After these questions, the init script installs all dependencies and creates the project directories.

Configuration is held in 3 files:

config.rb - Middleman project cofig,
data/config.json - global settings used in project templates, *.env - environment variables and secrets.

The final directory structure is:

project/
+-- config/
|   +-- i18n-tasks.yml
+-- config.rb
+-- data/
|   +-- config.json
+-- .env                                - environment variables for development
+-- Gemfile
+-- Gemfile.lock
+-- .gitignore
+-- locales/
|   +-- it.yml
|   +-- en.yml
+-- package.json
+-- README.md
+-- source/
|   +-- 404.html.slim
|   +-- fonts/
|   +-- images/
|   +-- index.html.erb
|   +-- localizable/
|   |   +-- index.html.slim
|   +-- partials/
|   +-- javascripts/
|   ¦   +-- index.js
|   +-- layouts/
|   ¦   +-- layout.slim
|   +-- stylesheets/                    - a default BEMO2 setup
|   +-- templates/
|       +-- browserconfig.xml.erb
|       +-- redirects.txt.erb
|       +-- site.webmanifest.erb
|       +-- contact_page.html.slim
+-- webpack.config.js
+-- yarn.lock

To see the list of helpers in the system check the files under /lib.
To see examples of code (JS and CSS) that the template exposes read EXAMPLE.md

Development

Start the project in development mode as follows:

$ middleman

Deployment

On Netlify, set up production environment variables - there should be the same items that are present in .env.

Features and Tools

This template comes with the following features and tools:

middleman-dato: An extension for connect with DatoCMS.
middleman-svg: An extension for inlining SVGs in your views.
middleman-minify-html: Minifies whitespace around HTML when the site is built.
middleman-search_engine_sitemap: An extension to manage sitemap.
Sass: CSS pre-processor.
Slim: Templating engine to reduce the syntax to the essential parts.
lazyload: Delay loading of images until user scrolls to them
AOS: Animate On Scroll Library
animeJS: Anime.js is a lightweight JavaScript animation library with a simple, yet powerful API
fancybox: JavaScript lightbox library for presenting various types of media

cantierecreativo/middleman-template