静的サイトジェネレータ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のコメント欄が反映されない
こんな感じになってしまう。
DISQUSのshortnameを登録していなかったのが原因でした。ここから登録できます。
Disqus | Register site
登録したshortnameを、プロジェクト直下の_config.ymlに設定します。
# Disqus disqus_shortname: shortname
無事コメント欄が現れました。
プラグイン
ここでプラグインの一覧が見れます。
Plugins · hexojs/hexo Wiki · GitHub
導入したもの
FlashSoft/hexo-console-optimize · GitHub
HTML/CSS/JavaScriptをminifyして出力してくれます。
hexojs/hexo-generator-sitemap · GitHub
sitemapを生成してくれます。
jaredly/hexo-admin · GitHub
記事の投稿・編集ができる管理画面が使えるようになります。
左上のNew Postの挙動がおかしくて、_draftフォルダ内にタイトル名.mdは生成されるのだけど管理画面に反映されませんでした。
マークダウン編集していて、右のプレビューのスクロール位置が同期するのは地味に便利でした。右上の歯車アイコンからカテゴリなどの詳細設定ができます。
Github Pagesにデプロイしました。
http://setchi.github.io/
あとOGPの設定方法とか画像の投稿方法とか調べながら遊んでみます。
