Octopress導入メモ

基本的には Deploying to Github Pages - Octopress http://octopress.org/docs/deploying/github/ を参考にしつつ

Octopress

Jeykilをバックエンドに静的ページを動的に生成するブログエンジン。なにをいってるかわかんねーだろーがry

rakeコマンドで記事生成したり、erbでテンプレートを編集したりできる。要は生成部分は動的だけど成果物は静的。

プラグインもそこそこある。けどとくに制約がないので自分で書いたほうが早そう。

Github PagesやHerokuにデプロイするのが常套っぽい。まあ静的ページだからどこでもいいんですけどね。

きっかけ

俺もだいぶJS書けるようになってきたのでJS書きまくれるブログでサブドメインはいいよなーとか考えてて

そういえば mizchi.github.comでなんかできないかなーと調べてたらmarkdownならoctopressってのがあるらしい => やるか githubドメインよい。

installの準備

いきなり躓いた。ruby 1.9.3だと、RedCloth 4.9.3? のエラーかなんだかでbundle installできない。ぐぐるといろんなところでRuby 1.9.2使えと言われるのでおとなしく入れる(公式には1.9.3使えと書いてある…)

僕ルビーストじゃないんで原因よくわからんす(会社でRails使ってるはずなんだけど)。とりあえずRVM使ってるんで1.9.2いれておく。

1

rvm install 1.9.2

rakeとzshが相性悪いのを少し修正

1
2

alias rake="noglob rake"
compdef -d rake

rakeの補完、ファイル読みに行ってるようで超遅い。auto-fuつかってると特に。

install

1
2
3
4
5
6
7
8
9

git clone git://github.com/imathis/octopress.git
cd octopress
rvm use 1.9.2
gem install bundler
bundle install
rake setup_github_pages
# デプロイURLを求められるので ~.github.comを指定
rake generate
rake deploy

記事を更新

1

rake new_post['test']

source/_posts/~~~.markdownが生成される。 エディタでmarkdownで書く。ヘッダのハイフンで囲われてる領域はyamlでメタ情報生成用らしい

1
2
3
4
5
6
7
8
9
10
11

---
layout: post
title: "Octopress導入メモ"
date: 2012-09-22 15:25
comments: true
categories: ruby octopress
---

## はじめに

てｓｔ

記事書いたらrake gen_deploy (generate と deploy同時にやる)

1

rake gen_deploy

記事書いて生成してgen_deploy

サーバー建てて動的に変更確認することもできる

1
2

rake preview
open http://localhost:4000

とりあえずやったこと

テーマを入れ替えてみた

tommy351/Octopress-Theme-Slash

CoffeeScript

1

<script type="text/coffeescript" src='hoge.coffee'></script>

とかやりたかったのでJSをmy以下に突っ込んでsource/_include/head.htmlにパス追加。myってのは酷いのであとでどっかに動かす。

1
2
3
4

<script src="/my/coffee-script.js"></script>
<script src="/my/underscore-min.js"></script>
<script src="/my/backbone-min.js"></script>
<script type='text/coffeescript' src="/my/main.coffee"></script>

JS自由に読み込めるのいいですね、危ないけど

おまけ

coffee-scriptとBackboneで無理やりpushstateさせるプラギン書いてみた。ヘッダで読みこめば動く。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92

@App =
  View: {}
@app = null

class App.Workspace extends Backbone.Router
  routes:
    '': 'index'
    'blog/:year/:month/:day/:title/': 'entry'
    'blog/archives': 'archives'
    'blog/categories/:tag/': 'category'

  constructor: ->
    super
    @header = new App.View.Header
    @initialized = false

  index: =>
    unless @initialized
      @updateContent location.pathname
    else
      @makeArticles()
      @initialized = true

  category: (tag) =>
    unless @initialized
      @updateContent location.pathname
    else
      @makeArticles()
      @initialized = true

  entry: (year, month, day, title) =>
    unless @initialized
      url = "/blog/#{year}/#{month}/#{day}/#{title}/"
      @updateContent url
    else
      @makeArticles()
      @initialized = true

  archives: =>
    unless @initialized
      @updateContent '/blog/archives'
    else
      @makeArticles()
      @initialized = true

  makeArticles: ->
    @articles = $('article.post').map (index, el) =>
      new App.View.Article el: el

  updateContent: (url) ->
    $.get url, (data) =>
      $el = $('<div>').html(data)
      html = $el.find('#content').html()
      $('#content').html html

      title = $el.find('title').text()
      $('title').html title

class App.View.Header extends Backbone.View
  el: '#header'
  events:
    'click h1 > a': 'index'
    "click a[href='/']": 'index'
    "click a[href='/blog/archives']": 'toArchives'

  toArchives: (event) =>
    event.preventDefault()
    app.navigate 'blog/archives', trigger: true

  index: (event) =>
    event.preventDefault()
    app.navigate '', trigger: true

class App.View.Article extends Backbone.View
  events:
    'click h1.title a': 'toEntry'
    "click a.category": 'toCategory'

  toEntry: (event, el) =>
    event.preventDefault()
    href = @$el.find('h1.title > a').attr('href')
    app.navigate href.substr(1), trigger: true

  toCategory: (event, el) =>
    console.log arguments...
    event.preventDefault()
    href = @$(event.target).attr('href')
    app.navigate href.substr(1), trigger: true

$ =>
  @app = new App.Workspace()
  Backbone.history.start pushState: true

テーマの作り方

あとで書く。よくわからない。

octopress, ruby