Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Octopress簡単スタートガイド

4,463 views

Published on

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

Published in: Technology
  • Be the first to comment

Octopress簡単スタートガイド

  1. 1. 「安心・安全・安定・信頼」できるインターネットサービスを 株式会社クルウィット 井澤 志充 Octopress簡単スタートガイド 2014/4/19 (Sat) Kanazawa.rb #20 @ITビジネスプラザ武蔵
  2. 2. 「安心・安全・安定・信頼」できるインターネットサービスを じこしょうかい • (株)クルウィットの取締役  兼  北北陸陸⽀支社⻑⾧長   • 博⼠士(情報科学) 2 • ネットワークの委託研究・⾃自社サービス開発など   • 井澤  志充  (いざわゆきみつ) @Yukimitsu_Izawa
  3. 3. 「安心・安全・安定・信頼」できるインターネットサービスを じこしょうかい • (株)クルウィットの取締役  兼  北北陸陸⽀支社⻑⾧長   • 博⼠士(情報科学) 2 • ネットワークの委託研究・⾃自社サービス開発など   • 井澤  志充  (いざわゆきみつ) • 艦隊司令令部Lv.17[新⽶米中佐]  になりました。   @Yukimitsu_Izawa
  4. 4. 「安心・安全・安定・信頼」できるインターネットサービスを Octopressとは • blog  を作るための  Jekyll  フレームワーク
 (static  site  generator)   ! • Github  PagesやHerokuと仲良良し   ! • Markdown  +  Pluginsで楽に書ける   ! • テーマもいろいろ 3
  5. 5. 「安心・安全・安定・信頼」できるインターネットサービスを 事前準備 • git  コマンド使えるようにinstallしておく   • ruby  1.9.3  or  higher   • bundler  gem 4
  6. 6. 「安心・安全・安定・信頼」できるインターネットサービスを 今日やること 5 Octopress  +  github  pages  を使って、ブログサイトを構 築する
  7. 7. 「安心・安全・安定・信頼」できるインターネットサービスを 6 ローカル環境を作成する
  8. 8. 「安心・安全・安定・信頼」できるインターネットサービスを Octopress を持ってくる 7 % git clone git://github.com/imathis/octopress.git octopress % cd !$ ! • Octopressのリポジトリからcloneする
  9. 9. 「安心・安全・安定・信頼」できるインターネットサービスを bundlerを実行 ! • 依存ソフトのインストール  (binstubsはお好みで) 8 % bundle install --path vendor/bundle --binstubs vendor/binstubs
  10. 10. 「安心・安全・安定・信頼」できるインターネットサービスを デフォルトテーマの設定 ! • デフォルトテーマの設定 9 % rake install
  11. 11. 「安心・安全・安定・信頼」できるインターネットサービスを staticサイトを生成してみる ! • staticサイトの⽣生成 10 % rake generate ! • ローカルでpreview % rake preview →ブラウザで localhost:4000 で確認できる。
  12. 12. 「安心・安全・安定・信頼」できるインターネットサービスを 11
  13. 13. 「安心・安全・安定・信頼」できるインターネットサービスを 12 Github  pagesと連携する
  14. 14. 「安心・安全・安定・信頼」できるインターネットサービスを Github pages とは ! • Github  の特定のリポジトリの内容をサイトのコンテン ツとみなしてホスティングしてくれる機能。   • User/Organization  pages.   • http://username.github.io  ←こういうやつ   • http://kanazawarb.github.io  もコレです。 13
  15. 15. 「安心・安全・安定・信頼」できるインターネットサービスを User pagesを作ってみる ! • あらかじめ  username.github.io  という名前のリポジト リを作成しておく
 →  今回は、izawa.github.io  を作ってみる。 14
  16. 16. 「安心・安全・安定・信頼」できるインターネットサービスを Webでリポジトリを作成する 15 ! • githubのホームで、↓のボタンをクリックする。 クリックする!
  17. 17. 「安心・安全・安定・信頼」できるインターネットサービスを Webでリポジトリを作成する 16 ! • githubのホームで、↓のボタンをクリックする。 入力する! クリックする!
  18. 18. 「安心・安全・安定・信頼」できるインターネットサービスを Webでリポジトリを作成する 17 覚えておく!
  19. 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. 20. 「安心・安全・安定・信頼」できるインターネットサービスを github pagesにデプロイする 19 ! • staticサイトの⽣生成 % rake generate ! • Githubにデプロイ(コミット) % rake deploy →10分以内に、http://izawa.github.io/ でページを確認できるようになる。
  21. 21. 「安心・安全・安定・信頼」できるインターネットサービスを rake deployについて ! • githubのmasterブランチに、⼿手元のoctopressでgenerate したファイルがコミットされる。   • ブランチ名:master  →  static  サイト⽤用コンテンツ
                                    source  →  octopress⽤用の記事ソース 20
  22. 22. 「安心・安全・安定・信頼」できるインターネットサービスを sourceの登録 ! • octopress⾃自体も  source  ブランチに登録する。 21 % git add . % git commit -m “some message” % git push origin source
  23. 23. 「安心・安全・安定・信頼」できるインターネットサービスを 22 blogの設定
  24. 24. 「安心・安全・安定・信頼」できるインターネットサービスを 設定ファイルたち ! • 設定は以下のファイルに記述する。 23 _config.yml … Main config (Jekyll's settings) Rakefile … Configs for deployment config.rb … Compass config config.ru … Rack config
  25. 25. 「安心・安全・安定・信頼」できるインターネットサービスを 24 記事を投稿する
  26. 26. 「安心・安全・安定・信頼」できるインターネットサービスを 記事を準備する ! • 以下のコマンドを実⾏行行する 25 % rake new_post["title"] source/_posts/ の下に、YYYY-MM-DD-post-title.markdown とい うファイルが出来るので、これを編集する。
  27. 27. 「安心・安全・安定・信頼」できるインターネットサービスを 記事の執筆 26 --- layout: post title: "title" date: 2014-04-19 0:59 +0900 comments: true categories: --- 以下の様なYAML形式のヘッダが生成されているので、その下に文章を書いていく。
  28. 28. 「安心・安全・安定・信頼」できるインターネットサービスを code snipet ``` ruby class sample class MyClass def initializer end end ``` 27 バッククオート3つで囲うと簡単にコードを埋め込める。
  29. 29. 「安心・安全・安定・信頼」できるインターネットサービスを gistの埋め込み {% gist gist_id [filename] %} でgistを埋め込める。 ! 例:{% gist 9109720 %} 28
  30. 30. 「安心・安全・安定・信頼」できるインターネットサービスを その他スニペットたち 29 {% include_code %} {% codeblock %} ∼ {% endcodeblock %} {% video %} {% image %} : 参照:    http://octopress.org/docs/blogging/code/                    http://octopress.org/docs/blogging/plugins/
  31. 31. 「安心・安全・安定・信頼」できるインターネットサービスを 30 blogテーマを変更更する
  32. 32. 「安心・安全・安定・信頼」できるインターネットサービスを octopressのテーマリポジトリ •  http://opthemes.com/ 31
  33. 33. 「安心・安全・安定・信頼」できるインターネットサービスを テーマをダウンロード 32 例: 「Shash」というテーマを持ってきて適用する。 ! % cd octopress % git clone git://github.com/tommy351/Octopress-Theme-Slash.git .themes/slash % rake install['slash'] % rake generate テーマのリポジトリを、手元に clone する。
  34. 34. 「安心・安全・安定・信頼」できるインターネットサービスを テーマをダウンロード 33
  35. 35. 「安心・安全・安定・信頼」できるインターネットサービスを 34
  36. 36. 「安心・安全・安定・信頼」できるインターネットサービスを まとめ • octopressはmarkdownで楽に書けるブログジェネレー タ。   • githubでホスティングさせればバージョン管理理もホス ティングも⼀一元管理理。   ! • 続きはWebで。(おググりくださいの意) 35
  37. 37. 「安心・安全・安定・信頼」できるインターネットサービスを • Thank  You!   • If  you  have  any  comments,   • please  send  to:   • Mail:  izawa@izawa.org  /  izawa@clwit.co.jp   • Twitter:  @Yukimitsu_̲Izawa 36

×