昔ながらの静的サイト制作に便利？@11ty/eleventy

2020年8月4日

皆さんこんにちは末ちゃんです。

昨今の静的サイト制作は、React.jsやVue.jsを使うのが一般的になってきました。

Gatsby.jsは非常に簡単にSSG環境が構築できますし、プラグインも豊富なのでちょっとした機能追加もコードをほぼ書かずに構築できます。
Next.jsは最近SSGが搭載され、Next.js開発側も随分SSGを押してきています。
その流れに乗るようにNuxt.jsもFull Static Generation機能を追加してくれたり、Nuxt Contentがリリースされたりしました。

しかし、世の中そうはいかず純粋なHTMLで納品しなければならないことが多々あります。

EJS、PugやHamlなどのJSTを使用したり、あるいは泥臭く素のHTMLを手書きするという方法があります。
LP程度ではまだいいですが、保守更新するウェブサイトなどの規模では素のHTMLは工数増大の温床ですし、ミスも起きやすくなります。

かといってJSTをセットアップするのもなかなか手間で、create-next-appやcreate-nuxt-appなどのワンコマンドで開発環境が起こせる環境が羨ましくなります。

そんなことを思ってネットサーフィン（死語）していたら、@11ty/eleventyという面白いものをみつけました。

@11ty/eleventy

Eleventyとは、「Eleventy is a simpler static site generator.」だそうです。
node.jsプロジェクトに @11ty/eleventy を追加するだけで、すぐに静的サイトが構築できます。

更に使える言語が HTML、Markdown、JavaScript、Liquid、Nunjucks、Handlebars、Mustache、EJS、Haml、Pug、Javascript Template Leteralsと豊富にあり、かつこれらを合わせて使用することが可能です。

あまり良いやり方ではありませんが、シンプルな構造のページ等にはMarkdownを使用し、複雑なことをしなければいけないところには、EJSやPugなどのJSTを使用することが可能です。

個人的には余計なことを覚える必要がないので、JavaScriptで書けることが非常にありがたいです。

サイトを制作してみる

早速サイトを制作してみましょう。まずはワークディレクトリを作成してプロジェクトを起こします。

$ mkdir eleventy && $_
$ yarn init -y

次にeleventyをプロジェクトに追加します。

$ yarn add -D @11ty/eleventy

ソースファイルを作成します。（src/ディレクトリなどにしまうには.eleventy.jsで設定を書く必要があります。

$ vim index.html
<!doctype html>
<html>
<head>
  <title>タイトル</title>
</head>
<body>
  <h1>Hello World!</h1>
  <p>Hello Eleventy World!</p>
</body>
</html>

ファイルを作成したら、Eleventyを開発モードで立ち上げます。

$ yarn eleventy --serve

するとBrowserSyncが立ち上がるので、表示されたURLにアクセスします。
デフォルトでは http://localhost:8081 となっていると思います。

Screen Shot 2020-08-04 at 10.59.24ビルドされたデータは _site ディレクトリに格納されます。これも .eleventy.js にて設定を書くことができます。

Markdow でページを追加する

では次にMarkdownでページを作成してみます。

$ vim about.md
# テスト

これはEleventyのテスト用のMarkdownファイルです。

## 見出し2

### 見出し3

* リスト
* リスト
* リスト

> Lorem Ipsum...

ファイルを作成すると自動的にビルドされるので、http://localhost:8081/about/ にアクセスします。
デフォルトでは about.md で作成してもabout/index.html に正規化されます。

Screen Shot 2020-08-04 at 11.03.18しっかりHTMLに変換されています！

CSS、JSまわりは自分で環境を構築する

例えばSassを使いたい、webpackを使いたいという場合は自分で別途環境を用意する必要があります。

まとめ

なんと1行のコマンドで静的サイトの構築環境が作成できました。
さらに公式サイト上では有志によりスタータープロジェクトが複数公開されているため、更に手軽にサイト制作を始めることができます。

シンプルと言いつつ、多数の機能を有しているため設定を上手に書いて使うと非常に良さそうです。
もちろん1つのページに対して1ファイルを作成するのではなく、APIからページを作成することも可能です。

興味があったら是非触ってみてください。

それではまたお会いしましょう。

Share Button