Static Site - Eleventy SSG in action

#webdev #static #appseed

Hello Coders,

In my daily work, I'm using tools and generators to skip over the repetitive manual work involved in the development process. This article presents a short-list with UI-ready boilerplates built on top of Eleventy static site generator used to deliver simple static websites and landing pages.

Thanks for reading! - Content provided by App Generator.

✨ What is Eleventy

For newcomers, 11ty (or Eleventy) is a simple static site generator written in JavaScript that transforms a directory of templates of varying types (Liquid, Mustache, PUG, Markdown) into HTML ready to be deployed in production.

I've generated before static sites and simple landing pages using Jekyll and Panini SSG but for now, I found Eleventy the most attractive one, mostly based on the flexibility he offers.

First, Eleventy is not a Javascript Framework. The engine just uses Javascript to translate the source files into HTML and the injection of Eleventy-specific code is optional and disabled by default.
Most static site generators use a single type for the source files: Markdown is probably the most popular, Liquid, Handlebars .. etc. Well, Eleventy supports many formats and the developer can choose the type is most comfortable with.
Eleventy can be easily integrated into existing projects, based on his flexible configuration.
Being a part of the NPM ecosystem, any compatible Node.js module can be used along with Eleventy.

✨ Getting starting

As any other NPM module, to install Eleventy we need a single line of code:

npm install -g @11ty/eleventy

To test the translation of a single file just type:

eleventy --input=SOURCE_FILE.md

By default, the output is saved in _site directory, but this default setup can be overwritten by configuration or --output CLI option

eleventy --input=src_dir --output=dist

In this sample, Eleventy will translate all files from src_dir into the destination directory specified by the output option.

The boilerplate code

All Eleventy boilerplates presented here are UI-ready and equipped with a basic set of tools:

Node Sass/SCSS, PostCSS, CSSnano
Webpack, Babel
Light-server for live edit
UI Kits provided by well-known Html5Up agency

✨ Eleventy TXT

Static Site Links & Credits: demo, sources, Design HTML5up TXT

Build from sources

$ git clone https://github.com/app-generator/eleventy-html5up-txt.git
$ cd eleventy-html5up-txt

$ yarn # install modules
$ yarn dev # start in development mode

$ # app is running on http://localhost:4000

If all goes well, the app should be visible in the browser.

✨ Eleventy Material Kit Pro

This is the first commercial product prototyped in Eleventy that uses a PRO Ui Kit, crafted by the Creative-Tim Agency.

This beautiful UI Kit is fully migrated to the Nunjucks templating system and uses a complete set of tooling: Webpack, Babel, PostCSS, CSSnano, Autoprefixer, and Light-Server used for hot reload.

Product links: the Eleventy Material Kit Pro official page, Live DEMO and the Eleventy Material Kit repository used for bug tracking.

✨ Eleventy Miniport

Static Site Links & Credits: demo, sources, Design HTML5up TXT

To build the static site from sources, please access and follow the build instructions listed in the README file.

✨ Eleventy Paper Kit Pro

This is the second commercial product prototyped in Eleventy that uses a PRO Ui Kit, crafted by the Creative-Tim Agency.

Product links: the Eleventy Paper Kit Pro official page, Live DEMO and the Eleventy Material Kit repository used for bug tracking.

✨ Eleventy Dopetrope

Static Site Links & Credits: demo, sources, Design HTML5up TXT

Build from sources

$ git clone https://github.com/app-generator/eleventy-html5up-dopetrope.git
$ cd eleventy-html5up-dopetrope

$ yarn # install modules
$ yarn dev # start in development mode

$ # app is running on http://localhost:4000