ssg  
Where to Discuss?

Local Group

Preface

Goal: Show Minimal Homepage in Eleventy.

The first three chapter use only html without any stylesheet. So you have understanding of eleventy, without the burden of learning stylesheet in the same time.

Source Code

This article use tutor-01 theme. We will create it step by step.

Layout Preview for Tutor 01

Nunjucks: Layout Preview for Tutor 01


1: Install Eleventy

Eleventy run under NodeJS. It means you can have eleventy in most OS, such as Windows and Linux.

Global

$ npm i -g @11ty/eleventy

11ty: Install: Global

Now you can:

$ eleventy --version
0.11.0

11ty: Version

package.json

For daily development you can use package.json instead:

{
  ...
  "devDependencies": {
    "@11ty/eleventy": "^0.11.0"
  }
}

You should do this first

$ npm install

11ty: Install: package.json

Nunjucks

Where is Nunjucks?

Why don’t I include nunjucks in package.json?

Because nunjucks is already in eleventy package:

  • node_modules/@11ty/eleventy/node_modules/nunjucks

2: Minimal Configuration

Due to eleventy flexibility, there is no such thing as eleventy init project. You have to do it yourself.

Directory Tree: Minimal Artefacts

Consider create new Eleventy site manually.

$ tree
.
├── .eleventy.js
├── package.json
└── views
    ├── _includes
    │   └── layouts
    │       └── home.njk
    └── index.html

11ty: Tree: Views only

.

You need this configuration artefact:

You need these two artefacts:

Note the dot in .eleventy.js.

.eleventy.js

First thing first: The configuration Start from the very simple one.

module.exports = function(eleventyConfig) {

  // Return your Config object
  return {
    // Templating Engine
    templateFormats: [
      "njk",
      "html"
    ],

    // Directory Management
    dir: {
      // default
      input: "views",
      output: "_site",
      // ⚠️ This value is relative to your input directory.
      includes: "_includes",
    }
  };
};

11ty: A Very Simple Configuration

If you do not understand about 11ty configuration, always refer to official documentation.

Directory management

Consider have a look at a part of this config.

    // Directory Management
    dir: {
      // default
      input: "views",
      output: "_site",
      // ⚠️ This value is relative to your input directory.
      includes: "_includes",
    }

In directory tree manner, this could be represent as below:

$ tree -a
.
├── _site
└── views
    └── _includes

.


Minimal Views

Consider create our very first index page.

  • Page: index.html

  • Template: home.njk

Page: index.html

---
layout    : layouts/home
---

  <p>To have, to hold, to love,
  cherish, honor, and protect?</p>
  
  <p>To shield from terrors known and unknown?
  To lie, to deceive?</p>

  <p>To live a double life,
  to fail to prevent her abduction,
  erase her identity, 
  force her into hiding,
  take away all she has known.</p>

Note I in the frontmatter. That I want to pass the content into layouts/home.njk.

---
layout    : layouts/home
---

I use the yaml frontmatter. But you may use other format as well.

Layout: home.njk

<html>
<head>
  <title>Your mission. Good Luck!</title>
</head>
<body>
  <blockquote>
    <i>Your mission, should you decide to accept it.</i>
  </blockquote>

  <main role="main">
    <strong>This is a page kind layout.</strong>
    <br/>

    {{ content | safe }}
  </main>

  <blockquote>
    <i>As always, should you be caught or killed,
    any knowledge of your actions will be disavowed.</i>
  </blockquote>
</body>
</html>

Pay attention to nunjucks statement here:

    {{ content | safe }}

11ty: NERDTree Nunjucks

Build

Now that the artefact are ready, you can build eleventy site.

$ eleventy
Writing _site/index.html from ./views/index.html.
Wrote 1 file in 0.51 seconds (v0.11.0)

11ty: Build Site

.

Directory Tree: With Build

Consider revisit our directory tree. This time with generated _site:

$ tree -a
.
├── .eleventy.js
├── package.json
├── _site
│   └── index.html
└── views
    ├── _includes
    │   └── layouts
    │       └── home.njk
    └── index.html

4 directories, 5 files

11ty: Tree with Build

.


4: Running for the First Time

You can also run eleventy right away, and get the result instantly in web browser using browsersync.

$ eleventy --serve
Writing _site/index.html from ./views/index.html.
Wrote 1 file in 0.44 seconds (v0.11.0)
Watching…
[Browsersync] Access URLs:
 ---------------------------------------
       Local: http://localhost:8080
    External: http://192.168.43.133:8080
 ---------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 ---------------------------------------
[Browsersync] Serving files from: _site

11ty: eleventy –serve, with browsersync

.

Browser Preview

Just check it out in you favorite browser.

11ty: Preview in Browser

Multiple Eleventy

It is common to work with multiple Eleventy at one time, for one reason or another. You can achieve it by passing browsersync parameter argument.

$ eleventy --serve --port=5000
Writing _site/index.html from ./views/index.html.
Wrote 1 file in 0.32 seconds (v0.11.0)
Watching…
[Browsersync] Access URLs:
 ---------------------------------------
       Local: http://localhost:5000
    External: http://192.168.43.133:5000
 ---------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 ---------------------------------------
[Browsersync] Serving files from: _site

11ty: eleventy –serve –port=5000

Now you are ready to explore inside Eleventy. .


What is Next ?

Consider continue reading [ Eleventy - Layout ]. We are going to make theme from scratch, with pure HTML without any CSS.

Thank you for reading.