読者です 読者をやめる 読者になる 読者になる

Make Local Happiness

自分の幸せは自分で作る!!!

ドットインストールでjekyllを試してみる

最近、個人用の開発は、
はてなじゃなく個人のブログを作ろうと思ってました。

wordpressまで高機能ではなくてよくて、
最新のいけてるやつを調べてみるといくつかありました。

これらは全て静的なサイトを構築するための、
サイトジェネレータです。

静的なサイトのため、どれもGithub上でホスティングできるようにすることができます。

この中だとMiddlemanがよさそうだったのですが、
ちょっとさわって見た感じ、よくわからなかったので、
ドットインストールにある、Jekyll(ジキリ)を試してみようかと思います。

以下の内容は自分の学習効果を高めるのと振り返りようなので、
実際にやってみる場合は、ドットインストールのサイトを見ながらやるのがいいと思います。

Jekyll入門 (全11回) - プログラミングならドットインストール

環境はローカルのMacで試してます。

$ ruby -v
ruby 2.0.0p195 (2013-05-14 revision 40734) [x86_64-darwin12.5.0]

gemは古いバージョンだったので、 アップデートしました。

$ gem install rubygems-update
$ update_rubygems
$ gem -v
2.2.2

まずはJekyllのインストールから

$ gem install jekyll

$ jekyll -v

jekyll 1.5.1

最初からあるテンプレートを使って見ます。

jekyll serverでサーバが立ち上がります。

$ jekyll new sample

New jekyll site installed in /jekyll/sample.

$ cd sample

$ jekyll serve 
Configuration file: /jekyll/sample/_config.yml 
Source: /jekyll/sample 
Destination: /jekyll/sample/_site Generating... done. 
Server address: http://0.0.0.0:4000 Server running... 
press ctrl-c to stop. 

http://localhost:4000で静的サイトが立ち上がる

1からサイトを作っていく

$mkdir mysite 
$cd mysite 
$vim index.md 

--- 
# YAML Front Matter と呼ばれる部分で
# サイトレイアウトや、変数を定義できる 
#ハイフン3つで囲んだ部分
---

#hello world

上記のindex.mdファイルを作ったら、ビルドします。

ビルドが終わると_siteフォルダ配下にindex.htmlが生成されています

$jekyll build

サーバの起動は先ほどと一緒で、
実はビルドとサーバの起動両方やっています。そのため、上記のbuildコマンドは毎回使用しなくても大丈夫です。

オプションで--watchをつけると変更を確認して自動で反映してくれます。

$jekyll serve --watch

次に共通のレイアウトを定義していきます。

画面のYAML Front Matter部分にlayoutと定義してファイル名を指定すると、
レイアウトを定義できます。

$vim index.md 
---
layout: default
---

mkdir _layout
vim _layout/default.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Jekyll Site<title>
</head>
<body>
  {{content}}
</body>
</html>

css、画像を使う

$mkdir css
$vim default.css
h1 {
 color:red;
}

$vim _layouts/default.html
#追加
<link rel="stylesheet" href="/css/default.css">

$mkdir image
#icon画像をimage/配下に配置する

$vim index.md 
#以下を追加
![icon](/image/icon.jpg)

page変数を使う

page変数を使うことで、layoutで設定した領域でも変数を使用することができ、
他のページからもそのページの値を使用することができます。

この例はアバウトページを作り、タイトルを変数として持つことにしてます。

$cp index.md about.md
---
layout:default
title: about this site
---
# about
this page is about my project.

$vim index.md
#以下を追加
---
title: my first site
---

$vim _layout/default
#以下を追加
<title>{{page.title}}</title>

site変数を定義

site変数は全画面共通の変数、設定を書くことができます。
site変数は_config.ymlというファイルに書く必要があります。

今回はサイトの名前と日本語を使用する場合の設定を記述します。
またconfig.ymlはサーバウォッチの対象外です。

なので、変更した場合は再起動する必要があります。

$vim _config.yml
name: myJekyleSite
encoding: "utf-8"

$vim _layout/default.html
<title>{{page.title}} - {{site.name}}</title>

$jekyle serve --watch

ツールの部品化

部品化はhtmlを作りincludeで呼び出すことができます。
例えば今回はフッターに画面の切替用のリンクを部品化していきます。

$mkdir _includes
$vim _includes/footer_menu.html
<hr>
<p><a href="/">HOME</a> | <a href="/about.html">About</a></p>

$vim _layouts/default.html
#以下をbodyに追加
{% include footer_menu.html %}

ブログ記事の画面を作成

記事名の2014-03-30でハイフンで区切っているのには意味があります。
ビルドでhtmlを生成する際に、ハイフンで区切るごとにフォルダが分かれます。

$vim _layouts/post.html
---
layout: default
---
<h1>{{page.title}}</h1>
{{content}}
<p>written by {{page.author}}</p>

$mkdir _posts
$vim _posts/2014-03-30-post1.md

---
layout: post
title: my first post!
author: ganezasan
---

最初の記事だよ
- 1
- 2
- 3

次にもうひとつ記事を作り、

メイン画面に各記事へのリンクを作ります。

$cp  _posts/2014-03-30-post1.md _posts/2014-03-31-post2.md

$vim index.md
{% for post in site.posts %}
- [{{post.title}}]({{post.url}})
{% endfor %}

最後に記事にjekyllは開発者がブログを書く際に利用されるため、
コードを色付けするためのライブラリが用意されてるのでそれを使用していきます。

highlightで囲んだ部分が色付けされ、いくつかの言語から色付けの仕方を選べます。
linenosを付けると番号付けがされます。

以下を追加します

$vim _posts/2014-03-31-post2.md
{% highlight ruby linenos %}
def hello
  puts "hello"
end
{% endhighlight %}

ふー。

これで全部終わりました。

middlemanでも「---」の書き方がでてきたり、

_config.ymlがでてくるので、

やってよかったです。

やっぱドットインストールすごい。

今度はmiddleman試してみます。