Effective Jekyll

2025-01-18 北陸三県.rb での発表資料です。

真面目にJekyllを使おうと思うといろいろつらくなってくる部分がありますが、それらをどう乗り換え、（比較的）快適にブログを書くか、そのためにいかにyak shaveするか、スナップショットを共有します。

Transcript

1. Effective Jekyll @wtnabe 北陸三県.rb 2025-01-18 (Sat) at ITBP 武蔵
2. お品書き Jekyll の立ち位置を確認 Jekyll の特徴と課題 コンテンツ準備 HTML 生成 ビルド環境 さらに高みを目指して
3. 今回は◯◯を使う令和最新のJekyll !! みたいな煽りはないです ブログ書きたいだけならサービスに課金すれば？ → 正解 だけどそうじゃない
4. まずJekyll の立ち位置を確認
5. 時代 製品、サービス 90 年代 手書きHTML 日記 2001 tDiary 2001 MovableType 2003 シックスアパート株式会社 2003 はてなダイアリー 2003 ココログ ( MovableType ) 2003 ライブドアブログ 2003 WordPress
6. 時代 製品、サービス 2004 GREE 2004 mixi 2004 アメーバブログ 2006 Twitter 2007 Tumblr 2008 Jekyll 2011 はてなブログ 2014 note 2015 Gatsby
7. ブログブームはもう去ってた？ 静的サイトジェネレータとしては古株
8. 世代別DOM 構築 and Cache 戦略 1. 事前HTML 生成＆キャッシュ Movable Type 2. 動的HTML 生成（＋キャッシュ） tDiary, WordPress, ... 3. 静的サイト（事前HTML 生成） Jekyll, Astro, ... 4. 静的サイド（a.k.a JAMStack ） Gatsby, Next.js, ...
9. ここからJekyll のお話
10. Jekyll の特徴と課題 事前にすべてHTML 生成＆管理画面のないタイプのブログシステム 1. HTML 生成が重い 2. ライティング環境の準備 3. ホスティング環境の準備 4. ビルド＆デプロイ環境の準備
11. - ホスティング編 -
12. 基本構成 オブジェクトストレージ + CDN + CI/CD 具体例 S3 + CloudFront, ... Firebase Hosting, ... Netlify, Vercel, Cloudflare Pages, render.com, ... ※ レン鯖でもイケるっちゃイケるけど個人だとたぶん割高
13. まぁ頑張れ
14. - コンテンツ準備編 -
15. ライティング環境 いろんな拡張をブッ込めるMarkdown エディタがいいです Markdown Preview Enhanced - Visual Studio Marketplace Mermaid, PlantUML などのプレビュー、コードハイライト機能 ※ デフォルトのMarkdown で書いている場合
16. Frontmatter 忘れがち Markdown だろうとHTML だろうと「変換」対象 HTML にもFrontmatter が要る
17. Liquid の乗りこなし 自由に p できない問題 Jekyll::Filters#jsonify を利用 {{ var | jsonify }} 公式推奨は {{ var | inspect }} だけど、inspect は Object の作り方次第なので jsonify の方が安定
18. - HTML 生成編 -
19. jekyll-include-cache HTML 生成負荷削減 benbalter/jekyll-include-cache: A Jekyll plugin to cache the rendering of Liquid includes include （部分HTML の読み込み）時に内容を丸ごとcache して HTML 生成をバイパス 完全に共通になる部分に使用 ちょっとでも内容の変化するもの（title とか）に使用するとハマる
20. Turbo Frames HTML 生成負荷＆転送量削減 Turbo Handbook カテゴリ名一覧とか、Recents みたいな それなりに格好はつくけど、なくても困らないものを遅延読み込み 関係箇所のHTML 出力は一回で済む 生成されるHTML の総量削減 デプロイも速くなる！
22. - ビルド環境編 -
23. JS, CSS を全部CDN に振る場合 フロントエンド周りはビルドとしては無視できる 最適化したい、新しいツール使いたい JavaScript とRuby 両方動かす必要がある Jekyll Vite.js が楽
24. ホスティング次第ではビルド用コンテナの最適化も Ruby x Node.js x yarn を利用した静的サイト生成用のDocker image をできるだけ素朴に構築する (2022-05-03) | あーありがち Docker を利用したアプリケーション構築のためのイメージの役割と ビルドについて整理してみた (2024-06-22) | あーありがち GitHub - wtnabe/example-node-and-ruby-docker-scripts-and-app: multi language, multi phase, maintainable docker image example
25. ちなみに「あーありがち」は Debian slim 上にNode.js + Ruby の環境を準備してregistry に保存 3100 以上のエントリを処理、6000 ページ弱のHTML 生成 Netlify でそのままリリースすると8 分半のところ Google Cloud Build + Firebase Hosting へのdeploy で2 分半 ※ image のupdate には5 分掛かってます
26. さらに高みを目指して
27. Jekyll の設定の切り替え CSS を書いてる時とエントリ書いてる時で欲しい機能が違う Procfile からjekyll を起動するオプションを切り替え Procfile をERB で生成 jekyll serve 用のrake task を整備 --limit_posts の設定 --disable-disk-cache の設定 足りなければ _config.yml もERB で動的に生成
28. writing のアシスト エントリそのものに集中するモード writing を準備 重めのGenerator の処理をスキップ plugin の除外 ビルド対象のページの除外
29. できるだけ道具を持ち替えたくない PlantUML などは自作plugin でカバー wtnabe/jekyll-kroki-tag: text-to-diagram power to Jekyll with kroki.io ```plantuml → {% kroki type: 'plantuml' %} ``` → {% endkroki %}
30. 目視チェックを減らしたい Linter 自作 メインイメージを設定しているか description, tag を設定しているか Frontmatter と body を別々に lint commit hook evilmartians/lefthook: Fast and powerful Git hooks manager for any type of projects.
31. 将来的には校正の自動化もしたい 現状は Markdown の中の記法が一部特殊だったり 表現として完結していなかったり ルールベースのチェックにあまり向いていないのでAI か？
32. 今回触れなかったもの Admin Panel ( JekyllAdmin, NetlifyCMS, etc ) HeadlessCMS Contentful, Strapi, microCMS, Kuroco, ... esa.io などからドキュメントを抜いてきてビルド コンテンツをリッチにするplugin
33. 自前ブログシステムの目的はそれぞれ
34. 自分は派生する課題を楽しんでる （苦しんでもいる）
35. rake task 設定 複数言語Runtime を含むコンテナイメージのmulti-stage build コンテナレジストリそのもの commit hook 設定 フロントエンドビルドツール JavaScript そのもの、CSS そのもの Jekyll plugin VS Code 拡張？
36. Enjoy !