jekyll_lessons

source for dotinstall jekyll lesson

Download

[ドットインストールjekyllの練習] (http://dotinstall.com/lessons/basic_jekyll)

gemのインストール

$gem install jekyll

sampleというファイルを自動生成する

$jekyll new sample

ファイルを生成したらsampleフォルダに移動してjekyllを起動

$jekyll serve

新規のファイルを作成してその中に仮のmarkdownファイルを作ってみるその際、markdownをhtmlに変換するおまじないとして上部に

---
---

と記入しておくこと。 index.mdなどとして、保存。次に、htmlにビルドする

$jekyll build

こうすることによって、_siteという特殊なフォルダが生成されるちなみに

$jekyll serve

をすると自動的にビルドされるので、いちいちビルドしなくてもよい。

新規で_layoutsというファイルをつくってその中にdefault.htmlを作ってみる。レイアウトファイルを適用したい場合はmdファイルに

---
layout: default
---

として関連づけてやる

_layoutなどの特殊なフォルダ以外のものは、ビルドした際に自動で生成されるので同じ階層にそのまま作成してよい

タイトルをページごとに変更するための方法 index.mdの上部に以下を追加

---
layout: default
title: my first project
---

さらに、default.htmlに以下に変更

<head>
    <meta charset="UTF-8">
    <title>{{page.title}}</title>
    <link rel="stylesheet" href="/css/default.css">
<body>

こうすることで、タイトルをページごとに変更することができる。

このサイト全体の定義は_config.ymlというファイルの中に書いてやる必要がある。

_config.yml を作成

次にその中に

name:myJekyllSite
encoding: utf-8

と記入。こうすることでmarkdownで日本語が使え、nameという変数を使用できる。この際注意すべきなのが、_config.ymlファイルはwatch対象外となるので一度、control+Cで抜けて、再度serveする必要がある。

サイトの一部（例えばfooterとか）を部品化するには _includeフォルダというものを作ってあげて、その中に部品となるコードを書く。今回はfooter_menu.htmlというものを作って、それをdefalut.htmlにインポートしてやる。

インポート方法は以下の通り

{% include footer_menu.html %}

{%%}でかこってやることでインポートできる。

まず、ブログのポストファイルを生成する _post ポストファイルの中に諸々記述して、{{content}}の中身となるmarkdownを記述一般的にブログのpostファイルは2015-01-06-post.html のように記述する。

記事を一覧表示するにはhomeであるindex.mdのなかに制御構造を書いてあげるループを回すには以下のように書く

{% for post in site.posts %}
{% endfor %}

これは、site変数の中に記事の一覧が入っていて、その中で使えるデータを postの中に入れてループを回すという意味。