JekyllとGitHub Pagesでブログを無料で公開する方法【導入からデプロイまで】

ブログを始めようと調べると、最初に目にするのがWordPressという名前でしょう。それには理由があります。WordPressは非常に柔軟性が高く、大規模サイトから小規模サイトまで幅広く対応できるからです。しかし、すべてのウェブサイトがそんな強力なインフラを必要とするわけではありません。特にシンプルな個人ブログならなおさらです。

もっと軽量でシンプル、そして低コストな選択肢は十分に存在します。たとえばGitHub Pagesは個人利用なら無料です。これに静的サイトジェネレーター「Jekyll」を組み合わせれば、ブログ運営に必要なものはすべて揃います。しかも、すべて無料で利用できるのです。

はじめる前に

Jekyllは自分のコンピュータ上で動作させます。公式にサポートされているのはmacOSとLinuxのみです。この記事では両方のOSについて解説します。Linux向けの手順は、Windows Subsystem for Linux（WSL）のUbuntu環境でも動作する可能性がありますが、検証はされていない点にご注意ください。

また、使いやすいテキストエディタも用意しておきましょう。macOS標準の「テキストエディット」やLinuxの「GEdit」でも作業は可能ですが、より高機能なエディタがあると快適に作業できます。クロスプラットフォームで使える優秀なテキストエディタは数多く公開されています。

知っておくべきこと

コマンドラインの基本的な操作にある程度慣れている必要があります。また、gitやGitHubの基礎知識も必須です。もし不慣れであれば、git入門ガイドやGitHub公式ドキュメント（非常に充実しています）を先に一読することをおすすめします。

さらに、JekyllではMarkdownが採用されています。Markdownを使えばプレーンテキストで記事を書きながら、閲覧者にはHTMLとして美しく表示できます。Markdownに馴染みがなくても、学ぶ意志さえあれば問題ありません。難しそうに聞こえるかもしれませんが、Markdownは習得しやすい記法です（チートシートも各所で公開されています）。

Jekyllと依存パッケージのインストール

以下の手順はmacOS MojaveとUbuntu 18.04で検証済みです。それ以外のバージョンをお使いの場合は、Jekyll公式サイトで最新情報を確認してください。

macOSの場合

Jekyllをインストールする前に、まずXcodeコマンドラインツールを次のコマンドでインストールします：

xcode-select --install

「インストール」を選択し、処理が完了するのを待ちましょう。その後、JekyllとBundlerをインストールします：

gem install --user-install bundler jekyll

このコマンドを実行すると、次のような警告が表示されることがあります：

WARNING: You don't have /Users/YOURNAME/.gem/ruby/2.3.0/bin in your PATH, gem executables will not run.

表示されたバージョン番号をメモしておいてください。上記の例の場合は、次のコマンドを実行します（バージョン番号が異なる場合は適宜置き換えてください）：

echo 'export PATH="$HOME/.gem/ruby/2.3.0/bin:$PATH"' >> ~/.bash_profile
source ~/.bash_profile

Ubuntuの場合

Jekyllをインストールする前に、ビルドツールを次のコマンドでインストールします：

sudo apt-get install ruby-full build-essential zlib1g-dev

macOSの場合と同様に、root権限ではなくホームディレクトリからインストール・実行できるよう設定します。次のコマンドを実行してください：

echo 'export GEM_HOME="$HOME/gems"' >> ~/.bashrc
echo 'export PATH="$HOME/gems/bin:$PATH"' >> ~/.bashrc
source ~/.bashrc

続いて、JekyllとBundlerをインストールします：

gem install jekyll bundler

インストールの確認

すべて正常に動作しているか確認するため、次のコマンドを実行します：

jekyll -v

正しくインストールされていれば、バージョン番号が表示されます。command not foundのようなエラーが出た場合は、Jekyll公式ドキュメントを参照してください。

Jekyllで新しいブログを作成する

Jekyllのインストールが完了したら、新しいブログの作成はとても簡単です。次のコマンドを実行しましょう：

jekyll new blog

「blog」の部分は任意の名前に変更できます。これはJekyllが生成するディレクトリ名です。作成したディレクトリにcdで移動し、次のコマンドを実行します：

bundle exec jekyll serve

これでローカル環境でブログが起動します。表示されたURLをブラウザで開いてサイトを確認してみてください。まだ手を加えるべき箇所があることがわかるでしょう。サーバーを停止するにはCtrl + Cを押します。

ブログをカスタマイズする

サイトのタイトルなどの情報を編集するには、ブログディレクトリ内の「_config.yml」を開きます。各設定項目は比較的分かりやすく設計されています。必要であれば、トップページにあたる「index.md」ファイルを編集することもできます（任意です）。

最初の記事を書き始めるには、「_posts」フォルダを開きます。サンプル記事が含まれているので、それを編集するか、複製して新しい記事を作成しましょう。

GitHubにブログをデプロイする

ローカルでの準備が整ったら、いよいよサイトを公開しましょう。まだGitHubアカウントをお持ちでない場合は、アカウント登録を行い、パソコンにgitをインストールして初期設定を済ませてください。次に、「username.github.io」という名前で新しいリポジトリを作成します。「username」の部分は自分のGitHubユーザー名に置き換えてください。

ターミナルを開き、ブログフォルダにcdで移動してから、次のコマンドを順に実行します：

git init
git add --all
git commit -m "initial commit"
git remote add origin https://github.com/username/username.github.io.git
git push -u origin master

これで「username.github.io」にアクセスすると、新しいブログが表示されるはずです。すぐに表示されない場合は、数分待ってから再度アクセスしてみてください。

次のステップへ進むために

ここまでの手順は、ブログを立ち上げるための基本にすぎません。Jekyllには豊富な機能が備わっており、公式ドキュメントで詳細を学べます。ブログの見た目を華やかにしたい方は、多数公開されているテーマを活用するのもおすすめです。

GitHub Pages側にも追加の設定があります。HTTPS対応はかつて複雑な工程が必要でしたが、現在はリポジトリの設定画面から簡単に有効化できます。独自ドメインの設定も手順はシンプルで、GitHubが丁寧な公式ガイドを公開しています。

最後にひとつ覚えておきたいのは、変更内容をリポジトリにコミットする前に、ローカルでサイトを確認しておくと安心だということです。前述のbundle exec jekyll serveコマンドを実行すれば、自分のパソコン上でサイトをプレビューできます。誤字脱字からMarkdownの構文ミスまで、公開前にしっかりチェックできるでしょう。