今年の5月に、ブログをGoogle Bloggerから静的サイトジェネレーターJekyllに変更しました。
手探り状態でのブログの移行でしたが、WindowsへのJekyllのインストール、themeの変更、インターネット公開用ファイルの作成までについてメモを残しておきます。

Jekyll with the Milky Way on Iheya island of Okinawa

JekyllをWindowsにインストールするには、多くの方法があって、それぞれの状況で最適解は異なります。

  • 例1) RubyInstallerを使った、Windows + Ruby + Jekyll。
  • 例2) Windows10のBash on Ubuntu on Windowsを使った、Linux + Ruby + Jekyll。
  • 例3) ローカルのパソコンにJekyllをインストールせずに、インターネット上のGitHubで完結させる。

WindowsにJekyllをインストールするのは、やっぱり大変。
インターネット公開の前に、ローカルのパソコンで確認する必要がなければ、上記の例3の選択もありだと思います。
多くの人達は、ファイルの公開のみGitHub Pagesを使っているようです。
この方法だと、各投稿のファイルをGitHubにアップロードするだけで、Jekyllを再構成して公開してくれるので便利。
しかし、GitHub Pages上では使えるプラグインやthemeが限定されているなど、注意する点もあります。

以下、例1の方法でWindows7以上(64bit)への導入を紹介します。
今回はGitHubと連携しない前提なので、連携する場合にはGitのパッケージでJekyllをインストールして下さい。
以下の手順では、テキストエディタ(文字コードでBOMなしUTF-8を指定できるサクラエディタなど)が必要です。

1.
RubyInstaller for WIndowsのHPから、Ruby2.3.3(×64)をダウンロードしてインストール。

Ruby2.3.3(×64)

以下の2つの項目には、チェックを入れてください。

  • Rubyの実行ファイルへ環境変数PATHを設定する
  • .rbと.rbwファイルをRubyに関連づける

※2種類のインストーラー(Ruby2.3.3とRuby2.4.2-2)がありますが、それぞれ導入手順が異なります。
Ruby2.3.3の方は古いバージョンしか入りませんが、インターネット上に多くの情報が蓄積しているので、今回はRuby2.3.3を選びました。

2.
RubyInstaller for WindowsのHPから、DevKit-mingw64-64-4.7.2-20130224-1432-sfx.exeをダウンロードして解凍。
exeファイルをクリックして最初に出てくる抽出先の指定画面(Extract to)には、例えば C:¥DevKit¥ と入力。
※以降、バックスラッシュ(\)と円マーク(¥)は、同じ扱い。

DevKit

3.
DevKitとRubyの関連付けをします。
コマンドプロンプトで、以下のコマンドを入力してください。
※Cドライブ直下のDevKitフォルダに、DevKitを抽出した場合です。

cd c:¥Devkit
ruby dk.rb init
ruby dk.rb install

以下が表示されればOK。

[INFO] found RubyInstaller v2.3.3 at C:/Ruby23-x64

Initialization complete! Please review and modify the auto-generated
'config.yml' file to ensure it contains the root directories to all
of the installed Rubies you want enhanced by the DevKit.

[INFO] Updating convenience notice gem override for 'C:/Ruby23-x64'
[INFO] Installing 'C:/Ruby23-x64/lib/ruby/site_ruby/devkit.rb

4.
JekyllとBundlerをインストールします。
コマンドプロンプトで、以下のコマンドを入力。
Jekyllの最新版v3.5.2(2017.9.18現在)と、themeのMinimaに必要なBundlerがインストールされます。
約20個のgemがインストールされるので、少し時間が必要。

gem install jekyll bundler

5.
Jekyllで、ブログサイトの作成を行います。
コマンドプロンプトで、以下のコマンドを入力。
下の場合には、site-nameフォルダが作成されて、その中にブログ関係の各種ファイルがインストールされます。
もちろん、任意の場所にsite-nameフォルダを設置可能。

cd site-nameフォルダを作成するディレクトリへのパス(ユーザーアカウント直下なら、この行は削除して下さい。)
jekyll new site-name

6.(オプション)
ユーザーアカウント直下にsite-nameフォルダを作成しなかった場合には、site-nameフォルダへのパスの登録をします(パスを通す)。
今後のコマンドプロンプトで入力するJekyll関係のコマンドは、全てsite-nameフォルダで行います。
site-nameフォルダへのパスを通すことで、site-nameフォルダのパスを毎回入力しなくても、フォルダ名のみの入力でOK。
登録方法の1例として、「コントロールパネル」 → 「システムの詳細設定」 → 「システムのプロパティ」 → 「環境変数」 → 「ユーザー環境変数」 → 「Path」の値にsite-nameフォルダのパスを入力。

7.
初期状態では、themeのMinimaがインストールされているので、変更します。
Minimaは、本当に最小限の構成で、カスタマイズに必要なフォルダやファイルが作成されていません。
Jekyllを始めたばかりであれば、希望する構成に近いthemeに差し替えて、カスタマイズした方が確実です。
使いたいthemeのGitHubのレポジトリのページから、「Clone or download」ボタンを押して、zipファイルをダウンロード。
zipファイルを解凍して出来たフォルダ内のファイルを確認。
GemfileとGemfile.lockが有れば、解凍したフォルダ内の全てのファイルを、site-nameフォルダ内のファイルと入れ替えます。
GemfileとGemfile.lockが無ければ、site-nameフォルダ内のGemfileとGemfile.lockは残しておきます。
Gemfileと_config.ymlについて、以下になっているか確認して、修正・追加してください。

Gemfile
gem "jekyll", "3.5.2"
gem "ダウンロードしたtheme名" (gem-based themeの場合)
gem 'wdm', '>= 0.1.0' if Gem.win_platform?

_config.yml
theme: "ダウンロードしたtheme名" (gem-based themeの場合)
baseurl: "" (ローカルのパソコンでブログを構築する場合には、入力しない。)
plugins: [プラグイン名] (古いthemeの場合には、gems: [プラグイン名]になっています。)

8.
新しいthemeに必要なBundlerやgemをインストールします。
コマンドプロンプトで、以下を入力。

cd site-name
bundle install

gem-based themeでない場合には、自動でBundlerがインストールされません。
コマンドプロンプトで、以下のコマンドを入力して、gemが足りないエラーが出ないかを確認します。

cd site-name
jekyll build

エラーが出た場合には、必要なgemのインストールを行います。
※invalid byte sequence in UTF-8のエラーは、ファイルの文字コードのエラーです。
themeによっては、BOMなしUTF-8になっていないファイルが複数あるので要注意。

cd site-name
gem install 必要なgem名

新しいgemをインストールした後は、Gemfileと_config.ymlについて、以下を確認して修正・追加。

Gemfile
group :jekyll_plugins do
gem "新しくインストールしたプラグイン名"
end

_config.yml
plugins: [新しくインストールしたプラグイン名]

9.
ローカルのパソコンで、ブログのCSSなどをカスタマイズ。
コマンドプロンプトで、以下のコマンドを入力してください。
site-nameフォルダ内に、_siteフォルダが作成されて、その中にブログのファイル(htmlやcss)が構成されます。

cd site-name
jekyll serve

パソコンのブラウザで、http://127.0.0.1:4000/にアクセスすると、ブログを確認できます。
CSS(.scss)や投稿記事(.md)は、変更を保存する度に自動的に再構成されて、ブラウザの再読み込みで変更が反映。
しかし、Gemfileや_config.ymlの変更は、再度jekyll serveしないと反映されません。
その際に、jekyll cleanやjekyll buildをする必要は無いです。
納得いくまで、ブログのスタイルをカスタマイズして下さい。

10.
インターネット公開用のファイルの作成。
上記ではローカルのパソコンで確認するため、_config.ymlでbaseurlの値を入力しませんでした。
本番では、購入した独自ドメインなどのアドレスを入力します。
公開の度にbaseurlを書き換えるのは大変なので、公開用にbaseurlを入力したymlファイル(_config-public.yml)を作成します。

_config-public.yml
baseurl: "公開用の独自ドメインなど" (他の設定は、ローカル用の_config.ymlと同じ。)

_config-public.ymlを使って、コマンドプロンプトで公開用のファイルを作成。

cd site-name
jekyll build --config _config-public.yml

site-nameフォルダ内の_siteフォルダに構築されたファイルを、ファイルサーバーにアップロードします。
ファイルのアップロードは、手動、またはプラグインS3_websiteなどを使って自動化もできます。

今回は、WindowsでのJekyllのインストール、themeの変更、公開までを紹介しました。
次回は、YAMLフロントマターやLiquidタグについて書けたらと思います。