Effective Jekyll - Speaker Deck

Slide 1

Slide 1 text

Effective Jekyll @wtnabe 北陸三県.rb 2025-01-18 (Sat) at ITBP 武蔵

Slide 2

Slide 2 text

お品書き Jekyll の立ち位置を確認 Jekyll の特徴と課題コンテンツ準備 HTML 生成ビルド環境さらに高みを目指して

Slide 3

Slide 3 text

今回は◯◯を使う令和最新のJekyll !! みたいな煽りはないですブログ書きたいだけならサービスに課金すれば？ → 正解だけどそうじゃない

Slide 4

Slide 4 text

まずJekyll の立ち位置を確認

Slide 5

Slide 5 text

時代製品、サービス 90 年代手書きHTML 日記 2001 tDiary 2001 MovableType 2003 シックスアパート株式会社 2003 はてなダイアリー 2003 ココログ ( MovableType ) 2003 ライブドアブログ 2003 WordPress

Slide 6

Slide 6 text

時代製品、サービス 2004 GREE 2004 mixi 2004 アメーバブログ 2006 Twitter 2007 Tumblr 2008 Jekyll 2011 はてなブログ 2014 note 2015 Gatsby

Slide 7

Slide 7 text

ブログブームはもう去ってた？静的サイトジェネレータとしては古株

Slide 8

Slide 8 text

世代別DOM 構築 and Cache 戦略 1. 事前HTML 生成＆キャッシュ Movable Type 2. 動的HTML 生成（＋キャッシュ） tDiary, WordPress, ... 3. 静的サイト（事前HTML 生成） Jekyll, Astro, ... 4. 静的サイド（a.k.a JAMStack ） Gatsby, Next.js, ...

Slide 9

Slide 9 text

ここからJekyll のお話

Slide 10

Slide 10 text

Jekyll の特徴と課題事前にすべてHTML 生成＆管理画面のないタイプのブログシステム 1. HTML 生成が重い 2. ライティング環境の準備 3. ホスティング環境の準備 4. ビルド＆デプロイ環境の準備

Slide 11

Slide 11 text

- ホスティング編 -

Slide 12

Slide 12 text

基本構成オブジェクトストレージ + CDN + CI/CD 具体例 S3 + CloudFront, ... Firebase Hosting, ... Netlify, Vercel, Cloudflare Pages, render.com, ... ※ レン鯖でもイケるっちゃイケるけど個人だとたぶん割高

Slide 13

Slide 13 text

まぁ頑張れ

Slide 14

Slide 14 text

- コンテンツ準備編 -

Slide 15

Slide 15 text

ライティング環境いろんな拡張をブッ込めるMarkdown エディタがいいです Markdown Preview Enhanced - Visual Studio Marketplace Mermaid, PlantUML などのプレビュー、コードハイライト機能 ※ デフォルトのMarkdown で書いている場合

Slide 16

Slide 16 text

Frontmatter 忘れがち Markdown だろうとHTML だろうと「変換」対象 HTML にもFrontmatter が要る

Slide 17

Slide 17 text

Liquid の乗りこなし自由に p できない問題 Jekyll::Filters#jsonify を利用 {{ var | jsonify }} 公式推奨は {{ var | inspect }} だけど、inspect は Object の作り方次第なので jsonify の方が安定

Slide 18

Slide 18 text

- HTML 生成編 -

Slide 19

Slide 19 text

jekyll-include-cache HTML 生成負荷削減 benbalter/jekyll-include-cache: A Jekyll plugin to cache the rendering of Liquid includes include （部分HTML の読み込み）時に内容を丸ごとcache して HTML 生成をバイパス完全に共通になる部分に使用ちょっとでも内容の変化するもの（title とか）に使用するとハマる

Slide 20

Slide 20 text

Turbo Frames HTML 生成負荷＆転送量削減 Turbo Handbook カテゴリ名一覧とか、Recents みたいなそれなりに格好はつくけど、なくても困らないものを遅延読み込み関係箇所のHTML 出力は一回で済む生成されるHTML の総量削減デプロイも速くなる！

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

- ビルド環境編 -

Slide 23

Slide 23 text

JS, CSS を全部CDN に振る場合フロントエンド周りはビルドとしては無視できる最適化したい、新しいツール使いたい JavaScript とRuby 両方動かす必要がある Jekyll Vite.js が楽

Slide 24

Slide 24 text

ホスティング次第ではビルド用コンテナの最適化も 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

Slide 25

Slide 25 text

ちなみに「あーありがち」は Debian slim 上にNode.js + Ruby の環境を準備してregistry に保存 3100 以上のエントリを処理、6000 ページ弱のHTML 生成 Netlify でそのままリリースすると8 分半のところ Google Cloud Build + Firebase Hosting へのdeploy で2 分半 ※ image のupdate には5 分掛かってます

Slide 26

Slide 26 text

さらに高みを目指して

Slide 27

Slide 27 text

Jekyll の設定の切り替え CSS を書いてる時とエントリ書いてる時で欲しい機能が違う Procfile からjekyll を起動するオプションを切り替え Procfile をERB で生成 jekyll serve 用のrake task を整備 --limit_posts の設定 --disable-disk-cache の設定足りなければ _config.yml もERB で動的に生成

Slide 28

Slide 28 text

writing のアシストエントリそのものに集中するモード writing を準備重めのGenerator の処理をスキップ plugin の除外ビルド対象のページの除外

Slide 29

Slide 29 text

できるだけ道具を持ち替えたくない PlantUML などは自作plugin でカバー wtnabe/jekyll-kroki-tag: text-to-diagram power to Jekyll with kroki.io ```plantuml → {% kroki type: 'plantuml' %} ``` → {% endkroki %}

Slide 30

Slide 30 text

目視チェックを減らしたい Linter 自作メインイメージを設定しているか description, tag を設定しているか Frontmatter と body を別々に lint commit hook evilmartians/lefthook: Fast and powerful Git hooks manager for any type of projects.

Slide 31

Slide 31 text

将来的には校正の自動化もしたい現状は Markdown の中の記法が一部特殊だったり表現として完結していなかったりルールベースのチェックにあまり向いていないのでAI か？

Slide 32

Slide 32 text

今回触れなかったもの Admin Panel ( JekyllAdmin, NetlifyCMS, etc ) HeadlessCMS Contentful, Strapi, microCMS, Kuroco, ... esa.io などからドキュメントを抜いてきてビルドコンテンツをリッチにするplugin

Slide 33

Slide 33 text

自前ブログシステムの目的はそれぞれ

Slide 34

Slide 34 text

自分は派生する課題を楽しんでる（苦しんでもいる）

Slide 35

Slide 35 text

rake task 設定複数言語Runtime を含むコンテナイメージのmulti-stage build コンテナレジストリそのもの commit hook 設定フロントエンドビルドツール JavaScript そのもの、CSS そのもの Jekyll plugin VS Code 拡張？

Slide 36

Slide 36 text

Enjoy !