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
18
riscv64.rubyci.org internal
znz
0
15
Rubyの日本語リファレンスマニュアルの現在と未来
znz
0
64
devise-two-factorを4.xから5.xに上げた話
znz
0
310
docs.ruby-lang.org/ja/ の生成方法を変えた
znz
0
79
Ubuntuのriscv64版をqemuで動かした
znz
0
97
lilo.linux.or.jpをbusterからbullseyeに上げた
znz
0
100
小規模個人アプリをRails 7.xにバージョンアップした話
znz
0
91
Ruby リファレンスマニュアル改善計画 2022 進捗報告
znz
0
150
Other Decks in Technology
See All in Technology
Nstockの一人目エンジニアが 3年間かけて向き合ってきた セキュリティのこととこれから〜あれから半年〜
yo41sawada
0
110
新規案件の立ち上げ専門チームから見たAI駆動開発の始め方
shuyakinjo
0
620
MCPで変わる Amebaデザインシステム「Spindle」の開発
spindle
PRO
1
970
Browser
recruitengineers
PRO
6
2k
ZOZOマッチのアーキテクチャと技術構成
zozotech
PRO
2
670
知られざるprops命名の慣習 アクション編
uhyo
11
2.8k
絶対に失敗できないキャンペーンページの高速かつ安全な開発、WINTICKET × microCMS の開発事例
microcms
0
350
7月のガバクラ利用料が高かったので調べてみた
techniczna
3
790
「魔法少女まどか☆マギカ Magia Exedra」のグローバル展開を支える、開発チームと翻訳チームの「意識しない協創」を実現するローカライズシステム
gree_tech
PRO
0
400
Microsoft Fabric のネットワーク保護のアップデートについて
ryomaru0825
1
120
個人CLAUDE.md紹介と設定から学んだこと/introduce-my-claude-md
shibayu36
0
110
『FailNet~やらかし共有SNS~』エレベーターピッチ
yokomachi
1
190
Featured
See All Featured
RailsConf 2023
tenderlove
30
1.2k
GitHub's CSS Performance
jonrohan
1032
460k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6.1k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
790
Docker and Python
trallard
45
3.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Side Projects
sachag
455
43k
Unsuck your backbone
ammeep
671
58k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
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