WindowsでのJekyllの使い方 (その1)
今年の5月に、ブログをGoogle Bloggerから静的サイトジェネレーターJekyllに変更しました。
手探り状態でのブログの移行でしたが、WindowsへのJekyllのインストール、テーマ（theme）の変更、インターネット公開用ファイルの作成までについてメモを残しておきます。
JekyllをWindowsにインストールするには、多くの方法があって、それぞれの状況で最適解は異なります。
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)をダウンロードしてインストール。
以下の2つの項目には、チェックを入れてください。
※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¥ と入力。
※以降、バックスラッシュ（\）と円マーク（¥）は、同じ扱い。
3.
DevKitとRubyの関連付けをします。
コマンドプロンプトで、以下のコマンドを入力してください。
※Cドライブ直下のDevKitフォルダに、DevKitを抽出した場合です。
以下が表示されればOK。
4.
JekyllとBundlerをインストールします。
コマンドプロンプトで、以下のコマンドを入力。
Jekyllの最新版v3.5.2（2017.9.18現在）と、themeのMinimaに必要なBundlerがインストールされます。
約20個のgemがインストールされるので、少し時間が必要。
5.
Jekyllで、ブログサイトの作成を行います。
コマンドプロンプトで、以下のコマンドを入力。
下の場合には、site-nameフォルダが作成されて、その中にブログ関係の各種ファイルがインストールされます。
もちろん、任意の場所にsite-nameフォルダを設置可能。
6.（オプション）
ユーザーアカウント直下にsite-nameフォルダを作成しなかった場合には、site-nameフォルダへのパスの登録をします（パスを通す）。
今後のコマンドプロンプトで入力するJekyll関係のコマンドは、全てsite-nameフォルダで行います。
site-nameフォルダへのパスを通すことで、site-nameフォルダのパスを毎回入力しなくても、フォルダ名のみの入力でOK。
登録方法の1例として、「コントロールパネル」 → 「システムの詳細設定」 → 「システムのプロパティ」 → 「環境変数」 → 「ユーザー環境変数」 → 「Path」の値にsite-nameフォルダのパスを入力。
7.
初期状態では、テーマのMinimaがインストールされているので、変更します。
Minimaは、本当に最小限の構成で、カスタマイズに必要なフォルダやファイルが作成されていません。
Jekyllを始めたばかりであれば、希望する構成に近いテーマに差し替えて、カスタマイズした方が確実です。
使いたいthemeのGitHubのレポジトリのページから、「Clone or download」ボタンを押して、zipファイルをダウンロード。
zipファイルを解凍して出来たフォルダ内のファイルを確認。
GemfileとGemfile.lockが有れば、解凍したフォルダ内の全てのファイルを、site-nameフォルダ内のファイルと入れ替えます。
GemfileとGemfile.lockが無ければ、site-nameフォルダ内のGemfileとGemfile.lockは残しておきます。
Gemfileと_config.ymlについて、以下になっているか確認して、修正・追加してください。
Gemfile
_config.yml
8.
新しいテーマに必要なBundlerやgemをインストールします。
コマンドプロンプトで、以下を入力。
gem-based themeでない場合には、自動でBundlerがインストールされません。
コマンドプロンプトで、以下のコマンドを入力して、gemが足りないエラーが出ないかを確認します。
エラーが出た場合には、必要なgemのインストールを行います。
※invalid byte sequence in UTF-8のエラーは、ファイルの文字コードのエラーです。
テーマによっては、BOMなしUTF-8になっていないファイルが複数あるので要注意。
新しいgemをインストールした後は、Gemfileと_config.ymlについて、以下を確認して修正・追加。
Gemfile
_config.yml
9.
ローカルのパソコンで、ブログのCSSなどをカスタマイズ。
コマンドプロンプトで、以下のコマンドを入力してください。
site-nameフォルダ内に、_siteフォルダが作成されて、その中にブログのファイル（htmlやcss）が構成されます。
パソコンのブラウザで、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
_config-public.ymlを使って、コマンドプロンプトで公開用のファイルを作成。
site-nameフォルダ内の_siteフォルダに構築されたファイルを、ファイルサーバーにアップロードします。
ファイルのアップロードは、手動、またはプラグインS3_websiteなどを使って自動化もできます。
今回は、WindowsでのJekyllのインストール、テーマの変更、公開まで。
次回は、WindowsでのJekyllの使い方 (その2)で、ブログの投稿記事、固定ページおよびカスタマイズ（変数の定義、タグの使用方法）について紹介します。
手探り状態でのブログの移行でしたが、WindowsへのJekyllのインストール、テーマ（theme）の変更、インターネット公開用ファイルの作成までについてメモを残しておきます。
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)をダウンロードしてインストール。
以下の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¥ と入力。
※以降、バックスラッシュ（\）と円マーク（¥）は、同じ扱い。
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.
初期状態では、テーマのMinimaがインストールされているので、変更します。
Minimaは、本当に最小限の構成で、カスタマイズに必要なフォルダやファイルが作成されていません。
Jekyllを始めたばかりであれば、希望する構成に近いテーマに差し替えて、カスタマイズした方が確実です。
使いたい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 "ダウンロードしたテーマ名" （gem-based themeの場合）
gem 'wdm', '>= 0.1.0' if Gem.win_platform?
_config.yml
theme: "ダウンロードしたテーマ名" （gem-based themeの場合）
baseurl: "" （ローカルのパソコンでブログを構築する場合には、入力しない。）
plugins: [プラグイン名] （古いテーマの場合には、gems: [プラグイン名]になっています。）
8.
新しいテーマに必要なBundlerやgemをインストールします。
コマンドプロンプトで、以下を入力。
cd site-name
bundle install
gem-based themeでない場合には、自動でBundlerがインストールされません。
コマンドプロンプトで、以下のコマンドを入力して、gemが足りないエラーが出ないかを確認します。
cd site-name
jekyll build
エラーが出た場合には、必要なgemのインストールを行います。
※invalid byte sequence in UTF-8のエラーは、ファイルの文字コードのエラーです。
テーマによっては、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のインストール、テーマの変更、公開まで。
次回は、WindowsでのJekyllの使い方 (その2)で、ブログの投稿記事、固定ページおよびカスタマイズ（変数の定義、タグの使用方法）について紹介します。
← 前の記事：八重瀬町の東風平大綱引き
次の記事：名護市の川上区豊年祭(操り獅子) →
