第72回Ruby関西 発表資料

1. Github Pagesで独自ドメイン
のサイトを作る
第72回Ruby関西 勉強会 発表資料
FUNABARA Masao(@107steps)

2. 概要
自己紹介
Jekyllの説明
Github pagesの説明・使い方
自分のパソコンで開発する時の analyticsコードの取
り扱い方
Cloudflareの導入
なんちゃって https の導入
Accelerated Mobile Pageへの対応（失敗）

3. 自己紹介
@107steps ( https://twitter.com/107steps)
舩原 理生 ( FUNABARA Masao)
個人事業主
仕事ください ( ruby/ C / C++ / C# / Xamarin)
Ruby舞鶴やってます
https://ruby-maizuru.doorkeeper.jp
北近畿に住んでいる人いたら一緒にやりましょう

4. Jekyll の説明
公式ページからの引用
"Transform your plain text into staticwebsites
and blogs"
意訳: "あなたのプレーンテキストを静的ウェブサイ
トとブログに変換する"
yaml ヘッダのあるファイルを変換
yamlヘッダのないファイルはそのまま配置
"$ jekyllserver" で変換したhtmlファイルをサー
バーを立てて見れる
"$ jekyll build" で変換だけも出来る

5. Github Pagesの説明・使い方
https://pages.github.com に説明・使い方が書い
てある
Github にpushすると jekyllが走る
実は、jekyll使わなくても html置くだけでもいい
URL のルールは、
https://help.github.com/articles/user-
organization-and-project-pages /
に記載

6. 自分のパソコンで開発する時のanalytics
コードの取扱い方
Google analytics などを入れる時、jekyllでベタ書
きすると、開発環境で確認する時までもカウントさ
れる問題
対策
1._config.yml に変数を作る
2.その変数がtrueの時にコードを有効化するようにす
る

7. Cloudflare の導入
なぜ、導入しようと思ったか
レスポンシブデザインだから、ちょっとでも高速化
しておく
後述の SSL化
afterbefore

8. なんちゃってhttpsの導入
なぜ、導入しようと思ったか
 Google - HTTPSをランキングシグナルに使用します
1. そのうちhttps化しないといけないと思っていた
2. Cloudflare で flexible SSLでhttps化できる！
flexible SSL とは
What do the SSL optionsmean?
↓
でも静的サイトだし、Flexible SLLだし、意味あるか分からな
い
ここからGoogleに登録する方法は、まだ分かってない

9. Accelerated Mobile Pageの対応(失敗)1
いろいろ見てみる
https://github.com/juusaw/amp-jekyll
https://github.com/ageitgey/amplify
使い方も見てみる
https://syncer.jp/amp
プラグインを作ってみる
https://github.com/masoo/masoo.jp/commit/8d95
c7f8c0b869b9b182da4302e5e5fd47e03427
ちゃんと validate できているか未確認

10. Accelerated Mobile Pageの対応(失敗)2
 https://jekyllrb.com/docs/plugins/ に記載
日本語版は、hooksの記述ないので注意Generator, Converterは、クラスを継承
して実装
それぞれ Generator, Conveterが実行されるタイミングで一緒に実行される
 Hooksは、生成プロセスの途中途中で実行される
 今回は、Generatorで .htmlから amp.htmlを生成
:site :post_renderで hookして、 *.amp.htmlのimgタグを amp-imgタグに置
換

11. Accelerated Mobile Pageの対応(失敗)3
Github Pages はプラグインが無効化される
プラグインを使う方法もあるみたいだけど、ここま
では、しなくていいかなと思って未対応
http://gosyujin.github.io/2013/05/21/jekyll-
plugin-githubpages/

12. まとめ
Analyticsコードの有効・無効は、変数つかってでき
る
Cloudflare 使うと、少し高速化した気がする
Cloudflare 使うと、githubpages 使ってても
独自ドメイン で httpsでアクセス出来る
Github Pages でAMP対応はされてない
Github Pagesでも、頑張ったら、amp対応できそう