Octopress簡単スタートガイド

「安心・安全・安定・信頼」できるインターネットサービスを
株式会社クルウィット
井澤志充
Octopress簡単スタートガイド
2014/4/19 (Sat)
Kanazawa.rb #20
@ITビジネスプラザ武蔵

じこしょうかい
• (株)クルウィットの取締役兼北北陸陸⽀支社⻑⾧長
• 博⼠士(情報科学)
2
• ネットワークの委託研究・⾃自社サービス開発など
• 井澤志充 (いざわゆきみつ)
@Yukimitsu_Izawa

じこしょうかい
• (株)クルウィットの取締役兼北北陸陸⽀支社⻑⾧長
• 博⼠士(情報科学)
2
• ネットワークの委託研究・⾃自社サービス開発など
• 井澤志充 (いざわゆきみつ)
• 艦隊司令令部Lv.17[新⽶米中佐] になりました。
@Yukimitsu_Izawa

Octopressとは
• blog を作るための Jekyll フレームワーク 
(static site generator)
!
• Github PagesやHerokuと仲良良し
!
• Markdown + Pluginsで楽に書ける
!
• テーマもいろいろ
3

事前準備
• git コマンド使えるようにinstallしておく
• ruby 1.9.3 or higher
• bundler gem
4

今日やること
5
Octopress + github pages を使って、ブログサイトを構
築する

「安心・安全・安定・信頼」できるインターネットサービスを 6
ローカル環境を作成する

Octopress を持ってくる
7
% git clone git://github.com/imathis/octopress.git octopress
% cd !$
!
• Octopressのリポジトリからcloneする

bundlerを実行
!
• 依存ソフトのインストール (binstubsはお好みで)
8
% bundle install --path vendor/bundle --binstubs vendor/binstubs

デフォルトテーマの設定
!
• デフォルトテーマの設定
9
% rake install

staticサイトを生成してみる
!
• staticサイトの⽣生成
10
% rake generate
!
• ローカルでpreview
% rake preview
→ブラウザで localhost:4000 で確認できる。

Github pagesと連携する

Github pages とは
!
• Github の特定のリポジトリの内容をサイトのコンテン
ツとみなしてホスティングしてくれる機能。
• User/Organization pages.
• http://username.github.io ←こういうやつ
• http://kanazawarb.github.io もコレです。
13

User pagesを作ってみる
!
• あらかじめ username.github.io という名前のリポジト
リを作成しておく 
→ 今回は、izawa.github.io を作ってみる。
14

Webでリポジトリを作成する
15
!
• githubのホームで、↓のボタンをクリックする。
クリックする！

16
!
• githubのホームで、↓のボタンをクリックする。
入力する！
クリックする！

17
覚えておく！

手元のOctopressと連携させる
• ⼿手元のOctopressに先ほどのリポジトリの情報を⼊入⼒力力する。
18
% rake setup_github_pages
Enter the read/write url for your repository
(For example, 'git@github.com:your_username/
your_username.github.io.git)
or 'https://github.com/your_username/
your_username.github.io')
Repository url: git@github.com:izawa/izawa.github.io.git ←入力
:
:
## Now you can deploy to git@github.com:izawa/
izawa.github.io.git with `rake deploy` ##
%

github pagesにデプロイする
19
!
• staticサイトの⽣生成
% rake generate
!
• Githubにデプロイ(コミット)
% rake deploy
→10分以内に、http://izawa.github.io/ でページを確認できるようになる。

rake deployについて
!
• githubのmasterブランチに、⼿手元のoctopressでgenerate
したファイルがコミットされる。
• ブランチ名：master → static サイト⽤用コンテンツ 
source → octopress⽤用の記事ソース
20

sourceの登録
!
• octopress⾃自体も source ブランチに登録する。
21
% git add .
% git commit -m “some message”
% git push origin source

blogの設定

設定ファイルたち
!
• 設定は以下のファイルに記述する。
23
_config.yml … Main config (Jekyll's settings)
Rakefile … Configs for deployment
config.rb … Compass config
config.ru … Rack config

記事を投稿する

記事を準備する
!
• 以下のコマンドを実⾏行行する
25
% rake new_post["title"]
source/_posts/ の下に、YYYY-MM-DD-post-title.markdown とい
うファイルが出来るので、これを編集する。

記事の執筆
26
---
layout: post
title: "title"
date: 2014-04-19 0:59 +0900
comments: true
categories:
---
以下の様なYAML形式のヘッダが生成されているので、その下に文章を書いていく。

code snipet
``` ruby class sample
class MyClass
def initializer
end
end
```
27
バッククオート3つで囲うと簡単にコードを埋め込める。

gistの埋め込み
{% gist gist_id [filename] %} でgistを埋め込める。
!
例：{% gist 9109720 %}
28

その他スニペットたち
29
{% include_code %}
{% codeblock %} ∼ {% endcodeblock %}
{% video %}
{% image %}
：
参照: http://octopress.org/docs/blogging/code/
http://octopress.org/docs/blogging/plugins/

blogテーマを変更更する

octopressのテーマリポジトリ
• http://opthemes.com/
31

テーマをダウンロード
32
例: 「Shash」というテーマを持ってきて適用する。
!
% cd octopress
% git clone git://github.com/tommy351/Octopress-Theme-Slash.git
.themes/slash
% rake install['slash']
% rake generate
テーマのリポジトリを、手元に clone する。

テーマをダウンロード
33

まとめ
• octopressはmarkdownで楽に書けるブログジェネレー
タ。
• githubでホスティングさせればバージョン管理理もホス
ティングも⼀一元管理理。
!
• 続きはWebで。(おググりくださいの意)
35

• Thank You!
• If you have any comments,
• please send to:
• Mail: izawa@izawa.org / izawa@clwit.co.jp
• Twitter: @Yukimitsu_̲Izawa
36

Octopress簡単スタートガイド

More Related Content

What's hot

Viewers also liked

More from Yukimitsu Izawa

Recently uploaded

Octopress簡単スタートガイド