概要
ローカルで markdown ガリガリ書いてローカルで確認、サーバーへアップロードまで CUI でサクサクできるのでよいです。軽いし。
jekyll 単体だといろいろ面倒なので、ブログ作成支援や bootstrap を使ったレイアウトなどがついてる jekyll bootstrap を使います。
動作を理解するためには、まず jekyll 単体を触ってみたほうがいいかもですが。
セットアップ
基本的には Jekyll Quick Start | ruhoh universal static blog generator
に従えばいいのですが、一応ステップバイステップで。ローカルで動かす→サーバーで動かす、という順でいきます。
ローカルにjeklly-bootstrap のインストール
まず jekyll を入れます：
1
| % sudo gem install jekyll
|
次に jekyll-bootstrap。git clone でローカルに持ってきます。username は自分のユーザ名に変えてください。
1
| % git clone https://github.com/plusjade/jekyll-bootstrap.git _username_.github.io
|
そして、サーバー稼働：
1 2 3 4 5
| % cd _username_.github.io % jekyll serve ... Server address: http://0.0.0.0:4000/ Server running... press ctrl-c to stop.
|
と出てくれば、 http://localhost:4000/ で動作が確認できます。そしたらgithub.io 上に持って行きましょう。
また、–port 3000 などとすればポートを指定できます。
github.io 上へインストール
まず、https://github.com/new から “username.github.io” というレポジトリを作成します。”Initialize this repository with a README” はチェックしなくてもよい。
そうしたら、remote repository として github.io を指定し、push します。パスワードを聞かれるので入力すること。url として https://username:password@github.com…. とすると省略できますが、非推奨。
1 2 3
| % git remote set-url origin https://_username_@github.com/_username_/_username_.github.io.git % git push origin master Password:
|
http://_username_.github.io で動作確認します。
設定
_config.ymlで、author: 以下の name, email などを適宜設定。
markdown は redcarpet にしとくと吉
1 2 3 4 5 6 7 8 9 10
| title : A Sample Blog author : name : Your Name email : your@mail.address.com github : username twitter : account_name markdown: redcarpet redcarpet: extensions: ["autolink"]
|
運用
運用形態としては、ローカルで *.md を編集→ ローカル上で確認→ サーバーへ push、という形になります。
ページの編集
あまり変更のない固定ページ。直下にabout.md などを作ると、about.html に変換してくれます。
1
| % rake page name="about"
|
name=以下を省略すると “new-page” となります。
YAMLヘッダで group: navigation と追加すると、ナビゲーションバーに入れてくれます。
1 2 3 4 5 6 7
| --- layout: page title: "About" description: "" group: navigation --- this is an about page.
|
ポスト
ブログの記事を編集、追加します。
とすると “_posts/2014-11-01-test.md” が作られるので、これを編集します。
title=以下を省略すると “new-post” になります。
ローカルで確認
–watch オプションをつけると、ファイルを変更すると自動的に再生成してくれます。
また、vagrant などで外で編集すると変更を検知してくれないので、–force_polling をつけます。
ラグがあるときは、明示的に “jekyll build” してしまってもよい。
1
| % jekyll serve --watch --force_polling
|
サーバーへ push
ふつーに add, commit, push します：
1 2 3
| % git add . % git commit -m blog -a % git push origin master
|
makefile で簡略化
いろいろタイプするのが面倒なので、makefile を作っておくと楽です：
1 2 3 4 5 6 7 8 9 10 11 12
| build: jekyll build cmt: git status git commit -m msg -a push: git push origin master serve: jekyll serve --watch --force_polling
|
serve –watch すると通知表示がうざいので、>/dev/null にしてもいいかも。
カスタマイズ
レイアウトの変更
_layouts/default.html をいじくります。が、jekyll bootstrap だと
_includes/themes/bootstrap-3/default.html を使うようになっているので、
これを直接いじくるか、コピーしてそっちをいじくります。
サイドメニューをつけたいので、default.html の {{ content }} あたりのを以下のように変更。xs, sm では表示しないように。
undefined
sidebar を _includes/ 以下に作ってそれを include してます。
sidebar ではカテゴリと最新記事を表示するようにしてます。category.html あたりからパクりました。
undefined
### Pygments
コードの色分けはしたいですね。bootstrap3 には pygments が入っていないようなので、
ぐぐって出てきたのを assets/themes/bootstrap-3/css/pygment_trac.css に保存し、default.html に link を加えます。
undefined
### ウェブ上での編集
ローカルでの編集を想定してるので、ウェブ上での編集は想定されていないので、
prose.io を使う。あらかじめ登録しておく（authenticate するだけ）。
post.html にprose.io の編集画面へのリンクをはると便利。日付の隣につける：
undefined
### 見出し番号
undefined
### トップで最新記事を表示
[paco.jp » jekyllでトップページにsite.postsの最新記事を表示する] (http://paco.jp/blog/jekyll/ruby/2013/01/01/jekyll%E3%81%A6%E3%82%99%E3%83%88%E3%83%83%E3%83%95%E3%82%9A%E3%83%98%E3%82%9A%E3%83%BC%E3%82%B7%E3%82%99%E3%81%ABsite.posts%E3%81%AE%E6%9C%80%E6%96%B0%E8%A8%98%E4%BA%8B%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B/)
を参考に：
undefined
undefined
### プラグイン
- amazon_tag: https://github.com/nitoyon/tech.nitoyon.com/blob/master/_plugins/tags/amazon.rb
## Tips
### .emacs
iso-2022-jp だとエラーになるので、utf-8 に。
undefined
## 参考文献
- [paco.jp » jekyllでトップページにsite.postsの最新記事を表示する] (http://paco.jp/blog/jekyll/ruby/2013/01/01/jekyll%E3%81%A6%E3%82%99%E3%83%88%E3%83%83%E3%83%95%E3%82%9A%E3%83%98%E3%82%9A%E3%83%BC%E3%82%B7%E3%82%99%E3%81%ABsite.posts%E3%81%AE%E6%9C%80%E6%96%B0%E8%A8%98%E4%BA%8B%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B/)