octopress + github pages の簡単な始めかた。

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

2. 「安心・安全・安定・信頼」できるインターネットサービスを
じこしょうかい
• (株)クルウィットの取締役 兼 北北陸陸⽀支社⻑⾧長
• 博⼠士(情報科学)
2
• ネットワークの委託研究・⾃自社サービス開発など
• 井澤 志充 (いざわゆきみつ)
@Yukimitsu_Izawa

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

4. 「安心・安全・安定・信頼」できるインターネットサービスを
Octopressとは
• blog を作るための Jekyll フレームワーク
(static site generator)
!
• Github PagesやHerokuと仲良良し
!
• Markdown + Pluginsで楽に書ける
!
• テーマもいろいろ
3

5. 「安心・安全・安定・信頼」できるインターネットサービスを
事前準備
• git コマンド使えるようにinstallしておく
• ruby 1.9.3 or higher
• bundler gem
4

6. 「安心・安全・安定・信頼」できるインターネットサービスを
今日やること
5
Octopress + github pages を使って、ブログサイトを構
築する

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

8. 「安心・安全・安定・信頼」できるインターネットサービスを
Octopress を持ってくる
7
% git clone git://github.com/imathis/octopress.git octopress
% cd !$
!
• Octopressのリポジトリからcloneする

9. 「安心・安全・安定・信頼」できるインターネットサービスを
bundlerを実行
!
• 依存ソフトのインストール (binstubsはお好みで)
8
% bundle install --path vendor/bundle --binstubs vendor/binstubs

10. 「安心・安全・安定・信頼」できるインターネットサービスを
デフォルトテーマの設定
!
• デフォルトテーマの設定
9
% rake install

11. 「安心・安全・安定・信頼」できるインターネットサービスを
staticサイトを生成してみる
!
• staticサイトの⽣生成
10
% rake generate
!
• ローカルでpreview
% rake preview
→ブラウザで localhost:4000 で確認できる。

12. 「安心・安全・安定・信頼」できるインターネットサービスを 11

13. 「安心・安全・安定・信頼」できるインターネットサービスを 12
Github pagesと連携する

14. 「安心・安全・安定・信頼」できるインターネットサービスを
Github pages とは
!
• Github の特定のリポジトリの内容をサイトのコンテン
ツとみなしてホスティングしてくれる機能。
• User/Organization pages.
• http://username.github.io ←こういうやつ
• http://kanazawarb.github.io もコレです。
13

15. 「安心・安全・安定・信頼」できるインターネットサービスを
User pagesを作ってみる
!
• あらかじめ username.github.io という名前のリポジト
リを作成しておく
→ 今回は、izawa.github.io を作ってみる。
14

16. 「安心・安全・安定・信頼」できるインターネットサービスを
Webでリポジトリを作成する
15
!
• githubのホームで、↓のボタンをクリックする。
クリックする！

17. 「安心・安全・安定・信頼」できるインターネットサービスを
Webでリポジトリを作成する
16
!
• githubのホームで、↓のボタンをクリックする。
入力する！
クリックする！

18. 「安心・安全・安定・信頼」できるインターネットサービスを
Webでリポジトリを作成する
17
覚えておく！

19. 「安心・安全・安定・信頼」できるインターネットサービスを
手元の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` ##
%

20. 「安心・安全・安定・信頼」できるインターネットサービスを
github pagesにデプロイする
19
!
• staticサイトの⽣生成
% rake generate
!
• Githubにデプロイ(コミット)
% rake deploy
→10分以内に、http://izawa.github.io/ でページを確認できるようになる。

21. 「安心・安全・安定・信頼」できるインターネットサービスを
rake deployについて
!
• githubのmasterブランチに、⼿手元のoctopressでgenerate
したファイルがコミットされる。
• ブランチ名：master → static サイト⽤用コンテンツ
source → octopress⽤用の記事ソース
20

22. 「安心・安全・安定・信頼」できるインターネットサービスを
sourceの登録
!
• octopress⾃自体も source ブランチに登録する。
21
% git add .
% git commit -m “some message”
% git push origin source

23. 「安心・安全・安定・信頼」できるインターネットサービスを 22
blogの設定

24. 「安心・安全・安定・信頼」できるインターネットサービスを
設定ファイルたち
!
• 設定は以下のファイルに記述する。
23
_config.yml … Main config (Jekyll's settings)
Rakefile … Configs for deployment
config.rb … Compass config
config.ru … Rack config

25. 「安心・安全・安定・信頼」できるインターネットサービスを 24
記事を投稿する

26. 「安心・安全・安定・信頼」できるインターネットサービスを
記事を準備する
!
• 以下のコマンドを実⾏行行する
25
% rake new_post["title"]
source/_posts/ の下に、YYYY-MM-DD-post-title.markdown とい
うファイルが出来るので、これを編集する。

27. 「安心・安全・安定・信頼」できるインターネットサービスを
記事の執筆
26
---
layout: post
title: "title"
date: 2014-04-19 0:59 +0900
comments: true
categories:
---
以下の様なYAML形式のヘッダが生成されているので、その下に文章を書いていく。

28. 「安心・安全・安定・信頼」できるインターネットサービスを
code snipet
``` ruby class sample
class MyClass
def initializer
end
end
```
27
バッククオート3つで囲うと簡単にコードを埋め込める。

29. 「安心・安全・安定・信頼」できるインターネットサービスを
gistの埋め込み
{% gist gist_id [filename] %} でgistを埋め込める。
!
例：{% gist 9109720 %}
28

30. 「安心・安全・安定・信頼」できるインターネットサービスを
その他スニペットたち
29
{% include_code %}
{% codeblock %} ∼ {% endcodeblock %}
{% video %}
{% image %}
：
参照: http://octopress.org/docs/blogging/code/
http://octopress.org/docs/blogging/plugins/

31. 「安心・安全・安定・信頼」できるインターネットサービスを 30
blogテーマを変更更する

32. 「安心・安全・安定・信頼」できるインターネットサービスを
octopressのテーマリポジトリ
• http://opthemes.com/
31

33. 「安心・安全・安定・信頼」できるインターネットサービスを
テーマをダウンロード
32
例: 「Shash」というテーマを持ってきて適用する。
!
% cd octopress
% git clone git://github.com/tommy351/Octopress-Theme-Slash.git
.themes/slash
% rake install['slash']
% rake generate
テーマのリポジトリを、手元に clone する。

34. 「安心・安全・安定・信頼」できるインターネットサービスを
テーマをダウンロード
33

35. 「安心・安全・安定・信頼」できるインターネットサービスを 34

36. 「安心・安全・安定・信頼」できるインターネットサービスを
まとめ
• octopressはmarkdownで楽に書けるブログジェネレー
タ。
• githubでホスティングさせればバージョン管理理もホス
ティングも⼀一元管理理。
!
• 続きはWebで。(おググりくださいの意)
35

37. 「安心・安全・安定・信頼」できるインターネットサービスを
• Thank You!
• If you have any comments,
• please send to:
• Mail: izawa@izawa.org / izawa@clwit.co.jp
• Twitter: @Yukimitsu_̲Izawa
36