Last modified on 19 Oct 2020.

Installation

๐Ÿ‘‰ First, install nodejs.
๐Ÿ‘‰ Using this starter template.

npm install
# modify informations in _data/metadata.json
npx eleventy
npx eleventy --serve
# localhost:8080/
# or build auto when template changes
npx eleventy --watch
# or in debug mode
DEBUG=* npx eleventy

On Netlify, change in Deploy Setting:

npm run build

General

  • File name: first-post.md (donโ€™t need date like jekyllโ€™s)

SCSS to CSS

We use parcel.

# install
npm i parcel-bundler
npm i npm-run-all -D
# folder structure
_assets/css/main.scss
___________/_bootstrap.scss
_______/js/main.js
# main.scss
@import "./bootstrap";
# main.js
import "./../css/main.scss";
# package.json
"scripts": {
    "start": "npm-run-all --parallel dev:*",
    "build": "run-s prod:*",
    "dev:eleventy": "eleventy --serve",
    "dev:parcel": "parcel watch ./_assets/js/main.js --out-dir ./_site/assets",
    "prod:eleventy": "eleventy",
    "prod:parcel": "parcel build ./_assets/js/main.js --out-dir ./_site/assets",
},
# run
npm start

Bootstrap + 11ty

๐Ÿ‘‰ Bootstrapโ€™s homepage
๐Ÿ‘‰ How to Isolate Bootstrap CSS to Avoid Conflicts (using LESS) | Formden.com

# install
npm i bootstrap jquery popper.js

Using alongside with section โ€œSCSS to CSSโ€.

# folder structure
_assets/css/main.scss
_______/vender/_bootstrap.scss
// main.scss
@import "./vender/bootstrap";
// _bootstrap.scss
// all components
// @import "./../../../node_modules/bootstrap/scss/bootstrap.scss";

// Required
// check more: https://getbootstrap.com/docs/4.5/getting-started/theming/#importing
@import "./../../../node_modules/bootstrap/scss/functions";
@import "./../../../node_modules/bootstrap/scss/variables";
@import "./../../../node_modules/bootstrap/scss/mixins";

Layout

mkdir _includes/layouts
touch _includes/layouts/post.njk
// create an alias
module.exports = function(eleventyConfig) {
    eleventyConfig.addLayoutAlias('post', 'layouts/post.njk');
};
# update changes
touch .eleventy.js
# then use
---
layout: post
---

Includes

Split layout into parts and include them in the main file.

/_includes/layout/base.njk
/_includes/shared/header.njk

# in base.njk
{% include "shared/header.njk" %}

Frontmatter

---
title: Title of the post
description: description of the post
date: 2020-09-11
layout: layouts/post.njk
---
---
tags:
  - default
# or
tags: [tag 1, tag 2]
---

List of post

Code syntax highlight

Code syntax highlight: Need this plugin. List of supported languages.

// block, and
``` js/1-2,4
// codes
```
// or
``` js/2/4
// codes
```

Next / Previous post

<ul>
  {%- set nextPost = collections.posts | getNextCollectionItem(page) %}
  {%- if nextPost %}<li>Next: <a href="{{ nextPost.url | url }}">{{ nextPost.data.title }}</a></li>{% endif %}
  {%- set previousPost = collections.posts | getPreviousCollectionItem(page) %}
  {%- if previousPost %}<li>Previous: <a href="{{ previousPost.url | url }}">{{ previousPost.data.title }}</a></li>{% endif %}
</ul>

Math equations

KaTeX: using markdown-it-katex,

// .eleventy.js
const markdownIt = require("markdown-it");
const markdownItKatex = require('@iktakahiro/markdown-it-katex');

let markdownLibrary = markdownIt()
markdownLibrary.use(markdownItKatex);
<!-- header.njk -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.11.1/katex.min.css">

Mathjax: using markdown-it-mathjax

References

  1. Moving from WordPress to Eleventy
  2. From Jekyll to Eleventy - Webstoemp
  3. Official website.
  4. Nunjucks official website
  5. Create a bootstrap starter theme in eleventy