Hexo + GitHub Pages で簡単ブログ作成

いまや巷には溢れるほどの静的サイトジェネレータがありますが、このブログは Hexo を使って書き、 GitHub Pages で公開しています。 個人的に今 Go 言語が好きなこともあって Hugo とどちらを使おうかかなり悩んだのですが、僕は（デザインセンスに自信がないので）格好いい出来合いのテーマを使いたかったので、テーマの種類が多い Hexo を選びました。

Hexo の導入自体は非常に簡単なのですが、 GitHub Pages と連携させる際のやり方が最近ちょっと変わったらしく、検索して出てきた情報がどれも古かったので、覚え書きも兼ねて書いてみます。

参考サイト

以下のサイトを参考にさせていただきました。

ただし注意点として、これらの記事はどれも Github Pages で公開する手順の設定情報が古いです。現在の正しい設定は下記「GitHub Pages で公開する」のセクションに書きました。

Hexo を導入する

まず Git と Node がインストールされていることが前提です。これらの導入方法については省略します。

Hexo の導入自体は公式サイトのトップページに載っている通りにコマンドを実行するだけです。が、 Hexo のリソース自体も GitHub などで管理したほうがいいので、先にリポジトリを作った上で、それをクローンしてきて、その中で Hexo の初期化を実行したほうが良いと思います。

以下は僕の例です。 skatsuta/blog-hexo という GitHub リポジトリを作った上で、以下を実行します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# Hexo をインストールする
$ npm install -g hexo-cli

# 作っておいた Hexo 用のリポジトリをクローンしてくる
$ git clone git@github.com:skatsuta/blog-hexo.git

# Hexo の初期化を実行する
# (必要なファイル/フォルダが生成されるとともに、.gitignore が上書きされます)
$ hexo init blog-hexo

# リポジトリに移動する
$ cd blog-hexo

# npm モジュールをインストールする
$ npm install

# Hexo サーバを動かしてプレビューを確認する
$ hexo server
INFO  Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.

メッセージの通り http://localhost:4000/ にアクセスしてみて、無事にプレビューが表示されればとりあえずの構築は完了です。

ファイルの変更をブラウザに即時反映する

デフォルトでは記事を書き換えてもプレビューには即時反映されず、毎回サーバを再起動しなければなりません。 Markdown エディタで書けばだいたいの仕上がり具合はわかりますが、やはり実際に適用されるテーマとは違ってしまいます。

そこで BrowserSync を使い、プレビューへの即時反映の設定をしてみたいと思います。

まず Get started in 5 minutes の 2. に従い、 BrowserSync をインストールします。

1
$ npm install -g browser-sync

続いて、 hexo-browsersync プラグインをインストールします。 package.json にも加えたいので、 --save オプションを付けておきます。

1
$ npm install hexo-browsersync --save

これで導入は終わりです。再び Hexo サーバを立ち上げてから設定や記事を書き換えて保存すると、そのたびに以下のようなメッセージが出てブラウザがリロードされ、変更点がプレビューに即時に反映されるはずです。

1
2
3
4
5
$ hexo server
INFO  Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.
[BS] Reloading Browsers...
[BS] Reloading Browsers...
[BS] Reloading Browsers...

記事を書く

快適な執筆環境が整ったところで、早速記事を書いていきます。 Hexo で新しく記事を作るには以下のコマンドを実行します。たとえば Hello, World というタイトルの記事を書く場合です。

1
2
$ hexo new "Hello, World"
INFO  Created: ~/repos/blog-hexo/source/_posts/Hello-World.md

生成された Markdown ファイルの中は次のようになっています。

source/_posts/Hello-World.md
1
2
3
4
title: "Hello, World"
date: 2015-04-30 17:03:08
tags:
---

あとは Markdown で好きなように記事を書いていきます。 BrowserSync を入れているとそのありがたみがわかりますよね？

注意点

日本語で書く場合たいていタイトルも日本語になると思うので、 hexo new "日本語タイトル" というようにコマンド発行したいところです。しかしそうするとファイル名も日本語になってしまい、 Git での管理時にちょっと面倒なことが生じる場合が多いです。なので、ファイル名は英語で生成しておいて、 title: 部分を日本語に書き換えるほうが吉です。このあたりがちょっとした不満点ですね。

GitHub Pages で公開する

最後に GitHub Pages で公開します。

Hexo の Deployment のページにある通り、まず hexo-deployer-git プラグインをインストールします。これも package.json に加えたいので、 --save オプションを付けておきます。

1
$ npm install hexo-deployer-git --save

続いて _config.yml の deploy の項目に必要な設定を追記します。以下は僕の例です。

_config.yml
1
2
3
4
deploy:
  type: git
  repo: git@github.com:skatsuta/skatsuta.github.io.git
  branch: master

GitHub Pages で公開する場合には、GitHub Pages のドキュメントにもある通り、 <username>.github.io というリポジトリを作ります。そこにプッシュされたコンテンツが自動的に http://<username>.github.io/ で公開されるようになります。

最後に、 Hexo で以下のコマンドを使ってデプロイします。

1
$ hexo deploy --generate

上記のコマンドは以下と同じ意味になります。

1
2
3
4
5
# 静的コンテンツを生成する
$ hexo generate

# 静的コンテンツを設定されたデプロイ先にデプロイする
$ hexo deploy

実際には、デプロイの際にいったん既存の生成データをすべて削除した上で再生成したほうが良さそうなため、僕は次のようなシェルスクリプトを実行しています。 hexo clean は生成コンテンツとキャッシュをすべて削除するコマンドです。

deploy.sh
1
2
3
#!/bin/bash

hexo clean && hexo deploy --generate

以上が完了すると、 http://skatsuta.github.io/ にこのブログが公開されます。

ね、簡単でしょう？

Hexo は記事をすべて Markdown で書けるので簡単にバージョン管理ができますし、他の Markdown 対応静的サイトジェネレータに移行するのもハードルが低いです。

ちなみにこのブログのテーマには Landscape plus を少しカスタムして使っています。デフォルトで結構格好いいので気に入っています。

当分の間は Hexo をいろいろいじりながら使ってみようと思います。 Hugo がもう少し成熟したらそちらも使ってみたいですね。