e-JOINT.jp > Web制作 > Jekyll > Jekyllを使った静的なWebサイト制作 基礎知識編 – 第2回 – デフォルトテーマで基本的な使い方を理解する

Jekyllを使った静的なWebサイト制作 基礎知識編 – 第2回 – デフォルトテーマで基本的な使い方を理解する

2017-02-22 /

最近、サイト生成ツールの選択肢のひとつとして注目している「Jekyll」。基礎知識編第2回は、デフォルトのテーマを使って、Jekyllの基本的な使い方について理解します。

Jekyllを使った静的なWebサイト制作 基礎知識編 記事一覧

Jekyllのインストール

Jekyllは、Rubygemsを使ってインストールできます。詳しくは公式ドキュメントを参照ください。

インストール
インストール
jekyllrb-ja.github.io
$ gem install jekyll

Jekyllの初期化。サイトのひな形ファイル群を作成する

まず、適当なワークスペースを作成し、移動します。

cd ~
mkdir workspace
cd workspace

Jekyllサイトを新規作成します。

jekyll new my-jekyll

「my-jekyll」はご自分のサイトに合わせて変更してください。

これで「my-jekyll」という名前のフォルダが作成され、中にサイトのひな形が生成されています。

.
└── my-jekyll
     ├── Gemfile
     ├── Gemfile.lock
     ├── _config.yml
     ├── _posts
     │     └── 2017-02-13-welcome-to-jekyll.markdown
     ├── about.md
     ├── index.md
     └── my-page.md

サイトのフォルダに移動する

サイトのフォルダに移動して作業を開始します。

cd my-jekyll

Jekyllのデフォルトテーマ

現在 Jekell（3.4.0）では、「minima」というデフォルトテーマが使われます。今回は、このテーマを使用して、Jekyllの使い方の基本について説明します。

jekyll/minima: Minima is a one-size-fits-all Jekyll theme for writers.
jekyll/minima: Minima is a one-size-fits-all Jekyll theme for writers.
github.com

サイトのソースを生成する

おもむろに以下のコマンドを実行します。

jekyll build

「_site」フォルダが作成され、その中に、WebサイトのソースとなるHTMLファイル群が生成されます。つまり、この「_site」フォルダ内に生成されるファイル群が、最終的なWebサイトのソースとなります。要は、この中身をWebサーバのルートディレクトリに公開することでサイトを公開できる、というわけです。

.
 ├── .gitignore
 ├── Gemfile
 ├── Gemfile.lock
 ├── _config.yml
 ├── _posts
 │   └── 2017-02-13-welcome-to-jekyll.markdown
 ├── _site
 │   ├── about
 │   │   └── index.html
 │   ├── assets
 │   │   └── main.css
 │   ├── feed.xml
 │   ├── feed.xslt.xml
 │   ├── index.html
 │   └── jekyll
 │       └── update
 │           └── 2017
 │               └── 02
 │                   └── 13
 │                       └── welcome-to-jekyll.html
 ├── about.md
 └── index.md

開発用組み込みサーバを起動する

jekyll serve

serveを実行すると、開発用組み込みサーバが起動し、「http://127.0.0.1:4000/」でサイトを閲覧できます。

http://127.0.0.1:4000/にアクセスすると、デフォルトのサイトが表示されます。

また、serve実行時にもbuildされます。

jekyll serve --watch

とwatchオプションで変更を監視し、自動的に再生成を行うとのことですが、なぜか自分の環境では –watchをつけなくても監視されます。なぜでしょうか。仕様変更でしょうか。

サイトの設定をする

「_config.yml」ファイルでサイトの設定をします。

ちなみにこの設定項目は、テーマによって違います。今回はminimaの設定についてです。

title サイトのタイトル
email メールアドレス
description サイトの説明文
baseurl この章では割愛します。空欄にしておいてください。
url 公開するサイトのURL
twitter_username Twitterのユーザー名
github_username Githubのユーザー名

開発サーバを再起動（ctrl-c してから jekyll serve）すると、設定が反映されました。

記事を作成する

ブログのような投稿記事を作成します。WordPressでいうところの「投稿」みたいなものです。

以降、変更が監視されてる（jekyll serve）体で説明します。

「_posts」フォルダの中に以下のような名前でファイルを作成します。

[4桁の西暦]-[2桁の月]-[2桁の日]-[ページの名前].markdown

例えば以下のようなファイル名となります。

2017-02-13-mypost.markdown

ファイルの内容は以下のようにします。

---
layout: post
title:  "My Post"
date:   2017-02-13 10:30:20 +0900
categories: testcategory
---
投稿の内容です。

マークダウン形式で書けます。
layout レイアウトの種類。とりあえず postにしときます。
title ページのタイトル
date 日付を入力します。
categories カテゴリー名を入力します。
tags タグ名を入力します。

ブラウザをリロードすると、トップページに記事のタイトルが表示されました。

リンクをクリックすると、投稿ページが表示されました。

YAML Front-matterについて

Jekyllでは、投稿記事や固定ページのソースの最上部に、トリプルダッシュ（ハイフン3つ）で囲まれた部分にページの設定を記述します。この部分を「YAML Front-matter」と呼びます。基本的にFront-matterは必須と考えてください。

投稿のタイトルについて

Front-matterで「title」を設定した場合は、それが優先されます。Front-matterで「title」を省略した場合は、ファイル名につけた名前が投稿のタイトルとなります。

今回は「2017-02-13-mypost.markdown」というファイル名なので、「title」を省略した場合、投稿のタイトルは「Mypost」となります。

投稿の日付について

Front-matterで「date」を設定した場合は、それが優先されます。Front-matterで「date」を省略した場合は、ファイル名につけた日付が投稿の日付となります。

投稿ページのスラッグについて

投稿ページのパーマリンクはこのような形になります。

http://127.0.0.1:4000/[カテゴリー]/[小カテゴリー]/[年]/[月]/[日]/[ファイル名につけたページの名前].html

今回作った投稿ページのURLは以下のようになります。

http://127.0.0.1:4000/testcategory/2017/02/13/my-post.html

固定ページを作成する

WordPressでいうところの固定ページを作成する方法です。

サイトフォルダ（このサンプルでは my-jekyll）の直下に、「my-page.md」ファイルを作成します。

my-page.mdファイルに下記のように入力します。

---
layout: page
title: My Page
permalink: /my-page/
---
固定ページの内容です。

マークダウン形式で書けます。
layout ページのレイアウト名。とりあえずpageにしておきます。
title ページのタイトルを入力します。
permalink ページのパーマリンクを入力します。

ビルドします。（jekyll serve –watch 状態なら自動的にビルドされます。）

jekyll build

ページ右上のメニューバーに「My Page」へのリンクが作成されました。（多分 minima の仕様です。）

リンク先にはページが作成されています。

固定ページのURLについて

固定ページのURLは、以下のようになります。

http://127.0.0.1:4000/[permalink]で設定したもの

つまり、今回作ったページのURLは、 http://127.0.0.1:4000/my-page/ となります。

パーマリンクを省略した場合

Front-matterで「permalink」を省略した場合、mdファイルを作成した場所によってパーマリンクが変更されます。

今回は、ルートディレクトリにmy-page.htmlを作成したので、Front-matterで「permalink」を省略した場合は、
「http://127.0.0.1:4000/my-page.html」がページのURLとなります。

ルートディレクトリに「fuga」フォルダを作成して、その直下に「my-page.md」を作成した場合は、「http://127.0.0.1:4000/fuga/my-page.html」がページのURLとなります。

「_site」フォルダの中身を確認してみる

さて、ここまで、サイトの基本設定、投稿記事の作成、固定ページの作成を行いました。ここで、「_site」フォルダ内を見ましょう。前述の通り、この「_site」フォルダ内には、サイトを公開するためのソース一式となります。

.
 ├── about
 │   └── index.html
 ├── assets
 │   └── main.css
 ├── feed.xml
 ├── feed.xslt.xml
 ├── index.html
 ├── jekyll
 │   └── update
 │       └── 2017
 │           └── 02
 │               └── 13
 │                   └── welcome-to-jekyll.html
 ├── my-page
 │   └── index.html
 └── testcategory
     └── 2017
         └── 02
             └── 13
                 └── my-post.html

今回作成した投稿「2017-02-13-my-post.markdown」と、「my-page.md」をもとに、それぞれHTMLが作成されているのが分かります。また、同時にindex.htmlの内容もちゃんと更新されています。

ちなみに、「about」フォルダ以下と「jekyll」フォルダ以下は、最初から合ったサンプルページ（「_post」に最初から入ってる「[日付]-welcome-to-jekyll.markdown」ファイルと、ルートディレクトリにある「about.md」）をもとに生成されていますので、これらは削除してかまいません。

上記サンプルページ2つを削除して、ビルドしてみました。「_site」フォルダの内容はこんな感じになりました。

_site/
 ├── assets
 │   └── main.css
 ├── feed.xml
 ├── feed.xslt.xml
 ├── index.html
 ├── my-page
 │   └── index.html
 └── testcategory
     └── 2017
         └── 02
             └── 13
                 └── my-post.html

サイトをアップロードする

サイトを公開するには、レンタルサーバなどHTMLが置いておけるサーバに「_site」フォルダ内一式をアップロードするだけです。

が、その前に

jekyll build

を忘れずに。jekyll serveで作られたファイルは、絶対URL指定されている部分のドメインが「localhost:4000」になっています。公開前に必ずビルドしてください。

公開URLが「_config.yml」で設定したURLと同じになるようにしてください。

さて、以上、Jekyllのデフォルトテーマを使っての基本的な使い方を紹介しました。次回は、テーマの適用やテーマ変更についてです。

新しい記事

古い記事