github pageとJekyllでブログ作成

本サイトは、アイクラフト株式会社のブログ・サイトとして、新たにサイトを作成致しました。 記念すべき最初の投稿では、本サイトの構築内容についてお話したいと思います。

本サイトを github pages と Jekyll の2つのツールを使い、ブログを作りました。 要は、wordpressの静的ジェネレータ版といったところです。 まずは、以下で2つのツールを紹介します。

github pageとは?

githubは、ソースコードの管理ツールとして有名ですが、実はgithub pageという便利な機能が備わっています。githubにgithub page用のレポジトリを作成し、html,cssなどのソースを入れておくだけで、ページがインターネット上に公開されます。ざっと、特徴を述べておきます。
【github pageの特徴】

• WEBサーバ不要でサイトが作成できる
• 容量制限が特にない
• 独自ドメインに変更可能
• サイトの数は、プロジェクトの数だけ作成できる

静的ジェネレータのJekyllとの組み合わせ

jekyllとは、静的サイトジェネレータのことです。 テンプレートテーマが豊富で、マークダウンにも対応しています。 一応、github pageは他のジェネレータとの組み合わせでも構築可能です。

ですが、github pageで静的なwebサイトを作成するのであれば、Jekyllをオススメします。 Jekyllである場合、自動でビルドしページを更新してくれるので、非常に楽。 ブラウザ上でgithubのレポジトリに直接記事を書き込み、コミットするだけで簡単に更新されます。

Jekyllの仕組みと静的ジェネレータとしての特徴

jekyllは、Liquidというテンプレートエンジンが使えます。 標準のタグはサポートされており、jekyllは追加として独自のタグが備わっています。 特に便利なのがincludeタグです。jsでもこのような機能がありますが、jekyllでは標準で使えます。 複数のページの共通部分を、単一のファイルで共有できます。そこに修正が入った場合でも、1ファイルの修正だけで済むので便利です。

ディレクトリ構成

root/
├ _config.yml----------------------------(設定ファイル)
├  index.html-----------------------(最初に読み込むhtml)
├ cssーscreen.css-------------------------(cssファイル)
├ _post                              (mdで書かれた記事)
├ _layoutsーpage.html----------------------(レイアウト)
├ _includes----------------------------(分割されたhtml)
　　　　　├ top.html        
　　　　　├ body.html
　　　　　└ header.html

htmlファイルの読み込みの流れ
index.html→page.html→include内のhtmlのようなかんじで呼び出される。 ページを増やしたいならば、root直下にhtmlを作成し、layoutファイルを指定します。

記事の作成
postディレクトリにmdファイルを入れるだけで、自動でページが作成されます。 ただ、記事の上部に以下を記載する必要があります。

---
layout: post
title:  "Welcome to Jekyll!"
date:   2017-10-04 17:40:35 -0700
categories: jekyll update
tags:
- jekyll
---

レイアウトpost(mdで指定したレイアウトファイル)の本文に{ content }と入れると、そのレイアウトで記事を表示できます。 urlは、上記の日付とタイトルを元に作成される。
URL : https://アカウント名.hithub.io/posts/2017/11/04/Welcome to Jekyll!

topページに複数の記事を表示させたいのであれば、以下のように書く。

  {% for post in paginator.posts %}
  <a href="{{ post.url }}">{{ post.title }}></a>
  {% endfor %}

各変数については、Jekyllの公式サイトで確認できます。

手順

github pages+jekyllの構築をざっくりとした手順で書いておきます

1. rubyインストール (githubのwebページでバージョン要件を確認する)
2. gemでgithub pageインストール
3. jekyllコマンドでプロジェクト作成
4. githubでレポジトリ作成
5. githubにプロジェクトをpush

具体的な手順は、以下参照
GitHub Pages の Jekyll で Web サイトを無料公開する方法

github pagesとJekyllの良い点・悪い点

良い点

• マークダウンで楽に記事が書ける(誰でも記事が書ける)
• 静的ジェネレータで記事を自動生成(管理が楽)
• 自前でサーバーを必要としない(財布に優しい)
• 独自ドメインに変更可能

悪い点

• DBは使えないので、動的ページは作れません
• ソースは公開されてしまう
• 記事数が増えるとビルドに時間がかかる恐れあり

jekyllは、比較的ビルドに掛かる時間が長いので、ページ編集後にすぐに確認できない。 最近はHexoと呼ばれるジェネレータのビルドが早いらしく、乗り換える人も多いらしいです。

しかし、jekyllは、構築さえすれば記事をかくだけで、後は手を加える必要がないという最大の魅力があるので、 Jekyllのほうが個人的に良いかと思います。 サーバの再起動もビルドも必要ないので、、、

私みたいにWEBの知識が無くても、1からページを作成できるこができて、コストもかからないので WEBの勉強を0からしたい人にはうってつけかと思います。