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

1. Install or set Ruby (2.6.2) with RBENV:

$ rbenv install/set 2.6.2

2. Install or use Middleman gem:

$ gem install middleman

3. Install or set Node (9.3.0) with NVM:

$ nvm install/use 9.3.0

4. 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

License

Copyright © 2019 CantiereCreativo. This is free software, and may be redistributed under the terms specified in the LICENSE file.