サイトをGitHub Pages+Jekyllに移行しました

サイトをGitHub Pages上へ移行しました。

移転前は「さくらのVPS」でnginxとMariaDB、WordPressを組み合わせて運用していましたが、途中、サーバーやデータベースについて勉強する暇があるなら、それをコンテンツの質の向上に振りあてるほうがいいことに気づきました。設定も大変だったので。餅は餅屋に限ります。

WordPressから移転するにあたっては、静的CMSのJekyllを選びました。これは、サイトの全ページをあらかじめ作成(ビルド)し、それを配信するという仕組みのCMSです。WordPressのような動的CMSと異なり、PHPなどによる動的なコンテンツの生成を行わないのが特徴です。

単にWordPressから乗り換えるだけなら、たとえばmediumghostといったサービスもあります(いずれも英語)。WordPressの開発が若干停滞気味なのに対して、それら後発サービスは活発に開発が進められています。

GitHub Pagesは、GitHub上のプロジェクトページのホスティングサービスです。現在ではプロジェクト以外の用途にも使うことができます。JekyllはGitHub Pages向けに開発がスタートしたこともあり、相性は抜群です。また、GitHubではFastlyというCDNを導入しており、回線速度も申し分ありません。

後日、ページの表示を高速化するために各種設定を行いました。ブラウザの構造のレベルから対策したので、かなりの効果がありました。詳細はこちらからどうぞ → ウェブページを1秒台で表示させる原理と方法

情報が古い場合があります

Jekyllは活発に更新を行っており、アップデートごとに新しい機能を導入したり廃止したりしています(スイッチの廃止、下書き機能の追加やCollectionの導入など)。

そのため、以下の記述に関しても、最新版に関して当てはまらない箇所があるかもしれません。できる限り情報をアップデートするよう心がけていますが、あらかじめご了承ください。Jekyllの更新情報については、以下のページから確認できます。

最新情報は基本的に英語

また、Jekyllの開発は英語で進められており、最新の情報は基本的に英語で発信されています。日本語の情報もありますが、充実さではやはり英語に劣らざるをえません。また、ユーザー数がそれほど多いわけではないので、問題があった場合は自力で解決法を見つける必要があります。なので、英語に不安がある方はJekyllは使わないほうがいいかもしれません。

それでは以下、インストール方法、各種設定について見ていくことにします。

インストール(Windows版)

JekyllはRubyで書かれているので、まずは開発環境を整備する必要があります。Windows上でのインストールは以下の順序で行います。

  1. Rubyのインストール
  2. RubyGems(Ruby用のパッケージ管理システム)のインストール
  3. Jekyllのインストール

Rubyのインストール

以下のページからRubyインストーラーと開発キット(Development Kit、通称DevKit)をダウンロードして、インストールを行ってください。

インストールについては、以下のページが参考になりました(丸投げ)。

オプションを忘れないように注意してください(以下の画像で囲んでいる部分)。

RubyGemsのインストール

Rubyをインストールした後は、Ruby用のパッケージ管理システムRubyGemsをインストールします。以下のリンクからインストール用ファイルをダウンロードしてください。

手順は、

  1. ダウンロードしたファイルを解凍
  2. コマンドプロンプトで解凍したフォルダに移動
  3. ruby setup.rbでインストール

Jekyllのインストール

Jekyllは次のコマンドでインストールできます。

gem install jekyll

インストール後、次のコマンドを実行すると、Jekyllが実行し、新規フォルダhogeでサイトがビルドされます。

jekyll new hoge
cd hoge
jekyll serve

invalid byte sequence in Windows-31Jと表示されてJekyllが動かない場合、システム環境変数を追加する必要があります。変数名はRUBYOPT、変数値は-Kuとなります。

あとは、ブラウザでhttp://localhost:4000/を開くと、ビルドされたサイトを確認できます。

データを移行する

WordPressやBloggerといったサービスから移行する場合、インポートツールを使うと便利なはずです(移行後に公開されたので使ったことがありません)。

WordPressからの移行には、こちらのページを参考にしてください。

なお、注意書きにもあるように、この移行ツールは、記事をJekyllが利用しているYAML形式に変換するものです。レイアウトやCSSスタイル、画像ファイルなどはインポートされないので注意してください。

サイトを生成し、公開する

サイトを公開するための方法は主に2つあります。ひとつはGitHub上のリポジトリにソースをアップロードして、サイトをビルドしてもらう方法、もうひとつは、ローカルのJekyllでサイトをビルドし、これをサーバー上にアップロードする方法です。

前者に関しては、以下のリポジトリを参考にしてみてください。

後者は、ローカルで生成したサイトを、GitHub上のリポジトリにpushしたり、FTPでホスティングサービスにアップロードしたりして公開する方法です。Amazon EC2やAmazon S3にデプロイすることもできます。詳しくは以下のページを見てみてください。

プラグインを使うためにローカルでビルドする

前者のほうが楽ですが、Jekyllのプラグインが使えないという難点があるので、ここでは後者、つまりローカルでビルドして、これをホスティングサービス(GitHub)にアップロードする方法を選びました。使っているプラグインは次のようなものです。

プラグインの公式リストは以下のリンク先にあります。

Gruntを使う

Gruntというツールを使って、CSSやJavascriptの結合やminifyなどを実行することもできます。当サイトの場合、記事の下書き中はjekyll serveとしておいて、サイトにデプロイする段階でGruntのタスクを実行して仕上げています。

Gruntに関しては、以下のサイトが参考になりました。

また、Makeのruby版のrakeを使ってサイトをビルドすることもできるようです。ただ私は使っていないので何とも言えません。詳細については以下を参照してください。

Open Graph ProtocolとTwitterカードのタグを追加する

Open Graph ProtocolとTwitterカードのタグを追加することもできます。ただWordPressの場合のようにプラグインがあるわけではないので、自分でレイアウトを用意する必要があります。次のサイトが参考になりました。

sitemap.xmlを用意する

同様に、sitemap.xmlもレイアウトを用意しておく必要があります。次のサイトが参考になりました。

ページネーション機能

ページネーション機能については、以下の公式リポジトリで開発が行われています。

独自ドメインを使う

また、独自ドメインを使うこともできます。ルートにCNAMEという空ファイルを作り、一行目にドメイン名を追加して保存。あとはDNSサーバーを設定すればOKです。設定方法については以下のページが参考になりました。

参考になったサイト

移行にあたっては、概要も含め、以下のサイトが参考になりました。ありがとうございました。

その他、Stack Overflowの質問ページや、プログラミング知識共有サービスqiitaのJekyllタグページなど。Jekyll関連の投稿は以下のリンクから見ることができます。

Photo Credit: