<aside> ⚠️ This is not a tutorial to create an 11ty website, this's a note! You can find some very new and useful techniques on this note alongside the official documentation.

</aside>

Installation

👉 First, install nodejs. 👉 Using this starter template or Google's high performance statrer theme (recommended).

# Install dependencies
npm install

You should follow the installation steps given in the theme you choose.

Setting up with Netlify

Sometimes, 11ty takes too much time to build (especially on the task of optimizing images. On my site, it takes almost 10 minutes). You shouldn't use branch master to build you site because every time you make a push, Netlify will rebuild your whole site. You should create and use a new branch, so-called prod instead.

• Idea 1 — manually build but should not use many times

The weakness of Idea 1 is that you let netlify build again your whole site with its resources. That's why it takes too much time! Remember that, you have only 300 free minutes to build.

• Idea 2 — build locally and push _site only
• Example workflow with v5.dinhanhthi.com (version 5)

Templating

SCSS to CSS

• If you use node-sass
• If you use rollup (like the version 5 of this site)
• If you use parcel

Using postcss?

# Install it and its plugin first
npm install autoprefixer postcss postcss-cli

# Create postcss.config.js on the same folder as package.json
module.exports = {
  plugins: [require("autoprefixer")],
};

// npm command in package.json
"css:prefix": "postcss src/css/main.css --use autoprefixer --replace true"