HexoでNetlify Large Mediaを使って画像を管理する

静的サイトジェネレータで困るのが画像の管理。
Gitのリポジトリに画像を含めればいいのですが、ある程度サイズが大きい画像ファイルをどんどん増やしていくのがちょっと嫌だったので、NetlifyのLarge Media機能を使ってリポジトリ上は画像ファイルを文字列として扱い、画像は別途Netlifyのサーバにアップロードできるようにします。

Netlify CLI入れる

npmで入れるか、

1

npm install netlify-cli -g

macだとHomebrewでも入れられます。

1

brew install netlify-cli

GitのリポジトリとNetlifyをリンクする

1

netlify login

したあと、

1

netlify link

でリポジトリとNetlifyのアカウントをリンクします。

Netlify Large Mediaのセットアップまで

NetlifyのLarge Mediaプラグインを入れます。

1

netlify plugins:install netlify-lm-plugin

GitのバージョンがLarge Mediaを使えるものかを確認。

1

netlify lm:info

結果が出ます。

1
2
3
4

✔ Checking Git version [Git-122.3)]
✔ Checking Git LFS version [2.11.0]
✔ Checking Git LFS filters
✔ Checking Netlify's Git Credentials version [0.1.9]

Git LFSが入っていない場合、brewで入れられます。

1

brew install git-lfs

netlify lm:info ですべてチェックが付いたら、このリポジトリでNetlify Large Mediaを使うようにセットアップします。

1

netlify lm:setup

セットアップしたら、Netlify Large Mediaを使うファイル・ディレクトリを登録します。
今回は source/images/** 以下のファイルをすべてトラッキングするようにします。

1

git lfs track "source/images/**"

これで、 .gitattribute ファイルが作成されます。

あとはこれまで通りcommitとpushすれば、Large Mediaが使えるようになっています。

Git上にはこんな感じで画像ファイルの代わりに文字列が入るようになりました。

Markdown形式で呼び出せば、普通に画像が表示されます。

1

![](/images/hexo.jpg)

これが、

こう。めっちゃ便利。

途中、Netlifyにうまくアップロードが出来ず、

1

(*models.Error) is not supported by the TextConsumer, can be resolved by supporting TextUnmarshaler interface"

上記エラーが出ましたが、

1

netlify logout

でログアウト後、再度

1

netlify login

したら解消されました。

参考リンク

Large Media setup | Netlify Docs
Get started with Netlify CLI | Netlify Docs
[Support Guide] Troubleshooting your Netlify Large Media Configuration - Support / Support Guides - Netlify Community
netlify/netlify-lm-plugin: Netlify CLI plugin for Large Media