11ty でブログをつくった
BIT VALLEY INSIDE で同僚の話を聞いていたら自分もたまらなく何かを出したくなってしまってブログをつくった。
Just write. やおせっかいなブログアドバイスの影響も少なからずあって、吐き出す場所を探していたものある。
ほぼブックマークであり、外付けの脳と化している Scrapbox でもよかったんだけど、つくりたかったんだよね。
また、Notion という選択肢も頭にはあったが、とにかく手を動かしたかった。
静的サイトジェネレーターとして Eleventy（以下 11ty）をつかっている。
なぜ 11ty を選んだのか
端から 11ty にしようと決めていた。
Hugo や Gatsby でもよかったんだけど、ぱっと見は単純そうで、複数のテンプレート言語に対応、しかも組み合わせてつかえる謎仕様もあって気になっていた。
なんか書いてみたけど、目にする機会が多かったのと「いいぞ！」みたいな記事をよくみたからだと思う。
名前かっこいいよね「11ty」。
JavaScript をテンプレート言語としてつかうことができちゃって、つまり React で書くこともできる。最高かよ。
あとはフロントエンドエンジニアの端くれとして JAMstack の何かをつくっておきたかった感もあるし、どうせなら普段つかわないものをつかおうと思ったのもある。
選んでみて
しっかりしたドキュメントがあるので特に何も書くことはないんだけど、 簡単に最小限の設定で始められて（むしろ、0C でもいける）、必要あればしっかり拡張できるところがすごく気にいった。
まだつかいはじめたばかりだけど、とてもいいものですね！みたいな感想しかない。
ほかにやったこと
CSS は Tailwind CSS をつかっている。時期尚早なコンポーネント化に疲れてしまっているので、命名に時間を割かれないユーティリティ CSS 以外を選ぶ気はしない。
CSS は CLI でビルドするんだけど、はじめてデプロイにかかった時間やファイルサイズなどを可視化してみた。
周辺ライブラリが揃ってて pretty-hrtime や bytes、chalk あたりのお世話になった。
(async () => {
const startTime = process.hrtime()
const [ filename ] = process.argv.slice(2)
const minifiedCSS = await buildCSS(filename)
const prettyTime = prettyHrtime(process.hrtime(startTime))
console.log('🎉', 'Finished in', chalk.bold.yellow(prettyTime))
console.log('📦', 'Size:', chalk.bold.yellow(bytes(minifiedCSS.length)))
console.log('💾', 'Saved to', chalk.bold.yellow(`_includes/${filename}.min.css`))
})()フォントは Noto Sans JP Black と Noto Serif JP を読み込んでいる。Google Fonts は font-display に対応していないので、PerfPerfPerf に置いてあったスニペットをつかっている。
11ty のビルドは CircleCI でやってる。
CircleCI の Local CLI は初めてつかったが驚くほど便利だった。なぜ私はいままでこれをつかわないで commit --amend からの push --force を繰りかえしていたんだろう。
User Pages は master を見るという縛りに困惑したが @kwappa さんの記事 で解決した。GitHub のデフォルトブランチを gh-pages にした上で、 docs/ をルートとして master に subtree を push することで解決した。
$ git subtree push --prefix docs/ origin master参考記事
とくに参考にしたわけでもないのに、昔から見ている hail2u さんや kotarok さん、Sara Soueidan さんの影響が強いなぁと感じる。