Successfully reported this slideshow.
Your SlideShare is downloading. ×

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

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
Crawler Commons
Crawler Commons
Loading in …3
×

Check these out next

1 of 12 Ad
Advertisement

More Related Content

Slideshows for you (20)

Similar to Github pagesで独自ドメインのサイトを作る (20)

Advertisement

Recently uploaded (20)

Advertisement

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対応できそう

×