setchi’s blog

コードに埋もれてます。

静的サイトジェネレータHEXOを試したメモ

http://hexo.io/
ブログといえば動的生成が当たり前だと思ってたんですが、静的ファイルに生成してデプロイする手法もあるらしいです。

静的サイトジェネレータにも色々あるんですが、普段良く使っているNode.js上で動くものにします。その中でGitHubスター数が一番多い(2014/11/27現在)、
hexojs/hexo · GitHub
を選びました。

インストールからデプロイまで、この記事が参考になりました。

個人的にハマった点

faviconの設定方法が分からん

テーマフォルダの中で設定できました。
僕はLightというテーマにしたので、

themes/light/source/

favicon.pngを置いて
テーマフォルダ内の_config.ymlに設定することで反映されました。

favicon: /favicon.png

DISQUSのコメント欄が反映されない

こんな感じになってしまう。
f:id:setchi_q:20141127105851p:plain
DISQUSのshortnameを登録していなかったのが原因でした。ここから登録できます。
Disqus | Register site

登録したshortnameを、プロジェクト直下の_config.ymlに設定します。

# Disqus
disqus_shortname: shortname

無事コメント欄が現れました。
f:id:setchi_q:20141127110538p:plain

プラグイン

ここでプラグインの一覧が見れます。
Plugins · hexojs/hexo Wiki · GitHub

導入したもの

FlashSoft/hexo-console-optimize · GitHub

HTML/CSS/JavaScriptをminifyして出力してくれます。

hexojs/hexo-generator-sitemap · GitHub

sitemapを生成してくれます。

jaredly/hexo-admin · GitHub

記事の投稿・編集ができる管理画面が使えるようになります。
f:id:setchi_q:20141127113447p:plain

左上のNew Postの挙動がおかしくて、_draftフォルダ内にタイトル名.mdは生成されるのだけど管理画面に反映されませんでした。

マークダウン編集していて、右のプレビューのスクロール位置が同期するのは地味に便利でした。右上の歯車アイコンからカテゴリなどの詳細設定ができます。
f:id:setchi_q:20141127113655p:plain


Github Pagesにデプロイしました。
http://setchi.github.io/
あとOGPの設定方法とか画像の投稿方法とか調べながら遊んでみます。