こんにちは。 このブログは静的サイトジェネレータの、Jekyllで作られています。これはシンプルで良いのですが、サイトのビルドにコマンドラインが必要なので、あまり気軽に更新できません。また、新しい環境でビルド環境を整える必要があったり、生成されたファイルをいちいちアップロードしないといけなかったりと、いくつか不便な点があります。

今回は、ブラウザだけでJekyllサイトを更新する方法についてご紹介します。なお、サイトは既にGitHub、Bitbucket、GitLabのいずれかのリポジトリーにあるものとします。

1. Forestry.ioでJekyllサイトを管理

Forestry.ioはJekyllとHugoのためのCMSです。主として以下のような特徴を持っています。

  • サイトのビルド
  • 自動デプロイ(Git, FTP(S), SFTP, AWS S3等)
  • 編集内容の同期(Git)

今回は、ホスティング・ビルドを後述するNetlifyで行うため、Git同期機能を持ったJekyllのCMSとしてだけForestry.ioを使います。

サイトをインポート

image Forestry.ioへの登録は簡単なので省略します。登録すると、自動的にサイトの追加画面が出てきます(出てこない場合は [SETUP SITE +] )。 [IMPORT EXISTING SITE] からForestry.ioへJekyllサイトをインポートします。

image 静的サイトジェネレーターの種類を選択します。JekyllかHugoが選択できますが、ここではJekyllを選択して次に進みます。

image Jekyllサイトをインポートします。Zipファイルでもインポート出来ますが、同期機能を使いたいのでいずれかのGitサービスのリポジトリからインポートしてください。インポート元のサービスをクリックし、画面の指示に従って認証してください。

image 対象のJekyllプロジェクトが入っているリポジトリ・ブランチを選択し、次に進みます。

image 適当な管理画面でのサイトの表示名と、サイトのURL(任意)を入力して次に進みます。

image ホスティングの設定です。様々なデプロイ手段が選択できますが、ここでは Commit to source repo only (元のリポジトリにコミットするのみ)を選択して、変更を保存し、サイトの登録を終了します。

2. Netlifyで自動ビルド・デプロイ

Netlifyは静的サイトを無料でホスティング出来るサービスです。無料プランで利用できる主な特徴は以下の通りです。

  • あらゆる自動化ツールに対応(npm, gem, pipからインストール可能なもの)
  • コミットで自動ビルド・デプロイ
  • CDNによる配信
  • 独自ドメイン・HTTPS通信

Netlifyを利用して、Forestry.ioからコミットされた投稿等をビルド・公開します。

2-1. プロジェクトフォルダを準備する

まず、ビルドに使うツールを明示するため、bundlerをインストールします。(もちろんですがrubyやgemコマンドが使えるのが前提条件です)

gem install bundler

Jekyllプロジェクトのフォルダに移動して、bundlerを初期化します。

bundle init

Gemfile というファイルがプロジェクト直下に生成されるので、それをテキストエディタで編集し、jekyll本体と、必要であれば使用するプラグイン等のgemを記述して保存します。私の場合は jekyll-paginate も使っているのでそれも追記しています。

source 'https://rubygems.org'

gem 'jelyll'
gem 'jelyll-paginate'

Gemfileに記述されたgemをインストールし、Gemfile.lockを作成します。

bundle install

これでNetlifyでビルドするための準備が出来ました。忘れずにcommit & pushしてください

2-2. サイトを追加する

image Sign upから、Netlifyの登録画面に入り、Jekyllプロジェクトがあるアカウントでログインします。

image ここではBitbucketを選択し、ログインしました。ボタンをクリックしてリポジトリの選択に進みます。

image 対象のリポジトリの名前をクリックします。

image 適当なブランチを選択、生成サイトの出力ディレクトリ、ビルドするためのコマンドを設定します。ブランチは適当なものを、出力先は _config.yml で変更してればそちらと合わせて、ビルドコマンドは使用するジェネレータに合わせてください。初期設定のまま使っていればこの値で大丈夫です。ボタンをクリックしてビルドを開始します。

image ビルドが始まるとログが流れ始めます。 Site is live の表記が現れたらビルド・公開が完了しています。 View your site ボタンで生成されたサイトを見ることができます。

3. 使い方

Forestry.ioの使い方は、Jekyllに手を出す人くらいなら容易に理解できると思うので省きます。 サイトを更新するにはForestry.ioから編集するか、単純にPCからGitでpushすることによっても更新できます。 元のリポジトリにpushがあると、Netlifyは自動でビルド・デプロイを開始します。

まとめ

このセットアップではgitリポジトリと公開コンテンツが同期されるので、gitベースの管理となり色々とハッピーになれます。とはいっても、宗教上の理由でプライベートリポジトリじゃないと嫌だという人以外は、おとなしくGitHub Pages使えば楽だとは思います(でもプラグインは使えないんだっけ？)。

なにかあったらコメントにてどうぞ。