Middleman 4 Boilerplate
This is a boilerplate for Middleman 4.
You need to install the following tools in order to install and use this boilerplate.
$ bundle install
$ yarn install
$ middleman [server] # run a local development server
$ middleman build # build the static files
$ middleman deploy # deploy the built site
boilerplate/
├── data/
│ └── site.yml
│ └── ...
├── helpers/
│ └── ...
├── node_modules/
│ └── ...
├── source/
│ ├── assets/
│ └── fonts/
│ └── images/
│ └── javascripts/
│ └── stylesheets/
│ └── about.html.slim
│ └── index.html.slim
│ └── ...
You'll find the main settings of your website in data/site.yml
.
This is where you'll set your website name, baseline, url, author name, etc.
Three pages are already provided for you:
Feel free to edit the home page and/or remove the about page.
Four images are provided:
logo.jpg
mainly used as faviconbanner-meta.jpg
used for meta tag cardsAgain, feel free to change or remove them.
Hint: Have a look at the homepage template to see how to inline SVG images.
Have a look at source/assets/stylesheets/all.css.scss
to have an overview of the architecture.
Structure is as follows:
To install a vendor stylesheet with Yarn, use the following command:
$ yarn add --dev foundation-sites # for instance, for Foundation Sites
Any stylesheet added with Yarn can be imported into your stylesheet file.
To import a stylesheet, just use @import
with the path to the file. It should be a path relative to the node_modules/
folder.
For instance, we bundled this boilerplate with foundation-sites
. The file we want to load is node_modules/foundation-sites/scss/foundation.scss
. Todo so, in Vendors section of all.css.scss
we added the following line:
@import "foundation-sites/scss/foundation";
We also provide a style guide page. To have a look at it, just open the following link http://localhost:4567/style-guide.html
Anytime you change a color / font, add a vendor plugin or a component, this page should be updated in order to showcase what's available to design your pages.
We provide a default preset of meta tag rules. They're based on 2 things:
data.site
hash defined in data/site.yml
frontmatter
variables provided in every HTML page templateThe following rules are applied:
page_title
in combination with data.site.name
. Otherwise, only uses data.site.name
.page_title
. Otherwise, fallbacks to data.site.name
.summary
and description
. Otherwise, fallbacks to data.site.baseline
banner_picture
and cover_picture
. Otherwise, fallbacks to banner-meta.jpg
data.site.name
data.site.twitter
data.site.geocoding
hash.data.site.url
and the current page.If you want to change some of these rules, have a look at helpers/meta_tags_helper.rb
Feel free to fine tune the frontmatter variables on all your pages.
As a recap, here are the variables that can be customized per page:
page_title
page_title
summary
or description
banner_picture
or cover_picture
Choosing a Javascript pipeline. Might be Webpack.
This project is released under the GPL License.