ruby と jekyll と jekyll-bootstrap で静的サイトを作る

rubyとjekyllとjekyll-bootstrapで静的サイトを作る

前提

unix系OS
gitインストール済
rubenvでruby1.9系をインストール済

全体の流れ

jekyllのインストール
jekyll-bootstrapのダウンロード
jekyll-bootstrapの設定
jekyllを起動してサンプルの確認
jekyllで記事の投稿
公開する

1. jekyllのインストール

$ gem install jekyll
$ rbenv rehash

rbenvを使用しているので、引数が必要なgemを利用する前にrehashする

2. jekyll-bootstrapのインストール

$ git clone https://github.com/plusjade/jekyll-bootstrap.git
$ cd jekyll-bootstrap

3. jekyll-bootstrapのカスタマイズ

_config.ymlの内容を変更

title : Jekyll Bootstrap
tagline: Site Tagline
author :
  name : myName myLastname
  email : conntact_me@email.address.com
  github : username_of_github
  twitter : username_of_twitter
  feedburner : feedname

index.md

---
layout: page
title: Hello World!
---

{% include JB/setup %}

##このページの説明
わたしのblogへ、ようこそ。

このページは、ruby + jekyll + jekyll bootstrap で作られています。

## 最近の投稿

<ul class="posts">
  {% for post in site.posts %}
    <li><span>{{ post.date | date_to_string }}</span> &raquo; <a href="{{ BASE_PATH }}{{ post.url }}">{{ post.title }}</a></li>
  {% endfor %}
</ul>

jektllに慣れたらサンプルファイルは消す

 $ rm -rf _posts/core-samples

カスタマイズするファイル

初期設定は

jekyll-bootstrap/_config.yml

ひな形は

_includes/themes/twitter/post.html
_includes/themes/twitter/page.html
_includes/themes/twitter/default.html
_includes/themes/twitter/default.html

cssファイルは

assets/themes/twitter/css/style.css

jsファイルは

assets/themes/twitter/js

4. jekyllを起動してサンプルの確認

jekyllをサーバーモードで起動する

$ jekyll --server --auto

デフォルトではjekyllを起動したサーバーの4000番ポートにアクセスすると作ったサイトが見れる

サーバーモードの停止方法はターミナルから ctrl+c

5.1 記事の投稿

_postsディレクトリにyyyy-mm-dd-title.mdを配置する

yyyy-mm-dd-title.md

---
layout: post
title: テスト投稿タイトル
date: 2012-04-01 09:00:00
category : lessons
tags : [intro, 初心者, jekyll, tutorial]
---

テスト投稿本文

jekyll

[https://github.com/mojombo/jekyll](http://url.com/  "mojombo / jekyll")

markdown

[http://daringfireball.net/projects/markdown/](http://daringfireball.net/projects/markdown/ "DAEING FIREBALL")

注意

ヘッダを囲むのは—タグで上下に必要、-の数は3連で、多すぎても少なくてもNG
ヘッダ部分を正しく書かないと動作しない。
ファイル名に日本語は不可
カテゴリに日本語は使えない
タグに日本語は使える
画像はjekyll-bootstrap直下にimgディレクトリを作って配置する

5.2 固定ページの作成

固定ページの追加は、jekyll-bootstrap直下で

aboutという固定ページを作る

 $ rake page name="about.md"

pagesディレクトリを作りaboutという固定ページを作る

 $ rake page name="pages/about.md"

pages/aboutというディレクトリを作る（ページは作られない)

 $ rake page name="pages/about"

固定ページのサンプル

staticpage.md

---
layout: page
title: 固定ページのひな形
---

固定ページの本文
jekyllの読みはジキルです。

6. 公開する

記事がかけらたmdファイルをhtmlにレンダリングする

$ jekyll

単体起動した jekyll が _site ディレクトリに出力した html を、レンタルサーバーなどに FTP したり rsync する。

参考

30分のチュートリアルでJekyllを理解する http://melborne.github.com/2012/05/13/first-step-of-jekyll/

Jekyllで始める簡単ブログ
http://mattn.kaoriya.net/software/lang/ruby/20090409185248.htm

jekyllで作る簡単GitHub Pages
http://tokkonopapa.github.com/blog/2011/12/28/easy-usage-of-jekyll-on-github/

ブログをJekyll(on Heroku)にしてみる
http://journal.showqase.com/2012/03/22/blogging-jekyll-on-heroku.html

Jekyll | CSS Radar
http://css.studiomohawk.com/jekyll/2011/06/11/jekyll/

https://github.com/mojombo/jekyll
https://github.com/mojombo/jekyll example

静的サイト生成ツール Jekyll を使って、bootstrapサイトを作ってみたよ
http://dsuket.hatenablog.com/entry/2012/03/06/191459

The Quickest Way to Blog with Jekyll.
http://jekyllbootstrap.com/

たのしいRuby 第3版: 高橋征義, 後藤裕蔵, まつもとゆきひろ

KRAKENBEAL RECORDS

2012年5月10日木曜日