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
450
ブログを 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
20
小規模個人アプリをRails 7.xにバージョンアップした話
znz
0
16
Ruby リファレンスマニュアル改善計画 2022 進捗報告
znz
0
76
Rubyist Magazine Reboot
znz
0
79
History of Japanese Ruby reference manual, and future
znz
0
1.4k
qemuのriscv64にDebianを入れてみた
znz
0
88
systemd 再入門
znz
0
270
Ruby 3.0.0 コネタ集
znz
0
250
livedoor天気API終了対応
znz
0
240
Other Decks in Technology
See All in Technology
EMとして2023年度に頑張ったこと / What we did well in FY2023 as a EM
pauli
1
150
[PlatformCon 24] Platform Orchestrators: The Missing Middle of Internal Developer Platforms?
danielbryantuk
1
820
どうするコスト最適化のトレードオフ
tetsuyaooooo
1
450
WebアプリケーションにおけるPDOの使い方入門 / phpcon odawara 2024
meihei3
2
440
レガシーをぶっ壊せ。AEONで始めるDevRelの話 / Qiita Night 2024-2-22
aeonpeople
3
1.2k
Cloud Native Java with Spring Boot (CNCF Aarhus, April 2024)
thomasvitale
1
160
SIEMを用いて、セキュリティログ分析の可視化と分析を実現し、PDCAサイクルを回してみた
coconala_engineer
0
270
「スニダン」開発組織の構造に込めた意図 ~組織作りはパッションや政治ではない!~
rinchsan
3
470
Reducing Cross-Zone Egress at Spotify with Custom gRPC Load Balancing Recap
koh_naga
0
180
VS CodeでAWSを操作しよう
smt7174
7
1.6k
コンテナセキュリティの基本と脅威への対策
kyohmizu
3
740
Java EE/Jakarta EEの現状と将来―クラウドネイティブ時代にJava EEは対応できるのか?―
takakiyo
1
120
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
13
1.5k
Building a Modern Day E-commerce SEO Strategy
aleyda
16
6.4k
VelocityConf: Rendering Performance Case Studies
addyosmani
320
23k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
19
1.9k
Web development in the modern age
philhawksworth
202
10k
What’s in a name? Adding method to the madness
productmarketing
PRO
15
2.6k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
Mobile First: as difficult as doing things right
swwweet
216
8.6k
Ruby is Unlike a Banana
tanoku
96
10k
Optimizing for Happiness
mojombo
370
69k
Automating Front-end Workflow
addyosmani
1355
200k
Docker and Python
trallard
33
2.7k
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