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 + AMP + Netlify に移行した話
Search
Kazuhiro NISHIYAMA
March 17, 2018
Technology
0
440
ブログを 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
lilo.linux.or.jpをbusterからbullseyeに上げた
znz
0
16
小規模個人アプリをRails 7.xにバージョンアップした話
znz
0
16
Ruby リファレンスマニュアル改善計画 2022 進捗報告
znz
0
74
Rubyist Magazine Reboot
znz
0
74
History of Japanese Ruby reference manual, and future
znz
0
1.4k
qemuのriscv64にDebianを入れてみた
znz
0
87
systemd 再入門
znz
0
260
Ruby 3.0.0 コネタ集
znz
0
240
livedoor天気API終了対応
znz
0
230
Other Decks in Technology
See All in Technology
GitHub最新情報キャッチアップ 2024年3月
dzeyelid
17
3.2k
CI/CDがあたりまえの今の時代にAPIテスティングツールに求められていること / CI/CD Test Night #7
k1low
12
3.1k
LLMの現在
pfn
PRO
16
6.2k
MongoDB Atlas Vectorsearchではじめる生成AIアプリ開発
chie8842
3
510
継続的テストモデルを実現するためにスリーアミーゴスを用いた10Xでのシフトレフトの事例
nihonbuson
3
270
統計的学習理論読み Chapter 1
kmatsui
4
1k
8週連続ウェビナー_イチから学ぶFivetran
cmsuzu
0
170
OpenTelemetry実践 はじめの一歩
taxin
0
330
バッチ処理のSLOをどう設計するか
rynsuke
7
590
技術イベントはなんとかひねり出す 日経の技術広報の取り組み/techpr3
nishiuma
0
230
どう買う?Azure
kuniteru
1
190
ビジネスロジックを「型」で表現するOOPのための関数型DDD / Functional And Type-Safe DDD for OOP
yuitosato
29
12k
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
1
1.2k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
39
4.3k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
28
5.9k
Music & Morning Musume
bryan
39
5.5k
Typedesign – Prime Four
hannesfritz
36
2k
From Idea to $5000 a Month in 5 Months
shpigford
376
45k
Imperfection Machines: The Place of Print at Facebook
scottboms
257
12k
Fashionably flexible responsive web design (full day workshop)
malarkey
397
65k
Scaling GitHub
holman
456
140k
Building Applications with DynamoDB
mza
88
5.6k
Infographics Made Easy
chrislema
237
18k
Stop Working from a Prison Cell
hatefulcrawdad
265
19k
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