Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Github Pagesで独自ドメイン
のサイトを作る
第72回Ruby関西 勉強会 発表資料
FUNABARA Masao(@107steps)
概要
自己紹介
Jekyllの説明
Github pagesの説明・使い方
自分のパソコンで開発する時の analyticsコードの取
り扱い方
Cloudflareの導入
なんちゃって https の導入
Accelerated...
自己紹介
@107steps ( https://twitter.com/107steps)
舩原 理生 ( FUNABARA Masao)
個人事業主
仕事ください ( ruby/ C / C++ / C# / Xamarin)
R...
Jekyll の説明
公式ページからの引用
"Transform your plain text into staticwebsites
and blogs"
意訳: "あなたのプレーンテキストを静的ウェブサイ
トとブログに変換する"
ya...
Github Pagesの説明・使い方
https://pages.github.com に説明・使い方が書い
てある
Github にpushすると jekyllが走る
実は、jekyll使わなくても html置くだけでもいい
URL...
自分のパソコンで開発する時のanalytics
コードの取扱い方
Google analytics などを入れる時、jekyllでベタ書
きすると、開発環境で確認する時までもカウントさ
れる問題
対策
1._config.yml に変数を作る...
Cloudflare の導入
なぜ、導入しようと思ったか
レスポンシブデザインだから、ちょっとでも高速化
しておく
後述の SSL化
afterbefore
なんちゃってhttpsの導入
なぜ、導入しようと思ったか
 Google - HTTPSをランキングシグナルに使用します
1. そのうちhttps化しないといけないと思っていた
2. Cloudflare で flexible SSLでhtt...
Accelerated Mobile Pageの対応(失敗)1
いろいろ見てみる
https://github.com/juusaw/amp-jekyll
https://github.com/ageitgey/amplify
使い方も見て...
Accelerated Mobile Pageの対応(失敗)2
 https://jekyllrb.com/docs/plugins/ に記載
日本語版は、hooksの記述ないので注意Generator, Converterは、クラスを継承
...
Accelerated Mobile Pageの対応(失敗)3
Github Pages はプラグインが無効化される
プラグインを使う方法もあるみたいだけど、ここま
では、しなくていいかなと思って未対応
http://gosyujin.gi...
まとめ
Analyticsコードの有効・無効は、変数つかってでき
る
Cloudflare 使うと、少し高速化した気がする
Cloudflare 使うと、githubpages 使ってても
独自ドメイン で httpsでアクセス出来る
...
Upcoming SlideShare
Loading in …5
×

Github pagesで独自ドメインのサイトを作る

502 views

Published on

第72回Ruby関西 発表資料

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Github pagesで独自ドメインのサイトを作る

  1. 1. Github Pagesで独自ドメイン のサイトを作る 第72回Ruby関西 勉強会 発表資料 FUNABARA Masao(@107steps)
  2. 2. 概要 自己紹介 Jekyllの説明 Github pagesの説明・使い方 自分のパソコンで開発する時の analyticsコードの取 り扱い方 Cloudflareの導入 なんちゃって https の導入 Accelerated Mobile Pageへの対応(失敗)
  3. 3. 自己紹介 @107steps ( https://twitter.com/107steps) 舩原 理生 ( FUNABARA Masao) 個人事業主 仕事ください ( ruby/ C / C++ / C# / Xamarin) Ruby舞鶴やってます https://ruby-maizuru.doorkeeper.jp 北近畿に住んでいる人いたら一緒にやりましょう
  4. 4. Jekyll の説明 公式ページからの引用 "Transform your plain text into staticwebsites and blogs" 意訳: "あなたのプレーンテキストを静的ウェブサイ トとブログに変換する" yaml ヘッダのあるファイルを変換 yamlヘッダのないファイルはそのまま配置 "$ jekyllserver" で変換したhtmlファイルをサー バーを立てて見れる "$ jekyll build" で変換だけも出来る
  5. 5. Github Pagesの説明・使い方 https://pages.github.com に説明・使い方が書い てある Github にpushすると jekyllが走る 実は、jekyll使わなくても html置くだけでもいい URL のルールは、 https://help.github.com/articles/user- organization-and-project-pages / に記載
  6. 6. 自分のパソコンで開発する時のanalytics コードの取扱い方 Google analytics などを入れる時、jekyllでベタ書 きすると、開発環境で確認する時までもカウントさ れる問題 対策 1._config.yml に変数を作る 2.その変数がtrueの時にコードを有効化するようにす る
  7. 7. Cloudflare の導入 なぜ、導入しようと思ったか レスポンシブデザインだから、ちょっとでも高速化 しておく 後述の SSL化 afterbefore
  8. 8. なんちゃってhttpsの導入 なぜ、導入しようと思ったか  Google - HTTPSをランキングシグナルに使用します 1. そのうちhttps化しないといけないと思っていた 2. Cloudflare で flexible SSLでhttps化できる! flexible SSL とは What do the SSL optionsmean? ↓ でも静的サイトだし、Flexible SLLだし、意味あるか分からな い ここからGoogleに登録する方法は、まだ分かってない
  9. 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. 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. 11. Accelerated Mobile Pageの対応(失敗)3 Github Pages はプラグインが無効化される プラグインを使う方法もあるみたいだけど、ここま では、しなくていいかなと思って未対応 http://gosyujin.github.io/2013/05/21/jekyll- plugin-githubpages/
  12. 12. まとめ Analyticsコードの有効・無効は、変数つかってでき る Cloudflare 使うと、少し高速化した気がする Cloudflare 使うと、githubpages 使ってても 独自ドメイン で httpsでアクセス出来る Github Pages でAMP対応はされてない Github Pagesでも、頑張ったら、amp対応できそう

×