11tyっていうSSGを試してみる

eleventy(日本語だとイレブンティかな?)というSSGを見つけてずっと気になっていたので試してみることにしました。
なお字数が少ないので11tyと表記しようを思います。

get started する

11ty公式ドキュメントを見ながらget startedしてみます。

適当なリポジトリを用意してnpm init -yしたあと、npm i @11ty/eleventyして11tyを導入します。
devserverが内蔵されてるっぽいのでnpx @11ty/eleventy --serveすると8080番で開発用サーバーが起動します。

githubでリポジトリを作る際にREADME.mdを作成している場合は、localhost:8080/README/README.mdのビルド結果が見れます。

configを書く

どうやらかなり柔軟にconfigを書けるようです。詳細は11tyのconfigurationページを確認してください。 .eleventy.jsという名前でファイルを作成し、その中に設定を書いていきます。

ひとまず、ビルド元ディレクトリとビルド先ディレクトリを設定します。

module.exports = function(eleventyConfig) {
  return {
    // ビルド元をsrcに
    // 出力先をdocsに
    dir: {
      input: 'src',
      output: 'docs'
    }
  };
};

これで開発用サーバーを確認すると、README.mdがビルドに含まれていないのが確認できます。

Markdown, HTML, Pugを試す

このあたりの自分が触ったことのあるマークアップでちょっと試してみました。

Markdown

# 11ty getting started

eleventyに入門する

## 様々なファイル形式

- [pug](/pug)
- [html](/html)

11tyでMarkdownの出力結果

HTML

<h1>this is HTML page</h1>

<p>htmlで書いたページもビルドできます</p>

<a href="/">topへ</a>

11tyでHTMLの出力結果

Pug

h1 this is Pug page

p pugで書いたファイルもビルドできます

a(href="/") topへ

11tyでpugの出力結果

追記: github pagesでホスティングするとき

HTML-baseプラグインで解決できます。
使うにあたって、指定するURLの末尾に/を忘れずに追加するようにしましょう。

参考: https://www.11ty.dev/docs/plugins/html-base/

おわり

体感は「結構よさそう」って感じでした。これでGithub Pagesでblog書くのめちゃくちゃかんたんなんじゃ........
なんとなくAngularでゴリゴリしたあとMarked.jsとかで変換かけてるこのブログ、数記事しか書いてないのに移行の機運です。

P.S. 公式ドキュメントの左ナビゲーションバー、白文字もクリックしてページ開けるのわからなくてだいぶ混乱しました。

一覧に戻る