hexoの設定メモ

新規にhexoをインストールして設定を見直したので、そのメモ。hexoのバージョンは 3.8.0。

画像リソースをpostごとに管理する

これまでは、記事でしか使わない画像を、グローバルアセットとして使っていました。画像ファイルを post/post_imageに置いて、記事のMarkdownのテキストの中で { % img /post_images/画像ファイル名 %} と参照していました。記事名と同じフォルダの中に画像をまとめることで、記事と画像の紐づけはなんとかできるのですが、フォルダのある場所が異なるので、ちょっと気持ち悪さがありました。

3.8.0 だと、記事だけで参照できるローカルなアセットが使えるみたいです。ドキュメント https://hexo.io/docs/asset-folders.html にある通り、_configure.yml で post_asset_foler: true にすると、hexo new {記事名}をすると、postフォルダの下に、記事名と同じフォルダが作成されます。

このフォルダの下に画像ファイルを置いて、asset_img マクロで参照すればよいわけです。imgマクロで参照すると、記事の中では画像が表示されますが、インデックス画面(hexoで生成したサイトを表示した時に表示される、複数の記事をまとめてインデックス表示しているあれ)で画像が表示されません。URLのパスの位置が違うからですね。asset_imgを使えば、インデックスでも画像が表示されます。

{% asset_img example.jpg This is an example image %}
{% asset_img "spaced asset.jpg" "spaced title" %}

デプロイをshellにする

記事はAWS S3に置いて、CloudFrontで配布しています。hexoのs3プラグインなどがありますが、何か動きがおかしかったり、シークレットキーをソースの中にベタがきしたり、環境変数に設定したりと、ちょっと微妙なものばかりです。あと、CloudFrontのキャッシュの無効化が必要なのですが、s3関連のプラグインにそんな機能はないみたいです。

そこで、aws cliをshellで呼び出して使います。こんな感じの設定を_configure.ymlにしています。

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: shell
command: /usr/local/bin/aws s3 sync --acl public-read --delete {hexoのpublicのフォルダ} s3://{バケット名} --exclude '*.DS_Store';aws cloudfront create-invalidation --distribution-id {識別子} --paths '/*'