Static Site - Eleventy SSG in action
Tags: webdev, static, appseed
Published: 2019-09-29 18:16:28

---
title: Static Site - Eleventy SSG in action
published: true
description: A short-list with UI-ready boilerplates coded on top of Eleventy Static Site Generator
cover_image: https://raw.githubusercontent.com/app-generator/static/master/products/eleventy-material-kit-pro-intro.gif
tags: 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](https://www.11ty.io/) [static site](https://appseed.us/static-site/) generator used to deliver simple static websites and landing pages.  

> *Thanks for reading!* - Content provided by **[App Generator](https://appseed.us/)**.

---

## ✨ [What is Eleventy](https://docs.appseed.us/content/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](https://jekyllrb.com/) and [Panini SSG](https://github.com/foundation/panini) 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](https://appseed.us/boilerplate-code)

All Eleventy boilerplates presented here are UI-ready and equipped with a basic set of tools: 
- [Node Sass/SCSS](https://github.com/sass/node-sass), PostCSS, CSSnano
- **Webpack**, Babel
- [Light-server](https://github.com/txchen/light-server) for live edit 
- UI Kits provided by well-known [Html5Up](https://html5up.net/) agency

---

## ✨ [Eleventy TXT](https://appseed.us/static-site/eleventy-html5up-txt)

**Static Site** Links & Credits: [demo](https://eleventy-html5up-txt.appseed.us/), [sources](https://github.com/app-generator/eleventy-html5up-txt), Design [HTML5up TXT](https://html5up.net/txt)

![Eleventy TXT - Gig animated Intro.](https://raw.githubusercontent.com/app-generator/static/master/products/eleventy-html5up-txt-intro.gif) 

> 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](https://appseed.us/static-site/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.](https://raw.githubusercontent.com/app-generator/static/master/products/eleventy-material-kit-pro-intro.gif) 

This beautiful UI Kit is fully migrated to the [Nunjucks templating](https://mozilla.github.io/nunjucks/) system and uses a complete set of tooling: [Webpack](https://webpack.js.org/), **Babel**, **PostCSS**, **CSSnano**, Autoprefixer, and **Light-Server** used for hot reload. 

Product links: the [Eleventy Material Kit Pro](https://appseed.us/static-site/eleventy-material-kit-pro) official page, Live [DEMO](https://eleventy-material-kit-pro.appseed.us/) and the [Eleventy Material Kit repository](https://github.com/app-generator/eleventy-material-kit-pro) used for bug tracking.    

---

## ✨ [Eleventy Miniport](https://appseed.us/static-site/eleventy-html5up-miniport)

**Static Site** Links & Credits: [demo](https://eleventy-html5up-miniport.appseed.us/), [sources](https://github.com/app-generator/eleventy-html5up-miniport), Design [HTML5up TXT](https://html5up.net/miniport)

![Eleventy Miniport - Gig animated Intro.](https://raw.githubusercontent.com/app-generator/static/master/products/eleventy-html5up-miniport-intro.gif) 

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

---

## ✨ [Eleventy Paper Kit Pro](https://appseed.us/static-site/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.](https://raw.githubusercontent.com/app-generator/static/master/products/eleventy-paper-kit-pro-intro.gif) 

Product links: the [Eleventy Paper Kit Pro](https://appseed.us/static-site/eleventy-paper-kit-pro) official page, Live [DEMO](https://eleventy-paper-kit-pro.appseed.us/) and the [Eleventy Material Kit repository](https://github.com/app-generator/eleventy-paper-kit-pro) used for bug tracking.    

---

## ✨ [Eleventy Dopetrope](https://appseed.us/static-site/eleventy-html5up-dopetrope) 

**Static Site** Links & Credits: [demo](https://eleventy-html5up-dopetrope.appseed.us/), [sources](https://github.com/app-generator/eleventy-html5up-dopetrope), Design [HTML5up TXT](https://html5up.net/dopetrope)

![Eleventy Dopetrope- Gig animated Intro.](https://raw.githubusercontent.com/app-generator/static/master/products/eleventy-html5up-dopetrope-intro.gif) 

> 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](https://appseed.us/static-site/eleventy-html5up-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](https://eleventy-html5up-astral.appseed.us/), [sources](https://github.com/app-generator/eleventy-html5up-astral)

![Eleventy Dopetrope- Gig animated Intro.](https://raw.githubusercontent.com/app-generator/static/master/products/eleventy-html5up-astral-intro.gif) 

---

## ✨ [Eleventy Now UI Kit Pro](https://appseed.us/static-site/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.](https://raw.githubusercontent.com/app-generator/static/master/products/eleventy-now-ui-kit-pro-intro.gif) 

Product links: the [Eleventy Now UI Kit Pro](https://appseed.us/static-site/eleventy-now-ui-kit-pro) official page, Live [DEMO](https://eleventy-now-ui-kit-pro.appseed.us/) and the [Eleventy Now UI Kit repository](https://github.com/app-generator/eleventy-now-ui-kit-pro) used for bug tracking. 

--- 

## ✨ [Eleventy Fractal](https://appseed.us/static-site/eleventy-html5up-fractal)

**Static Site** Links & Credits: [demo](https://eleventy-html5up-fractal.appseed.us/), [sources](https://github.com/app-generator/eleventy-html5up-fractal), Design [HTML5up TXT](https://html5up.net/fractal)

![Eleventy Fractal- Gig animated Intro.](https://raw.githubusercontent.com/app-generator/static/master/products/eleventy-html5up-fractal-intro.gif) 

--- 

### 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](https://dev.to/sm0ke/100-open-source-apps-built-with-automation-tools-3jmj)

---

Thank You!

---

## Resources

- [Eleventy site generator](https://www.11ty.io/) - the official site
- [Static Sites Boilerplates](https://github.com/app-generator/static-site) - full index published on Github
- [Eleventy Intro](https://snipcart.com/blog/11ty-javascript-static-site-generator-tutorial) - a nice Eleventy tutorial for newcomers
- [Static Site](https://appseed.us/static-site) - index provided by AppSeed