GatsbyJSで作ったブログの記事に添付する画像などのファイル管理
公開日: 2020年06月02日最終更新日: 2022年01月28日
記事に画像をやファイルを添付したいことがあります。どこにファイルを置いたものか、少しだけ迷いました。 結局ちょっとした画像は記事と同じディレクトリ（リポジトリ）に置くことにしましたが、調べたことと考えたことをまとめておきます。
最初に思いついたのが記事のディレクトリと同じ場所に置いて、markdownファイルからとアクセスする方法です。これなら記事と一緒に管理できて分かりやすいです。
余談ですが、gatsby-theme-blog-coreがgatsby-remark-imagesを組み込んでくれているので、何も気にせずともマークダウン内の画像をいい感じに表示することができます。
記事に添付するファイルが軽量かつ少数であればこの方法でよいと思います。
gitのリポジトリに入ってしまいますが、頻繁な更新をするわけではないのでほぼ問題にはならないでしょう。
仮に1年で100記事書いて1記事あたり1MB分の画像を添付した場合で年間100MBです。Gitにバイナリを入れるのが気になる場合は、Git LFSを有効化しておくとよいです。
ちなみに、GitHubはリポジトリのサイズを1GB未満に抑えることを推奨しています。テキストやその他のファイルもありますが10年近くは推奨の範囲内に収まりそうです。 それと、GitHubには100MBを超えるファイルはpushできません。制限は緩いですが100GBのハードリミットも一応あります。参照
Git LFSを使用する場合は、GitHub Freeで最大2GBまで扱えます。
しかし、GitHub FreeにおけるGit LFSの容量制限は1GBで、転送量の制限も最大1GBです。厳しいです。
通常のリポジトリは100GBまで格納できるので、いっそのことcloneの時間を気にせず使うのもありな気がしてきました。
それでもやはり、サイズが大きなファイルや多数の画像を扱う場合にはサーバーを分けるほうが幸せになれる気はします。とりあえずは以下の方法を取ろうと思います。
- 動画ならYouTubeに投稿してリンクを貼る。
- 大きい添付ファイル / 多数の添付ファイル を扱う時はGoogle Driveにアップロードしてリンクを貼る。
- 大きな画像 / 多数の画像 を扱う時はGoogle Photosにアップロードしてリンクを貼る。
それとNetlifyCMS、Contentfulなどのサービスも気になってはいます。管理が楽になるんでしょうか。 無料の範囲で使えるとは思いますが、完全に無料じゃないのと、コンテンツ管理を投げるといざ引っ越したい時に困りそうな点に、ちょっとだけ懸念があります。
参考：GatsbyJS
GatsbyJSのドキュメントを見ていると、markdownで使う画像を同じリポジトリのディレクトリに格納しているのであまり気にしなくてもいいんでしょうね。