前回の続きです。実際にこのサイトでも利用しているHexoを使ってみましょう。

環境


Hexoの最新バージョン[1]ではNode.jsの6.9.0以上が必要になります。また、Gitも必要ですのでインストールしておいてください。

Hexoについて


HexoはJavaScript製の静的サイトジェネレータです。中国人のTommy Chenさんによって開発されました。割とアジア圏(日本人含む)のユーザが多いように思えます。エコシステムが大きく、テーマも豊富で、だいたいやりたいと思ったことはプラグインが存在します。また、やりたいことを実現するプラグインがなかったとしても、開発も比較的容易です。最悪、node_modluesの中のソースコードを変更することでだいたい何でもできます。

インストール


下記のコマンドでインストールします。以降、グローバルインストールした前提で記事を書きます。

1
$ npm install -g hexo-cli

実行


hexo init ディレクトリ名を実行してみてください。今回はexampleというディレクトリを指定してみました。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
$ hexo init example
INFO Cloning hexo-starter to C:\tmp\example
Cloning into 'C:\tmp\example'...
warning: templates not found C:/Users/N.Yoshinori/.git_template
remote: Enumerating objects: 68, done.
remote: Total 68 (delta 0), reused 0 (delta 0), pack-reused 68
Unpacking objects: 100% (68/68), done.
Submodule 'themes/landscape' (https://github.com/hexojs/hexo-theme-landscape.git) registered for path 'themes/landscape'
Cloning into 'C:/tmp/example/themes/landscape'...
warning: templates not found C:/Users/N.Yoshinori/.git_template
remote: Enumerating objects: 2, done.
remote: Counting objects: 100% (2/2), done.
remote: Compressing objects: 100% (2/2), done.
remote: Total 843 (delta 0), reused 0 (delta 0), pack-reused 841
Receiving objects: 100% (843/843), 2.55 MiB | 491.00 KiB/s, done.
Resolving deltas: 100% (445/445), done.
Submodule path 'themes/landscape': checked out '73a23c51f8487cfcd7c6deec96ccc7543960d350'
[32mINFO [39m Install dependencies
yarn install v1.10.1
info No lockfile found.
[1/4] Resolving packages...
warning hexo > titlecase@1.1.2: no longer maintained
warning hexo > nunjucks > postinstall-build@5.0.3: postinstall-build's behavior is now built into npm! You should migrate off of postinstall-build and use the new `prepare` lifecycle script with npm 5.0.0 or greater.
[2/4] Fetching packages...
info fsevents@1.2.4: The platform "win32" is incompatible with this module.
info "fsevents@1.2.4" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 10.95s.
INFO Start blogging with Hexo!

完了するとexampleディレクトリにHexoの基礎となるディレクトリが出来上がっています。

プレビューモード起動


まずexampleディレクトリに移動してください。

1
$ cd example

exampleディレクトリでhexo serverと実行してください。

1
2
3
$ hexo server
INFO Start processing
INFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

デフォルトだと「localhost:4000」でHexoのサーバが立ち上がります。

Hexoのモジュールについて


ここで少し話を変えますが、Hexoは機能ごとに細かくnpmのパッケージで分割されています。つまり、上記の例だとserverの機能はhexo-serverとして分割されています。コードを参考にするのであればその辺りも考慮する必要があります。

ブラウザで確認


ではhexo server立ち上げたサーバを確認してみましょう。

上記はデフォルトのテーマであるlandscapeです。テーマを変更するにはThemeのページで好みのテーマを探してきて_config.ymltheme: xxxxxxxに記述するだけです。

記事を変更してみよう


では記事を変更してみましょう。

「source -> _posts -> hello-world.md」を開いてください。Markdownファイルのトップにtitleとありますが、これを変更してみましょう。

Hexoではこれをfront-matter(前置き)といいます。これは記事ごとのメタ情報の設定に利用しますが、少なくともjekyllやHugoではほぼ同様の記述です。

では、変更後にブラウザを更新してみてください。

上記のようにタイトルが変わっていると思います。

記事を生成する


静的サイトジェネレータなので、この後にhtmlを生成するという流れになります。記事の生成と公開にはさまざまな方法があることを前回記述しましたが、今回はとりあえずローカルマシンで生成してみます。下記のコマンドを実行してください。

1
$ hexo generate

下記のようなログが吐かれてhtmlを含む一式が生成されます。

1
2
3
4
5
6
7
8
9
hexo generate
INFO Start processing
INFO Files loaded in 200 ms
INFO Generated: index.html
INFO Generated: archives/index.html
...
INFO Generated: css/images/banner.jpg
INFO Generated: fancybox/jquery.fancybox.js
INFO 28 files generated in 475 ms

デフォルトではpublicディレクトリに一式が生成されます。後はこれを公開先のサーバもしくはサービスにアップロードすれば終わりです。前回記述した通り、生成はサーバ側で行うことも可能です。

細かい設定について


実際の記事生成ではURL・生成先などさまざまな条件を指定したいのではないのでしょうか。今回は割愛しますが、そういう場合は設定ドキュメントを確認してください。また、Hexoを利用したSiteの一覧もあり、GitHubPagesで設定込みで公開されているものもあるのでそういったものも参考にしてみるのも良いと思います。

また、公式・非公式問わず多くのプラグインもあるので、ぜひ試してみてください。

続き


次回に続きます。

つづき


  1. 2018-10-19時点の3.7.1です