Eleventy環境構築

Eleventyとは

• 静的サイトジェネレーター
• SPAではなくHTMLを生成するタイプ

インストール

npm install @11ty/eleventy
# or
yarn add @11ty/eleventy

.eleventy.js設定

• プロジェクト構成はAppendix-1 プロジェクト構成を参照

markdownライブラリのカスタマイズ

• Markdownの#で生成されるHxタグを一段階ずつレベルを下げたい（H1タグにはTitleを入れたいので）
• markdown-itのレンダリングをカスタマイズするプラグインを作成すればよい

/**
 * markdown-itのHnタグのレベルを一段階下げるプラグイン
 */

module.exports = (md) => {

    // original rules
    const originalHeadingOpen = md.renderer.rules.heading_open
    const originaHeadingClose = md.renderer.rules.heading_close
    // tag covert rules
    const convertTable = {
        'h1': 'h2',
        'h2': 'h3',
        'h3': 'h4',
        'h4': 'h5',
        'h5': 'h6',
        'h6': 'h6',
    }

    // override rules
    md.renderer.rules.heading_open = (tokens, idx, options, env, render) => {
        tokens[idx].tag = convertTable[tokens[idx].tag]
        return originalHeadingOpen != null ? originalHeadingOpen.apply(this, arguments) : render.renderToken(tokens, idx, options, env, render)
    }
    // override rules
    md.renderer.rules.heading_close = (tokens, idx, options, env, render) => {
        tokens[idx].tag = convertTable[tokens[idx].tag]
        return originaHeadingClose != null ? originaHeadingClose.apply(this, arguments) : render.renderToken(tokens, idx, options, env, render)
    }
}

• .eleventy.js内で↓のように設定する

const markdown = require("markdown-it")
const headinglevel = require("./plugin/heading-level-plugin")

// markdown-it config
const md = markdown({...})
.use(headinglevel)

デフォルトテンプレートを指定

• src/_data/layout.jsonに↓のように指定

"default.njk"

• .eleventy.jsで指定したテンプレートのエイリアスか、テンプレートへのパスを指定する
• 上の例ではsrc/_includes/default.njkがあることを想定
• 以前のバージョンではsrc/_data/layout.jsに↓の記述で良かったが、バージョンアップで挙動が変わり使えなくなった

module.exports = "default.njk"

参考資料

• Eleventy, a simpler static site generator
• Overview — Eleventy
• 11ty/eleventy: A simpler static site generator. An alternative to Jekyll. Transforms a directory of templates (of varying types) into HTML.

Appendix-1 プロジェクト構成

ディレクトリ構成

tree -a -I .git
.
├── .eleventy.js
├── .env
├── .gitignore
├── Dockerfile
├── README.md
├── docker-compose.yaml
├── package.json
├── src
│   ├── _data
│   ├── _includes
│   └── index.md
└── yarn.lock

.eleventy.js

• eleventyの設定ファイル

const markdown = require("markdown-it")
const mdTOC = require("markdown-it-table-of-contents")
const mdAnchor = require("markdown-it-anchor")
const mdImageFigures = require("markdown-it-image-figures")
const headinglevel = require("./plugin/heading-level-plugin")
const md5 = require("md5")

const customSlugify = (text) => md5(text);

// markdown-it config
const md = markdown({
    html: true,
    breaks: false,
    linkify: false
})
md.use(headinglevel)
md.use(mdAnchor, {
    slugify: customSlugify,
})
md.use(mdTOC, {
    includeLevel: [1, 2],
    slugify: customSlugify,
    containerClass: 'toc',
})
md.use(mdImageFigures, {
    figcaption: false,
    figureClass: 'fig',
    imageClass: 'img',
})

module.exports = (conf) => {
    conf.setLibrary("md", md)
    conf.addPassthroughCopy("src/**/*.css")
    conf.addPassthroughCopy("src/**/*.gif")
    conf.addPassthroughCopy("src/**/*.png")
    conf.addPassthroughCopy("src/**/*.jpg")
    conf.addPassthroughCopy("src/**/*.svg")
    conf.addPassthroughCopy("src/**/*.pdf")
    return {
        dir: {
            input: "src",
            output: "dist",
        }
    }
}

Dockerfile

FROM node:23.10

WORKDIR /app

COPY . /app

RUN yarn install

CMD ["yarn", "start"]

docker-compose.yaml

services:
    app:
        environment:
            PORT: ${PORT}
        build:
            context: .
            dockerfile: Dockerfile
        volumes:
            - type: bind
              source: "."
              target: "/app"
        command: ["yarn", "start"]
        ports:
            - ${PORT}:8080

package.json

{
    "name": "eleventy-example",
    "version": "0.0.0",
    "private": true,
    "main": "index.js",
    "scripts": {
        "start": "eleventy --serve",
        "build": "eleventy",
        "build:clean": "rm -rf dist && eleventy",
        "build:debug": "DEBUG=Eleventy* eleventy"
    },
    "dependencies": {
        "@11ty/eleventy": "^3.0.0",
        "markdown-it-anchor": "^9.2.0",
        "markdown-it-image-figures": "^2.1.1",
        "markdown-it-table-of-contents": "^0.9.0",
        "md5": "^2.3.0"
    }
}