crossroads[41]GitHub Pages+Jekyllを使ったwebサイトの作り方/若林健一

投稿:  著者:  読了時間:9分(本文:約4,300文字)



こんにちは、若林です。

先週ラスベガスで開催されていた[CES2017]で発表されたもののひとつで、HONDAの自立するバイクがかなり気に入ってます。人が乗っていても乗っていなくても自分で姿勢を保つことができて、人が乗っていなくても動くことができる。

動画を観ていただけると一目瞭然ですが、人間の後ろを着いて歩くバイクの姿が可愛い。バイクは人が乗る機械だということを忘れてしまいそうです。

Honda self-balancing Riding Assist tech keeps bike balanced




●webサイトを作り替えました

昨年末、ずっと放置していた「CoderDojo奈良・CoderDojo生駒」のwebサイトリニューアルを行いました。

CoderDojo奈良・CoderDojo生駒
http://coderdojo-nara-ikoma.github.io/

これまでサイトの構築にはWordPressを使ってきたのですが、今回はコストがかからないようにすることと、新しい技術を試すことを目的にGitHub PagesとJekyllで構築。

昨年の8月に開催した「DojoCon Japan 2016」のwebサイトもこの組み合わせで構築したこともあり、自分も扱ってみたいと思いつつなんとか年末に滑り込みました。

DojoCon Japan 2016
http://dojocon.coderdojo.jp/

実際使ってみるとそれほど難しくはないのですが、どんなことでも最初の一歩はハードルが高いものなので(実際、私自身もそうでしたし)試してみようかなという方のために、簡単に紹介してみたいと思います。

●GitHub Pagesとは

「GitHub Pages」とは、オープンソースのソースコード公開に使われているサービス「GitHub」が提供している、webサイト公開機能のことです。

「GitHub Pages」でwebサイトを公開するために必要な手順は、

1)GitHubのアカウントを取得する。

2)「アカウント名.github.io」という名前のリポジトリを作成する。

3)作ったリポジトリに、公開するwebサイトの内容(HTML/CSS/JavScript)をCommit&Pushする。

この3つのステップだけ。

公開されるサイトのアドレスは、「http://アカウント名.github.io」。私のアカウント"kwaka1208"なら、"http://kwaka1208.github.io/"となります。

GitHub Pagesの特長としては、以下の3点が挙げられます。

1)無料で使える、サーバーの管理をしなくていい

2)GitHubリポジトリの内容がサイトコンテンツとして公開されるので、バージョン管理が楽

3)"github.io"というドメイン名がgeek(技術オタク)的にはちょっとカッコいい

詳しい使い方は以下のリンク先に説明がありますが、英語は苦手〜という方なら「GitHub Pages 使い方」あたりで検索してみると、詳しい説明が見つかると思います。

GitHub Pages
https://pages.github.com/

●Jekyllとは

もうひとつの「Jekyll」ですが、こちらはRubyで作られた「静的サイトジェネレータ」というシステムです。

Jekyll
http://jekyllrb-ja.github.io/

webサイトを公開するためにはHTMLやCSS、必要に応じてJavaScriptを書いてwebサーバ(もしくは、今回の場合であればGitHubのリポジトリ)にアップロードすればいいのですが、HTMLやCSSを個別に作成すると、後々のメンテナンスが面倒になります。

たとえば、Blogのように日々記事が増えるようなサイトだと、新しい記事への他の記事からのリンクの追加・更新や、ヘッダーなどの共通部分の変更が必要となった時に多くの作業が発生します。

これをひとつひとつ人間がやるのは大変なので、テンプレートと記事本文を分けて、自動的にHTMLファイルを作成してくれるのが「静的サイトジェネレータ」です。

ここまでの説明だと「WordPressみたいなCMSと何が違うの?」と思われるかもしれませんね。まぁ、だいたい似たようなものです。

WordPressの場合はアクセスの都度リアルタイムにページ生成を行いますが、「静的サイトジェネレータ」は一回だけページデータの作成を行って、そのデータを公開するだけという違いがあります。

このような違いがありますので、WordPressのような動的生成のCMSの場合だと記事を検索する機能を作りこむこともできますが、静的サイトジェネレータの場合はページデータは一回しか作らないので、サイト内検索機能を持たせることができないといった違いがあります。

一方で、「静的サイトジェネレータ」の場合は、利用者がアクセスした時にアプリケーションが動くわけではないので、悪意のあるアクセスに対するリスクが低いというメリットがあります。

●Jekyllのフォルダ構成

Jekyllでは、いくつかのファイルとフォルダの使い方について、決まりがあります。

_config.yml

サイト全体の設定ファイル。サイト名などの情報をここに書いておくと、すべてのページで利用できるようになります。

_layouts

ページのテンプレートファイル。ページのレイアウトはこのフォルダの中に、HTMLファイルとして作成します。レイアウトファイルなので、記事本文など実際のページごとに変わる部分は変数として挿入しておきます。

JekyllのHTMLテンプレートで変数を使用する方法4種類
http://qiita.com/y_hokkey/items/a9948686b2264675c0a6

_includes

ヘッダーやフッターなど各ページ共通で利用するファイル。ヘッダーやフッター、ナビゲーションなど、全ページ共通の部分は単独のファイルで作っておくとメンテナンスが楽になります。このフォルダにはそういった共通のファイルを置く場所です。

このフォルダの中のデータを読み込むには、

{% include header.html %}

のように指定します。

_posts

ブログ記事のデータを置くフォルダです。実際には、このフォルダ以外のフォルダにブログ記事を書いても処理されるのですが、運用としてこれに従っておくと分かりやすいと思います。

このフォルダの中に新しいフォルダを作って記事データを置いても構わないので、年ごととか自分で分かりやすい単位でフォルダを作って記事を管理するといいでしょう。

_drafts

記事の下書きファイルを置くフォルダです。このフォルダの中のファイルは、ページデータとして生成されません。

_site

生成された全サイトデータが保存されるフォルダです。この中のデータはJekyllでサイト構築するたびに作り直されますので、このフォルダの中のファイルを直接編集してはいけません。

これらのフォルダ以外に、任意のフォルダを作ってCSSやJavaScriptなどのファイルを置くことができて、それらを組み合わせてJekyllがサイトを生成してくれるという仕組みです。

●GitHub PagesでJekyllを使う

GitHub PagesはこのJekyllの機能を持っていて、先に書いたルールでデータを作ってGitHub Pages用のリポジトリにCommit&Pushすると、サイトを生成して公開までをやってくれます。

ただし、実際に公開するまでどんなサイトが出来るのかわからないのでは困るので、自分のPCの中にJekyllをインストールして、公開する前に確認できるようにしておくといいでしょう。

全体の流れは次のようになります。

1)Jekyllのフォルダの中にページデータを作成

2)自分のPCのJekyllを起動してサイトを生成して見え方を確認

Jekyllにはwebサーバーの機能も備わっています。ページデータが置いてあるフォルダで、"jekyll serve"を実行するだけでサイトの生成とwebサーバーの実行までが行われます。デフォルトでは、"http://localhost:4040/"が確認用のローカルサーバーになります。

3)確認ができたらGitHubにCommit&Push

この時Pushするのは「_site」フォルダ以外のフォルダです。「_site」の中身はCommit&PushしなくてもGitHub Pages側で生成してくれますので、.gitignoreで管理しないフォルダとして指定しておきましょう。

●メリットとデメリット

GitHub Pages + Jekyllでサイトを公開することの、メリットとデメリットをまとめておきます。

◎メリット

・無料で使える

・静的サイトでGitHubのサーバーなのでセキュリティ上の心配をしなくていい

・記事をMarkdownで書ける(GitHubを使っている人なら慣れているはず)

◎デメリット

・データがGitHubのリポジトリに置かれるため、記事の下書きなども含めてリポジトリからは見えてしまう

・サイト内検索や、訪問者ごとに表示する内容を変えるなどの動的サイトは作れない

・デザインテーマ(デザインのテンプレート)は、WordPressなどに比べるとバリエーションが少ない

●個人のサイトにおすすめ

GitHub Pagesに自分で管理している独自ドメインを適用することもできます。こちらのサイトも年末にWordPressからGitHub Pages+Jekyllに移行しました。

http://kwaka1208.net/

Jekyll用にデータを出力するWordPressのプラグインを使えば、記事データはすぐに取り出せるので、移行にかかった時間は3〜4時間程度。

仕組みが理解できれば簡単に使えて更新も楽になります。コストも掛かりませんし、機密情報を取り扱わない個人のサイトにはおすすめです。


【若林健一 / kwaka1208】
http://kwaka1208.net/aboutme/

CoderDojo奈良・CoderDojo生駒〜子どもためのコーディング道場〜
http://coderdojo-nara-ikoma.github.io/

CoderDojo Japan公式ブック発売中!
Scratch(スクラッチ)でつくる! たのしむ! プログラミング道場
https://www.amazon.co.jp/dp/4800711517/