最近、サイト生成ツールの選択肢のひとつとして注目している「Jekyll」。基礎知識編第2回は、デフォルトのテーマを使って、Jekyllの基本的な使い方について理解します。
Jekyllを使った静的なWebサイト制作 基礎知識編 記事一覧
- Jekyllを使った静的なWebサイト制作 基礎知識編 – はじめに –
- Jekyllを使った静的なWebサイト制作 基礎知識編 – 第1回 – 「Jekyll」とは?
- Jekyllを使った静的なWebサイト制作 基礎知識編 – 第2回 – デフォルトテーマで基本的な使い方を理解する ←いまここ
- Jekyllを使った静的なWebサイト制作 基礎知識編 – 第3回(終)- テーマを適用、変更する
Jekyllのインストール
Jekyllは、Rubygemsを使ってインストールできます。詳しくは公式ドキュメントを参照ください。
$ 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 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 | サイトのタイトル |
|---|---|
| メールアドレス | |
| 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のデフォルトテーマを使っての基本的な使い方を紹介しました。次回は、テーマの適用やテーマ変更についてです。