2014/3/13 @yando
ブログやサイトの

Jekyllへの移行
yando
CandyCane / php CakePHP2 実践入門
engineyard.co.jp
ブログやサイトのJekyllへの移行
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
ブログやサイトのJekyllへの移行
History
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.
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.run({	
  
	
  	
  	
  	
  	
  	
  "url"	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  =>	
  "hAp://yandod.tumblr.com",	
  
	
  	
  	
  	
  	
  	
  "format"	
  	
  	
  	
  	
  	
  	
  	
  	
  =>	
  "html",	
  
	
  	
  	
  	
  	
  	
  "grab_images"	
  	
  	
  	
  =>	
  true,	
  
	
  	
  	
  	
  	
  	
  "add_highlights"	
  =>	
  false,	
  
	
  	
  	
  	
  	
  	
  "rewrite_urls"	
  	
  	
  =>	
  false	
  	
  	
  	
  })'
WordPress
秒速で移行完了
全てをGitHubで!(プルリク)
コンテンツがオフラインで編集可能
面倒なセキュリティとお別れ
静的ファイル生成=圧倒的安定感
コメントやトラックバックはSaaS活用
Jekyllに移行する利点
_postsの下に階層を切ることでさらに
大量のデータを管理
DBではないのでファイル数が多いとビ
ルドには多少時間がかかる
sassなどを使う場合はRakeとか
補足
続きはブログで

More Related Content

PDF
GitHub Enterpriseの導入事例と実践GitHub Actions
PDF
会社にGitHub Enterpriseを導入してみた話
PDF
Pin-point rebuildable and non-rebuild custom widget
PDF
超初心者でも大丈夫!AngularJSでフォームページをちょっとリッチに改造してみよう
PDF
dotcle 経験0から Meteor iOS アプリを2ヶ月半で作ってリリースしてみた
PDF
Unityゲームにオンラインランキングとゴースト機能を追加しよう!
PDF
Gradleスクリプトを読み解く
PDF
Meteor勉強会発表資料「MeteorでiOSアプリを作ろう!」
GitHub Enterpriseの導入事例と実践GitHub Actions
会社にGitHub Enterpriseを導入してみた話
Pin-point rebuildable and non-rebuild custom widget
超初心者でも大丈夫!AngularJSでフォームページをちょっとリッチに改造してみよう
dotcle 経験0から Meteor iOS アプリを2ヶ月半で作ってリリースしてみた
Unityゲームにオンラインランキングとゴースト機能を追加しよう!
Gradleスクリプトを読み解く
Meteor勉強会発表資料「MeteorでiOSアプリを作ろう!」

What's hot (9)

PDF
PDF
kintone hack in kintone hive fukuoka Vol.4
PDF
Xcode で gulp を使うお話
PDF
【Code for向け】保育園・消火栓mapを作れるアプリを作ろう!
PDF
SIerは如何にしてGitHub Enterpriseを導入するにようになったか
PDF
ここが変わる!Unity 5のスマホ開発  ~アセットバンドル、ビルド、プラグイン~
PDF
GitHubEnterpriseからBitbucket(Stash) への移行事例
PDF
AWSで自宅サーバ?
PDF
Wantedlyを2年間Herokuで運用した話
kintone hack in kintone hive fukuoka Vol.4
Xcode で gulp を使うお話
【Code for向け】保育園・消火栓mapを作れるアプリを作ろう!
SIerは如何にしてGitHub Enterpriseを導入するにようになったか
ここが変わる!Unity 5のスマホ開発  ~アセットバンドル、ビルド、プラグイン~
GitHubEnterpriseからBitbucket(Stash) への移行事例
AWSで自宅サーバ?
Wantedlyを2年間Herokuで運用した話
Ad

Similar to ブログやサイトのJekyllへの移行 (10)

PPTX
Github pagesで独自ドメインのサイトを作る
PDF
PhoneGapでWebアプリをスマホアプリ化
PDF
WebApp個人開発のすゝめ / Recommendation of personal web app development
PDF
スマホにおけるWebGL入門
PPTX
ABC2012Spring 20120324
PPTX
React Nativeで始めるアプリ開発
PDF
Dependency injection
PPTX
The First React on Rails
PDF
ReactJSの開発導入について
PDF
IntelliJ IDEAとKotlinで作るSpring 5アプリケーション
Github pagesで独自ドメインのサイトを作る
PhoneGapでWebアプリをスマホアプリ化
WebApp個人開発のすゝめ / Recommendation of personal web app development
スマホにおけるWebGL入門
ABC2012Spring 20120324
React Nativeで始めるアプリ開発
Dependency injection
The First React on Rails
ReactJSの開発導入について
IntelliJ IDEAとKotlinで作るSpring 5アプリケーション
Ad

More from Yusuke Ando (20)

PDF
ダイナミック広告の改善と拡大
PDF
DevOpsを実現するChef活用テクニック
PDF
DevOpsを実現する為のChef実践テクニック Chef12対応版
PDF
Testing your app with Selenium on Travis CI
PDF
Travis CIで実現するPHPアプリの自動テスト
PDF
Shimokita.Unity Detonatorで爆発
PDF
Shimokita.Unity RigidbodyとColliderで衝突
PDF
Webプログラマの為のUnity入門
PDF
ゴールデンウィークに最適な学習コンテンツ
PDF
Travis CIですぐに始める継続的インテグレーション
PDF
PHPとTravis CIでブラウザテスト
PDF
Shimokita.Unity パリの街をユニティちゃんが駆ける
PDF
Dev opschef
PDF
Paa s and oss
PDF
New relic
PDF
Engine Yardで作る NetCommons3のクラウド環境
PDF
Engine Yard Cloud
PDF
最近のCandyCane - PHP版Redmineでタスク管理を始めよう
PDF
PHPの教室「foreachを極める」
PDF
20121225 php
ダイナミック広告の改善と拡大
DevOpsを実現するChef活用テクニック
DevOpsを実現する為のChef実践テクニック Chef12対応版
Testing your app with Selenium on Travis CI
Travis CIで実現するPHPアプリの自動テスト
Shimokita.Unity Detonatorで爆発
Shimokita.Unity RigidbodyとColliderで衝突
Webプログラマの為のUnity入門
ゴールデンウィークに最適な学習コンテンツ
Travis CIですぐに始める継続的インテグレーション
PHPとTravis CIでブラウザテスト
Shimokita.Unity パリの街をユニティちゃんが駆ける
Dev opschef
Paa s and oss
New relic
Engine Yardで作る NetCommons3のクラウド環境
Engine Yard Cloud
最近のCandyCane - PHP版Redmineでタスク管理を始めよう
PHPの教室「foreachを極める」
20121225 php

Recently uploaded (8)

PDF
20250826_Devinで切り拓く沖縄ITの未来_AI駆動開発勉強会 沖縄支部 第2回
PDF
Geminiの出力崩壊 本レポートは、Googleの大規模言語モデル「Gemini 2.5」が、特定の画像と短文入力に対して、誤った地名を推定し、最終的に...
PDF
20250823_IoTLT_vol126_kitazaki_v1___.pdf
PPTX
生成AIとモデルベース開発:実はとても相性が良いことを説明します。まあそうだろうなと思われる方はご覧ください。
PPTX
Cosense - 整えずして完全勝利!Cosenseが他のwikiツールと違う理由
PDF
Yamaha DT200WR Real Enduro ENGINE CYLINDER TRANSMISSION
PDF
R-SCoRe: Revisiting Scene Coordinate Regression for Robust Large-Scale Visual...
PPTX
Vibe Codingを触って感じた現実について.pptx .
20250826_Devinで切り拓く沖縄ITの未来_AI駆動開発勉強会 沖縄支部 第2回
Geminiの出力崩壊 本レポートは、Googleの大規模言語モデル「Gemini 2.5」が、特定の画像と短文入力に対して、誤った地名を推定し、最終的に...
20250823_IoTLT_vol126_kitazaki_v1___.pdf
生成AIとモデルベース開発:実はとても相性が良いことを説明します。まあそうだろうなと思われる方はご覧ください。
Cosense - 整えずして完全勝利!Cosenseが他のwikiツールと違う理由
Yamaha DT200WR Real Enduro ENGINE CYLINDER TRANSMISSION
R-SCoRe: Revisiting Scene Coordinate Regression for Robust Large-Scale Visual...
Vibe Codingを触って感じた現実について.pptx .

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