Successfully reported this slideshow.
2014/3/13 @yando
ブログやサイトの

Jekyllへの移行
yando
CandyCane / php CakePHP2 実践入門
engineyard.co.jp
Engine Yard
クラウドプラットフォーム
Webサイト

Railsアプリ → Jekyllへ移行
ブログ

WordPress → Jekyllへ移行

業務でJekyll使ってる

(ほんとに毎日)
補足
Engine YardのサイトはGitHubではない
プラグインによる拡張やHA構成を
Engine Yardのインスタンスで稼働。
業務レベルのJekyllホスティングは
Engine Yardへどうぞ
今日の話題
Jekyllの基本
最初から始める

Jekyllの基本
ruby製の静的ページジェネレータ
2008/10/19 に誕生
原作者は mojombo
ブログ用に開発しGitHub Pagesに実装
Jekyll
History
mojombo 曰く
Jekyll, my very own blog-aware static site
generator that was purpose built specifically
for this task. With Jek...
GitHub Pages
GitHub Pages
リポジトリごとにWebサイトを持てる
Jekyllとテンプレートで簡単生成
おそらくJekyllを使う目的No.1

機能
Markdown等からの静的ページ生成
データベースを使わないブログ機能
Liquidと呼ばれるテンプレート機能
ruby製

重要
「じきる」は外国人には通じません
「じゃこぉ」「じぇこるぅ」みたいな
http://youtu.be/OAbprwIhWQQ?t=1m32s

最初から始める
システムに入れてしまう

gem install jekyll
Bundler使ったほうが良い

cat gem jekyll > Gemfile

bundle install

インストール
jekyll new path_to_mysite
cd path_to_mysite
jekyll serve ̶watch
jekyll build
設定でビルド先など制御可能

基本
デフォルト
察し
構造
設定ファイル
レイアウトファイル
記事データ
ビルド生成物
この中身をFTPでアップして公開もできる
通常のページ
その他の構造
下書き
インクルードファイル
汎用データ
_config.yml
固定リンクのルール
Markdownはredcarpet
ページの中身
htmlファイルを好きなだけ作る

→パスがそのままURLに
_posts 以下にドキュメントを置く

→ブログのようなパーマリンク形式
ページの見た目
レイアウト内にデータが入る
ブログを使うなら単一ポスト用のテン
プレートが最低限必要
index.html
メタ情報のyml
sitesオブジェクトから記事を取得
liquidタグで出力
_layouts/default.html
実際のコンテンツはここに挿入される
_posts/hoge.markdown
メタ情報のyml (Front-Matter)
Front-Matter
明示的にパーマリンクを変更
_layouts/post.html
おさらい
実際どうするの
ブログをやるなら _posts
記事のカテゴリなどを設定
静的なサイトなら _posts は放置して
ファイルを作っていく
カテゴリに設定した内容が…
フォルダ階層として表現される
liquid
{% %} か {{ }} がliquidのタグ
tag と filter構造のテンプレート
shopify製
include と highlight くらいで大丈夫
gem install jekyll-import
これで色々なサイトからコマンド一発
でインポートできる。(スゴイ)
ええっ、GitHubで無料ホスティングま
で出来るんだって∼??!!
既存サイトの移行
刺激的な表現
ええっ!無料でホスティングできる!
だいたい何でも移行できる
Tumblr
ruby	
  -­‐rubygems	
  -­‐e	
  'require	
  "jekyll-­‐import";	
  
	
  	
  	
  	
  JekyllImport::Importers::Tumblr.r...
WordPress
秒速で移行完了
全てをGitHubで!(プルリク)
コンテンツがオフラインで編集可能
面倒なセキュリティとお別れ
静的ファイル生成=圧倒的安定感
コメントやトラックバックはSaaS活用
Jekyllに移行する利点
_postsの下に階層を切ることでさらに
大量のデータを管理
DBではないのでファイル数が多いとビ
ルドには多少時間がかかる
sassなどを使う場合はRakeとか
補足
続きはブログで
ブログやサイトのJekyllへの移行
ブログやサイトのJekyllへの移行
Upcoming SlideShare
Loading in …5
×

ブログやサイトのJekyllへの移行

1,520 views

Published on

Published in: Technology
  • Be the first to comment

ブログやサイトのJekyllへの移行

  1. 1. 2014/3/13 @yando ブログやサイトの
 Jekyllへの移行
  2. 2. yando CandyCane / php CakePHP2 実践入門
  3. 3. engineyard.co.jp
  4. 4. Engine Yard クラウドプラットフォーム Webサイト
 Railsアプリ → Jekyllへ移行 ブログ
 WordPress → Jekyllへ移行

  5. 5. 業務でJekyll使ってる
 (ほんとに毎日)
  6. 6. 補足 Engine YardのサイトはGitHubではない プラグインによる拡張やHA構成を Engine Yardのインスタンスで稼働。 業務レベルのJekyllホスティングは Engine Yardへどうぞ
  7. 7. 今日の話題 Jekyllの基本 最初から始める

  8. 8. Jekyllの基本
  9. 9. ruby製の静的ページジェネレータ 2008/10/19 に誕生 原作者は mojombo ブログ用に開発しGitHub Pagesに実装 Jekyll
  10. 10. History
  11. 11. mojombo 曰く Jekyll, my very own blog-aware static site generator that was purpose built specifically for this task. With Jekyll, you have access to layouts, includes, filters, syntax highlighting, Textile and Markdown, and intelligent handling of blog entries.
  12. 12. GitHub Pages
  13. 13. GitHub Pages リポジトリごとにWebサイトを持てる Jekyllとテンプレートで簡単生成 おそらくJekyllを使う目的No.1

  14. 14. 機能 Markdown等からの静的ページ生成 データベースを使わないブログ機能 Liquidと呼ばれるテンプレート機能 ruby製

  15. 15. 重要 「じきる」は外国人には通じません 「じゃこぉ」「じぇこるぅ」みたいな http://youtu.be/OAbprwIhWQQ?t=1m32s

  16. 16. 最初から始める
  17. 17. システムに入れてしまう
 gem install jekyll Bundler使ったほうが良い
 cat gem jekyll > Gemfile
 bundle install
 インストール
  18. 18. jekyll new path_to_mysite cd path_to_mysite jekyll serve ̶watch jekyll build 設定でビルド先など制御可能
 基本
  19. 19. デフォルト
  20. 20. 察し
  21. 21. 構造 設定ファイル レイアウトファイル 記事データ ビルド生成物 この中身をFTPでアップして公開もできる 通常のページ
  22. 22. その他の構造 下書き インクルードファイル 汎用データ
  23. 23. _config.yml 固定リンクのルール Markdownはredcarpet
  24. 24. ページの中身 htmlファイルを好きなだけ作る
 →パスがそのままURLに _posts 以下にドキュメントを置く
 →ブログのようなパーマリンク形式
  25. 25. ページの見た目 レイアウト内にデータが入る ブログを使うなら単一ポスト用のテン プレートが最低限必要
  26. 26. index.html メタ情報のyml sitesオブジェクトから記事を取得 liquidタグで出力
  27. 27. _layouts/default.html 実際のコンテンツはここに挿入される
  28. 28. _posts/hoge.markdown メタ情報のyml (Front-Matter)
  29. 29. Front-Matter 明示的にパーマリンクを変更
  30. 30. _layouts/post.html
  31. 31. おさらい
  32. 32. 実際どうするの ブログをやるなら _posts 記事のカテゴリなどを設定 静的なサイトなら _posts は放置して ファイルを作っていく
  33. 33. カテゴリに設定した内容が… フォルダ階層として表現される
  34. 34. liquid {% %} か {{ }} がliquidのタグ tag と filter構造のテンプレート shopify製 include と highlight くらいで大丈夫
  35. 35. gem install jekyll-import これで色々なサイトからコマンド一発 でインポートできる。(スゴイ) ええっ、GitHubで無料ホスティングま で出来るんだって∼??!! 既存サイトの移行
  36. 36. 刺激的な表現
  37. 37. ええっ!無料でホスティングできる!
  38. 38. だいたい何でも移行できる
  39. 39. Tumblr ruby  -­‐rubygems  -­‐e  'require  "jekyll-­‐import";          JekyllImport::Importers::Tumblr.run({              "url"                        =>  "hAp://yandod.tumblr.com",              "format"                  =>  "html",              "grab_images"        =>  true,              "add_highlights"  =>  false,              "rewrite_urls"      =>  false        })'
  40. 40. WordPress
  41. 41. 秒速で移行完了
  42. 42. 全てをGitHubで!(プルリク) コンテンツがオフラインで編集可能 面倒なセキュリティとお別れ 静的ファイル生成=圧倒的安定感 コメントやトラックバックはSaaS活用 Jekyllに移行する利点
  43. 43. _postsの下に階層を切ることでさらに 大量のデータを管理 DBではないのでファイル数が多いとビ ルドには多少時間がかかる sassなどを使う場合はRakeとか 補足
  44. 44. 続きはブログで

×