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)
HTML
<h1>this is HTML page</h1>
<p>htmlで書いたページもビルドできます</p>
<a href="/">topへ</a>
Pug
h1 this is Pug page
p pugで書いたファイルもビルドできます
a(href="/") topへ
追記: github pagesでホスティングするとき
HTML-baseプラグインで解決できます。
使うにあたって、指定するURLの末尾に/
を忘れずに追加するようにしましょう。
参考: https://www.11ty.dev/docs/plugins/html-base/
おわり
体感は「結構よさそう」って感じでした。これでGithub Pagesでblog書くのめちゃくちゃかんたんなんじゃ........
なんとなくAngularでゴリゴリしたあとMarked.jsとかで変換かけてるこのブログ、数記事しか書いてないのに移行の機運です。
P.S. 公式ドキュメントの左ナビゲーションバー、白文字もクリックしてページ開けるのわからなくてだいぶ混乱しました。