Successfully reported this slideshow.
Your SlideShare is downloading. ×

Octopress簡単スタートガイド

Ad

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

Ad

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

Ad

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

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Loading in …3
×

Check these out next

1 of 37 Ad
1 of 37 Ad

More Related Content

Slideshows for you (19)

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

×