Last modified on 01 Oct 2021.

Installation

👉 First, install nodejs.
👉 Using this starter template.
👉 My main source code when learning.

npm install
# modify info in _data/metadata.json

npm start
# localhost:8080/

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

Figures

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
  6. Creating an 11ty Plugin - SVG Embed Tool - bryanlrobinson.com

•Notes with this notation aren't good enough. They are being updated. If you can see this, you are so smart. ;)