11ty and Nunjuck

Warning

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.

Installation

First, install nodejs.
Using this starter template or Google’s high performance statrer theme (recommended). You should follow the installation steps given in the theme you choose

Setting & Deploy with Netlify

Sometimes, 11ty takes to much time to build (especially on the task of optimizing images). You shouldn’t use branch main to build your site because every time you make a push to main branch, Netlify will rebuild & deploy it. You should create a new branch base on main branch. It so-called netlify

Idea 1 - manually build but should not use many times On Netlify, go to Site Settings → Build & Deploy
- Build settings:
  - Build command: npm run build (depends on your site)
  - Published directory: _site (depends on your site)
  - Builds: Active builds
- Deploys contexts:
  - Production branch: netlify (the same as the your created branch)
  - Deploy preview: Don’t deploy pull request
  - Brand deploys: Deploys only the production branch
Idea 2 - Build locally and push _site only Remember that you have only 300 free minutes to build with Free Plan

Templating

SCSS to CSS

If you use node-sass

# folder structure
|- css
|  |- main.scss
|  |- components
|  |  |- ..

@import '../components/navbar'

{
    "scripts": {
       "css-build": "node-sass css/main.scss - o css",
    }
}

<head>
  ...
  <link rel="stylesheet" href="css/main.css" />
  ...
</head>

If you use rollup

# folder structure
|- css
|  |- main.scss
|  |- components
|  |  |- ..

@import "./components/font"; // without extension

{
    "scripts": {
        "js-build": "rollup -c rollup.config.js",
    }
}

import scss from "rollup-plugin-scss";

export default [
  {
    // plugin 1
  },
  {
    input: "css/main_input.js", // where the input file containing import of main.scss
    output: {
      file: "css/main.js", // intermediate file which can be translated to css/main.css
      format: "esm", // still not know
    },
    plugins: [
      scss(), // there are other configs
    ],
  },
];

<!-- in <head> -->
<link rel="stylesheet" href="css/main.css" />

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"

# Watch (cannot use with `--replace`)
postcss --watch main.css -o main_.css --use autoprefixer

Nunjucks inside css

<style>
  .bg {
    background-image: url({{ bg-image }});
  }
</style>

<!-- or -->
<div style="background-image: url({{ bg-image }});"></div>

Bootstrap + 11ty

👉 Bootstrap’s homepage

👉 How to Isolate Bootstrap CSS to Avoid Conflicts (using LESS)

TailwindCSS

npm install -D tailwindcss postcss autoprefixer

# init tailwind config file
npx tailwindcss init

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

@tailwind base;
@tailwind components;
@tailwind utilities;

content: ["./src/**/*.{njk,md}", "./src/**/*.svg",]

<head>
  <link rel="stylesheet" href="{{ '/css/tailwind.css' | url }}">
</head

"scripts": {
  "dev:css": "tailwindcss -i css/tailwind.css -o _site/css/tailwind.css --watch --postcss",
  "build:css": "tailwindcss -i css/tailwind.css -o _site/css/tailwind.css --postcss"
}