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
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
Now you can:
$ eleventy --version
0.11.0
package.json
For daily development you can use package.json
instead:
{
...
"devDependencies": {
"@11ty/eleventy": "^0.11.0"
}
}
You should do this first
$ npm install
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
.
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",
}
};
};
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 }}
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)
.
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
.
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
.
Browser Preview
Just check it out in you favorite 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
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.