テックブログを始めてから、チーム内を一巡して今度こそは継続できそうな予感がするので少し振り返りを残しておく
運用フローについて
sequenceDiagram
participant w as 書く人
participant g as GitHub
participant f as Firebase Hosting
autonumber
w->>g:PR
w->>g:マージ
g->>g:ビルド
g->>f:デプロイ
他のブログのプラットフォームを利用した場合と比較すると、
- markdownがリポジトリに溜まっていくだけなのでポータビリティに安心感がある
- markdown書くだけで他に覚えなければならないことがない
- TOML形式のfrontmatterでメタ情報を書くらい
- 普段の開発フローと同じで、PR->レビューワー自動選出->レビュー->マージ->デプロイがわかりやすい
Zolaについて
Rustで書かれた静的サイトジェネレーター
ビルド時間
試しに手元で1000記事分のマークダウンを用意してビルドしたところ5秒、10000記事だと15秒程度だった。ビルド時間はほとんど気にしなくて良さそう
# 1000 markdown files
$ zola build
Building site...
Checking all internal links with anchors.
> Successfully checked 0 internal link(s) with anchors.
-> Creating 1000 pages (0 orphan) and 1 sections
Done in 5.4s.
# 10000 markdown files
$ zola build
Building site...
Checking all internal links with anchors.
> Successfully checked 0 internal link(s) with anchors.
-> Creating 10000 pages (0 orphan) and 1 sections
Done in 14.9s.
テンプレート
zolaの作者さんが開発されたteraというテンプレートエンジンを利用していて、カスタマイズもRailsで利用するERBと同じような感じ。シンプルな仕組みだったので、コツコツ育てていきたい。
一方、普段はドキュメント書く際にmermaid.jsをめちゃくちゃ使っていて、マークダウンでチャートを書いてHTMLとして表示するのは少し工夫(力技)が必要だった。 検索して見つかったソリューションはzolaのshortcodesという機能を利用したものだったけど、ポータビリティのためにもなるべく普通のマークダウンのままにしたかった
<!-- templates/index.html -->
<style>
pre.mermaid {
display: flex;
justify-content: center;
align-content: flex-start;
height: fit-content;
}
</style>
<script type='module'>
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
Array.from(document.querySelectorAll('pre.language-mermaid')).forEach(
(elem) => {
elem.classList.add('mermaid');
elem.innerHTML = elem.innerText;
}
)
mermaid.initialize({
startOnLoad: true,
theme: 'dark',
flowchart: { useMaxWidth: false, htmlLabels: true }
});
</script>
積みTODO
- authorページを充実させる
- authorのアイコンを表示できるようにする
- 簡単な自己紹介を表示できるようにする
- OGP対応
- firebase hostingのpreview channelでのリンクを整える(permalinkがconfig.tomlのbase_urlにしかならない)
- CIでtextLintする
まとめ
GitHub使えるメンバーでブログするならCMSどころかDBも不要ってすごい楽。 ゆるく楽しく続けていきたい
