もともと Asciidoctorを使って構築していたこのWebサイトを Eleventy に移行しました。

Eleventyは、 JavaScriptで書かれた静的サイトジェネレーターで、Hugoに次ぐパフォーマンスの高さと複数のテンプレート言語を使えることが特徴です。 また、ツールの使い方が簡単で、3分で独自のWebサイトを構築するチュートリアルがあります。

Build an 11ty Site in 3 Minutes | YouTube

AsciiDocの導入

Eleventyは、複数のマークアップ言語やテンプレート言語に対応していますが、 AsciiDocにはデフォルトで対応していませんので、以下のプラグインを導入する必要があります。

saneef/eleventy-plugin-asciidoc

導入方法

パッケージのインストール

npm install eleventy-plugin-asciidoc

コンフィグファイルの編集

ファイル名 .eleventy.js
const eleventyAsciidoc = require("eleventy-plugin-asciidoc");

module.exports = function (eleventyConfig) {
  eleventyConfig.addPlugin(eleventyAsciidoc, {
    /* 属性の設定 */
    attributes:[
        'toc=center',
        'toc-title=目次'
    ],
    /* セーフモード変更 */
    safe: 'unsafe',
  });
};
Note

Asciidoctor.jsの Convert options で、 セーフモードを設定する safe オプションの初期値に secure が設定されています。 セーフモードのレベルが secure の場合、AsciiDocから別のファイルを読み込むための include:[] が使えないなどかなり不便に状態になります。

ここでは、 Asciidoctor と同じ unsafe に設定しておきます。unsafe は、親ディレクトリ以外の場所にあるファイルも読み込むことができます。

Safe Modes | Asciidoctor Docs
Tip
 参考までにこのサイトの設定例です。

特定のファイルを無視する

include:[] で読み込んだファイルは、大抵Webサイトの方にコピーする必要はありませんので、Eleventyの設定でコピーや変換の対象外にします。

入力ディレクトリまたはプロジェクトのルートディレクトリに .eleventyignore ファイルを追加するか、APIによる設定変更が可能です。

Ignore Files — Eleventy

.eleventyignore ファイルで無視する場合

ファイルに無視したいパスを列挙します。

ファイル名 .eleventyignore
src/**/examples/

APIで設定変更する場合

ignores.add() メソッドで無視したいパスを追加できます。

ファイル名 .eleventy.js
module.exports = function(eleventyConfig) {
    eleventyConfig.ignores.add("src/**/examples/");
};