loading...
Cover image for Static Site - Eleventy SSG in action

Static Site - Eleventy SSG in action

sm0ke profile image Sm0ke Updated on ・5 min read

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.


In a rush? The source code for all Eleventy boilerplates is published on Github. In case you like a particular project, just grab the code and use it in your next project. Thank you!


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:


Eleventy TXT

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

Eleventy TXT - Gig animated Intro.

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.

Eleventy Material Kit Pro - Gif Animated Intro.

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

Eleventy Miniport - Gig animated Intro.

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.

Eleventy Paper Kit Pro - Gif Animated Intro.

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

Eleventy Dopetrope- Gig animated Intro.

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

Eleventy Astral

This boilerplate uses the same code-base and comes with a Webpack script that encapsulates Babel, PostCSS, and Light-server for LIVE edit.

Links: demo, sources

Eleventy Dopetrope- Gig animated Intro.


Eleventy Now UI Kit Pro

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

Eleventy Now UI Kit Pro - Gif Animated Intro.

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


Eleventy Fractal

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

Eleventy Fractal- Gig animated Intro.


A few words about the process

All boilerplates listed in this article are generated by the AppSeed platform, using a semi-automated process:

  • Flat UI processing to become production-ready
  • Boilerplate provisioning with modules, tools, and UI components

Using this technique I've generated 100+ open-source apps (free & commercial) and publish the code on Github - more information in this article:

How I’ve built 100+ open-source apps with automation tools


Thank You!


Resources

Posted on by:

sm0ke profile

Sm0ke

@sm0ke

#Automation, my favorite programming language

Discussion

markdown guide
 
 

Thank you, glad you like it :).
I've published more on this link: Static Sites.