はじめに
このブログは11tyというJavaScriptのフレームワークで作成しております。私はJavaScriptフレームワークの経験がほとんどない状態でしたが、11tyは思いのほかスムーズに導入できました。本記事では、11tyの具体的な説明というよりは、11tyを選定した理由や使用感について記載します。
11tyを選んだ理由
11tyでは、Liquidという言語をテンプレートエンジンとして使用することができます。私は業務でLiquidという言語を使用しており、そのナレッジが活かせそうだったのが、選定の大きな理由でした。「ブログを作りたくて技術を選定した」というより、「Liquidを使って何かしたかった結果、ブログの作成ができそうだった」というのが大きな動機でした。
11tyについて
11tyとは、シンプルな静的サイトジェネレータを謳っているもので、10以上のテンプレート言語によってサイトを構築することができます。テンプレート言語は以下がサポートされており、一つを選択することも、複数組み合わせることも可能です。 ※このブログではLiquidだけを使用しています。
- HTML（.html）
- Markdown（.md）
- WebC（.webc）
- JavaScript（.11ty.js）
- Liquid（.liquid）
- Nunjucks（.njk）
- Handlebars（.hbs）
- Mustache（.mustache）
- EJS（.ejs）
- Haml（.haml）
- Pug（.pug）
- TypeScript（.ts）
- JSX（.jsx）
- MDX（.mdx）
- Sass（.scss）
また、設定すれば任意の拡張子もテンプレート言語として使用できるようです（詳細）。
11tyは上記テンプレート言語を柔軟に組み込むことができるほか、高速なビルドもウリにしているようです（パフォーマンスについて）。
▼公式サイトより
Eleventy is a simpler static site generator
Eleventy is a simpler static site generator.
www.11ty.dev
使用感
かなりサクサク動くので非常に良い使用感です。また、記事作成は指定のフォルダにmdファイルを作成するだけなので、Qiitaに投稿するのとほぼ同じ感覚です。mdファイル上部にはyml形式で記事の属性を定義できるため、Qiitaより柔軟に記事の管理ができる印象です。
▼本記事のyml部分
title: 11tyで作ったブログの使用感がなかなか良い
layout: post.liquid
date: 2026-03-07
tags: [javascript]
order: 0
thumbnail: /images/eleventy-logo.jpg
excerpt: 11tyによるブログ制作や、その使用感について
ソートやサムネイルなどの細かい設定はJavaScriptファイルに記述でき、ブログ全体を柔軟にカスタマイズできます。
最後に
Liquidを使いたいという動機で始めた11tyでしたが、学習コストの低さとテンプレートの柔軟さ、ビルド速度の観点で非常に気に入っています。業務でJavaScriptフレームワークに触れる機会がなかった方や、個人で静的サイトを立ち上げたい方にとって、11tyは悪くない選択肢になりそうだと思いました。