Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ブログを Octopress 2 + GitHub Pages から Jekyll 3 + A...
Search
Kazuhiro NISHIYAMA
March 17, 2018
Technology
0
600
ブログを Octopress 2 + GitHub Pages から Jekyll 3 + AMP + Netlify に移行した話
個人ブログを Octopress 2 + GitHub Pages から Jekyll 3 + AMP + Netlify に移行したので、その際に苦労した点や工夫した点を紹介します。
Kazuhiro NISHIYAMA
March 17, 2018
Tweet
Share
More Decks by Kazuhiro NISHIYAMA
See All by Kazuhiro NISHIYAMA
Ruby on Rails と私
znz
0
20
riscv64.rubyci.org internal
znz
0
16
Rubyの日本語リファレンスマニュアルの現在と未来
znz
0
65
devise-two-factorを4.xから5.xに上げた話
znz
0
320
docs.ruby-lang.org/ja/ の生成方法を変えた
znz
0
80
Ubuntuのriscv64版をqemuで動かした
znz
0
97
lilo.linux.or.jpをbusterからbullseyeに上げた
znz
0
100
小規模個人アプリをRails 7.xにバージョンアップした話
znz
0
92
Ruby リファレンスマニュアル改善計画 2022 進捗報告
znz
0
150
Other Decks in Technology
See All in Technology
2つのフロントエンドと状態管理
mixi_engineers
PRO
3
170
Snowflake Intelligenceにはこうやって立ち向かう!クラシルが考えるAI Readyなデータ基盤と活用のためのDataOps
gappy50
0
280
Wantedlyの開発組織における生成AIの浸透プロジェクトについて
kotominaga
2
120
組織を巻き込む大規模プラットフォーム移行戦略 〜50+サービスのマルチリージョン・マルチプロダクト化で学んだステークホルダー協働の実践〜 / Platform migration strategy engaging all stakeholders
toshi0607
2
240
20250913_JAWS_sysad_kobe
takuyay0ne
2
250
使いやすいプラットフォームの作り方 ー LINEヤフーのKubernetes基盤に学ぶ理論と実践
lycorptech_jp
PRO
1
170
Unlocking the Power of AI Agents with LINE Bot MCP Server
linedevth
0
120
実践!カスタムインストラクション&スラッシュコマンド
puku0x
0
550
LLM時代のパフォーマンスチューニング:MongoDB運用で試したコンテキスト活用の工夫
ishikawa_pro
0
170
これでもう迷わない!Jetpack Composeの書き方実践ガイド
zozotech
PRO
0
1.1k
データ分析エージェント Socrates の育て方
na0
8
3.1k
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
8.8k
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
930
How to train your dragon (web standard)
notwaldorf
96
6.2k
Into the Great Unknown - MozCon
thekraken
40
2k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Producing Creativity
orderedlist
PRO
347
40k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
590
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Transcript
ブログを Octopress 2 + GitHub Pages から Jekyll 3 +
AMP + Netlify に移⾏した話 Kazuhiro NISHIYAMA 第81回 Ruby関⻄ 勉強会 2018/03/17 Powered by Rabbit 2.2.1
⾃己紹介 Ruby コミッターなど Twitter, GitHub: @znz https://blog.n-z.jp 1/25
Jekyll とは? markdown などから静的なサイトを⽣成す るもの GitHub Pages などでホスティングできる 動的なコンテンツは JavaScript
や外部サイ トを使う https://jekyllrb.com/ 2/25
Octopress とは? Jekyll 2.x ベースのブログ⽣成ソフト Octopress 3.0 も開発されたが⽌まってい る そのため
Octopress のバージョンアップでは なく Jekyll 直接に移⾏ https://github.com/imathis/octopress 3/25
GitHub Pages とは? GitHub の静的ファイルホスティングサー ビス git push するだけで反映される jekyll
などの⾃動ビルドも可能 プラグインなどが制限されている ⼿元や CI で⽣成して⽣成物を push も可能 4/25
GitHub Pages とは? 独⾃ドメインはそのままだと https 対応で きない Cloudflare などの CDN
と組み合わせる例が多 い 5/25
Netlify とは? 静的なサイトのホスティングサービス 動的なもの (問い合わせフォームなど) も少し対 応しているらしい (未使⽤) Git 連携あり
CDN あり 独⾃ドメインでも https 対応可能 6/25
Amplify for Jekyll とは? Jekyll の AMP (Accelerated Mobile Pages)
対応テーマ https://github.com/ageitgey/amplify 基本的に AMP のみのサイト⽤ amp-jekyll gem (プラグイン) とは別 https://github.com/juusaw/amp-jekyll 7/25
AMP とは? Accelerated Mobile Pages の略 ⾼速なモバイル対応サイトを作れる仕組み 制限された AMP HTML
で書く 動的なものは AMP 側で対応しているもののみ amp-iframe である程度は独⾃の javascript も 可能 https://www.ampproject.org/ja/ 8/25
なぜ amplify? ほぼ⽂字コンテンツだけなので AMP 対応だ けで良い 別対応は面倒 amp-jekyll gem は
AMP 対応は別 URL で ⽣成 9/25
なぜ amplify? ⾃前でテーマを作るのは⼤変そうだった AMP ベースだけだとマージンがなくなるとか素 の HTML よりみづらくなる コードの highlight
の CSS とか欲しかった 10/25
移⾏措置
URL 維持の変更 categories を tags にして category: blog を追加 カテゴリが
URL の⼀部になるため permalink 設定も互換性があるように変更 カテゴリ別ページはリダイレクトで対応 pagination は直接ブックマークやリンクな どはないだろうと思って何もせず 12/25
画像対応 少しだけ使っていたので対応 amp-img (width, height 必須) に書き換 え amp-jekyll から
amp_filter.rb だけ利⽤ サイズ⾃動埋め込み ファイル名のミスが検知できる nokogiri と fastimage を Gemfile に 13/25
スライド埋め込み https://slide.rabbit-shocker.org/ から埋 め込み iframe から amp-iframe に変更 これも width
と height 必須だが固定値で良い https 必須だったので古い http の URL は書き 換え 14/25
アマゾンの書影 これも iframe から amp-iframe に変更 これも width と height
必須だが固定値で 良い allow-popups も必要だった ないと表⽰だけでクリックしても開けない 15/25
Google Analytics amp-analytics に変更 AMP 側で対応があるので、普通のページに 埋め込むより楽な点もある 16/25
Google AdSense amp-ad に変更 なぜか空白しか表⽰されていない… jekyll.environment で分岐してローカ ルでは⾮表⽰ 17/25
google カスタム検索 サイト内検索 終了予定なので削除 使われてなさそうだったので代替も設置せ ず 18/25
social share Twitter は amplify でリンクがあった 他も含めて zenback から amp-social-
share に変更 amp-social-share が組み込み対応してい ないものも data-share-endpoint 指定で 対応可能 19/25
feed.xml octopress デフォルトの atom.xml から amplify デフォルトに名前変更 リダイレクトを設定 フィードリーダーに影響はないはず 20/25
GitHub Pages から Netlify 主に https 対応のため github-pages gem (177)
は jekyll のバ ージョンが古かった (3.6.2) 最新は jekyll 3.7.3 octopress の頃と同様に⼿元で⽣成する⼿もあ る 21/25
JEKYLL_ENV 設定 Netlify の Web 画面からでは staging と production を分けられず
netlify.toml で設定 [context.production.environment] JEKYLL_ENV = "production" [context.deploy-preview.environment] JEKYLL_ENV = "preview" [context.branch-deploy.environment] JEKYLL_ENV = "staging" 22/25
使ったプラグイン (1/2) jekyll-paginate jekyll-paginate-v2 は互換性がなくなる予定だ ったので不採⽤ jekyll-compose amplify の Gemfile
に⼊っていたので試し中 jekyll-tagging タグごとのページ⽣成⽤ 23/25
使ったプラグイン (2/2) jekyll-minifier カスタム CSS が全ページに埋め込みなのに無駄 に⼤きい気がしたので style amp-boilerplate が変わらないのは確認
済み jekyll-sitemap 必要性はよくわからないが⼀応追加 24/25
まとめ 開発が⽌まっている Octopress 2 から Jekyll 3 に移⾏ ついでに AMP
対応と https 対応 https は AMP に必須だった GitHub Pages から Netlify に移⾏ ⼿元で⽣成をやめた 25/25 Powered by Rabbit 2.2.1