Eleventyでサイトを作り直した

はてなダイアリーでブログを始めたのが 2006年の4月。途中で WordPress に乗り換え、今年の春でまる20年になる。

だからというわけでもないんだけど、サイトを Eleventy という SSG（Static Site Generator: 静的サイトジェネレータ）で作り直した。

「SSGで作り直す」のは今回が初めてではなくて、以前に Gatsby で作ってみたことがある……のだけれど、その時は結局「作ってみた」だけで終わってしまった。今回はちゃんと WordPress から記事も移行した。

Eleventy（11tyとも）にはスタータープロジェクトという、サイトのひな型がいくつも公開されていて、今回は Eleventy Markdown Prime を使わせてもらった。サイトのデザインはほぼそのままだ。

WordPressからの記事の移行には、エクスポートした XML ファイルを Markdown に変換する CLI ツールを書いて使った（このツールも公開するかも）。

ひととおり出来上がって（いろいろ不備はあるものの）、GitHub に上げ、Netlify でホストしていたGatsbyで作ったサイトをこの新しいものに差し替えた。この記事は Markdown で書いている。

参考にしたサイト、ページ

• Eleventy is a simpler static site generator （公式サイト）
• Starter Projects — Eleventy - 11ty
• Eleventy（11ty）で洗練された静的サイトを作成する方法 | kinsta
• Eleventy入門(第1回) - 11tyで手早く静的サイトを作成する | 豆蔵デベロッパーサイト

など。

既知の不具合

• いくつか、ビルド時にエラーになる記事があった。原因不明。
• 記事にはソースコードが多く載せてあるけど、コード中にマスタッシュがあるとエラーになる。どうやら Eleventy が中身を置き換えようとしてエラーになるようだ。
• コードブロックは Prism.js でシンタックスハイライトされるけど、言語名が指定されていないとスタイルが適用されず、本文と見た目上の区別がしにくい。
• 記事中の画像の参照先が WordPress のまま。
• 同じ日付の記事の順番がおかしい。これは WordPress のサイトでも同じで、はてなダイアリーから移行した時の不具合かも。
• 書籍の紹介に使っている、AMAZONへのリンクが壊れている。
• Masjax.jsのインライン数式がなぜか単独の行になってしまう。

WordPress からの変換ツールを書いて使ったのでだいぶ楽ができたはずだけれど、やっぱり手で直さないといけないところは発生する、というか、した。コードブロックの件はその代表だ。最近5年分くらいの記事には対応したけど、あと15年分（しかも最近より更新頻度が高かった）は未対応。気が遠くなりそう。