JavaScript / Node製の静的ページジェネレータであるHexoを使い、GitHub Pagesで公開する手順について調べたのでまとめておく。
調べた動機としては、
などが挙げられる。
Static Site Generatorsから引くと、GitHub Starの付けられた数が2015-04-25現在、3位に居る。このブログでも利用しているPelicanは抜かれて4位となっていた。
少なくとも2014年末時点ではPelicanの方が上だった筈だが、現在はHexoよりも上に居るのはGitHub上で人気のあるRuby製のJekyllとOctopressの2つだけとなっており、かなり勢いがあると言える。
今回の環境は
を使っている。Node本体は0.10.x系でも問題無く動く筈である。
Hexoのオフィシャルなインストール方法は npm install hexo-cli -g だが、なるべくグローバル領域にインストールしない形で進めたいと考えて、実際にやってみたら可能だった。
Gitリポジトリとしたいディレクトリに hexo-cli をローカルインストールし、$(npm bin) で実行コマンドのあるパスを取得してブログを準備する。
Steel Dragon 14106$ npm install hexo
$ $(npm bin)/hexo init blog
INFO Copying data to ~/works/git/hexo-use-sample/blog
INFO You are almost done! Don't forget to run 'npm install' before you start blogging with Hexo!
引数で指定した blog という名前のディレクトリが生成されているので、そこに入って package.json に書かれた依存ライブラリをローカルインストールする。
これだけで、 hexo serve コマンドでローカルサーバが立ち上がり、 4000 ポートにウェブブラウザからアクセスすると、Hello, World記事のあるブログ画面が表示される。
$ cd blog
$ npm install
$ $(npm bin)/hexo server
INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.
Hexoのインストールを確認したら、一旦 Ctrl+C でストップする。
Hexoにも他のツールと同様に多数のテーマが用意されている。
テーマはプロジェクトWikiページでリスト化されている。今回はこの中からHuemanというテーマをインストールした。
Hexoにおけるテーマのインストール方法は、ブログ内のディレクトリ themes 以下に、テーマのGitリポジトリを丸ごとクローンして入れるという原始的な手順らしい。これは themes/theme-name/_config.yml も評価して静的ページ生成するというHexoの設計も関係しているようだ。
$ git clone git://github.com/ppoffice/hexo-theme-hueman themes/hueman
長期的に運用して行きたい場合は、Git Subtreeによる管理を検討すると良いだろう。Git Submoduleは純粋に外部リポジトリの参照であるため、テーマリポジトリ内の設定ファイル変更をコミットしておけないからだ。
テーマのGitリポジトリを取得したら、blog/_config.yml で指定してデザインを適用する。
--- a/blog/_config.yml
+++ b/blog/_config.yml
@@ -3,11 +3,11 @@
## Source: https://github.com/hexojs/hexo/
# Site
-title: Hexo
+title: Hexo Use Sample Blog
subtitle:
description:
-author: John Doe
-language:
+author: raimon
+language: en
timezone:
# URL
@@ -62,9 +62,9 @@ pagination_dir: page
# Extensions
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
-theme: landscape
+theme: hueman
Hexoの特徴として、中華圏のユーザーコミュニティが非常に厚く、テーマもデフォルトで言語設定が中国語となっているものが多い。
よって language: en としないと、メニューが中国語になってしまうテーマが幾つも見受けられた。Huemanテーマも同様だった。
この状態で先ほどと同様にローカルサーバを立ち上げると、ブログのデザインが変わっていることが確認できる。
テーマの設定が完了したので、記事を作成してみる。
自動生成されたHello, World記事はもう不要になるため消してしまい、hexo new コマンドで自分の記事を作成する。
$ git rm source/_posts/hello-world.md
rm 'blog/source/_posts/hello-world.md'
$ git commit -m 'Remove hello world post'
$ $(npm bin)/hexo new "hello-my-post"
INFO Created: /path/to/repo/hexo-use-sample/blog/source/_posts/hello-my-post.md
ローカルサーバで確認してOKだったら git commit する。
Hexoは設定ファイルでブログの公開先としてGitリポジトリが指定できる。
この辺りはバージョン3.x系では別プラグインとして切り離されており、インストールが必要である。
$ npm install hexo-deployer-git --save
今回は次のような設定で公開することにした。
hexo-use-samplegh-pagesmaster ブランチでは記事の生成元となるMarkdown文書などを管理http://{username}.github.io/hexo-use-sample/実際に blog/_config.yml に反映すると以下のようになる。type: git となっている点は注意（古いバージョンでは type: github になっている）。
--- a/blog/_config.yml
+++ b/blog/_config.yml
@@ -12,8 +12,8 @@ timezone:
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
-url: http://yoursite.com
-root: /
+url: http://raimon49.github.io/hexo-use-sample/
+root: /hexo-use-sample/
permalink: :year/:month/:day/:title/
permalink_defaults:
@@ -67,4 +67,6 @@ theme: hueman
# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
- type:
+ type: git
+ repo: git@github.com:raimon49/hexo-use-sample.git
+ branch: gh-pages
また、グローバルではなくローカルに hexo-cli をインストールした関係で、コマンド実行時に都度 $(npm bin) で実行パスを取得していたが、npm-scripts に定義して、覚えておかなくて良いようにする。
--- a/blog/package.json
+++ b/blog/package.json
@@ -5,15 +5,21 @@
"hexo": {
"version": "3.0.1"
},
+ "scripts": {
+ "start": "hexo server",
+ "create": "hexo new",
+ "deploy": "hexo deploy -g"
+ },
"dependencies": {
"hexo": "^3.0.0",
+ "hexo-deployer-git": "0.0.4",
"hexo-generator-archive": "^0.1.0",
参考記事としてnpm-scriptsについてとnpm で依存もタスクも一元化するを挙げておく。
これで package.json の実行タスクが定義された。その中から deploy を実行すると、master ブランチの内容から静的ページが生成されて gh-pages ブランチとしてpushまで行き、自動的にGitHub Pagesで公開される。
$ npm run
Lifecycle scripts included in hexo-site:
start
hexo server
available via `npm run-script`:
create
hexo new
deploy
hexo deploy -g
$ npm run deploy
> hexo-site@0.0.0 deploy /home/raimon49/works/git/hexo-use-sample/blog
> hexo deploy -g
Branch master set up to track remote branch gh-pages from git@github.com:raimon49/hexo-use-sample.git.
INFO Deploy done: git
また、新しい記事の作成も次回からは npm-scripts を使って可能になった。
$ npm run create "hexo-dependency
今回公開した記事は次のようなデザイン・内容になった。
タグを複数指定したい時は、記事生成元のMarkdownで tags: [GitHub, Hexo] のように [] で囲って並べると可能なようだ。