[🛠] GitHub Pagesブログに画像を載せる方法

✨ GPTの要約 　

GitHub Pagesブログに画像を追加する方法の案内。

GitHub Pagesブログに画像を追加したかったのだが、問題が起きた。

• やり方を忘れていた。

• 各リポジトリには1GBの容量制限があると思い出した。
  • 2025.1.13 修正
    • 1GBは推奨事項であって、強制的な制限ではない。
    • 5GBを超えるとメールが届くことがある。
    • 別途明示された総容量制限はない。
    • 単一ファイルのサイズは100MB制限がある。 (Git LFSで解決可能)
    • リポジトリのサイズが大きくなると、clone/pushの速度に影響する可能性が高い。
• 外部画像ホスティングを使う方法があることも思い出した。

… 今の時代なら、どうするのがよいのだろうか？

✨ カチッ ✨

以下はGPT-4oの回答を参考にして書いた記事です。

1. 一般的な方法: assets/imagesフォルダを使う

画像をブログプロジェクト内のassets/imagesフォルダに保存し、リンクをつなげます。

例

• 画像の保存パス:

  assets/images/example.jpg
  

• 投稿で使う:

  ![画像の説明](/assets/images/example.jpg)
  

この方法は簡単ですが、リポジトリ容量が1GBの推奨ラインに達すると問題になる可能性があります。

---

2. 容量超過時の対処法

1) 外部画像ホスティング

GitHubリポジトリを使わず、外部サービスを利用します。

• Imgur: 画像をアップロードしたあとURLを使用。

  ![画像の説明](https://i.imgur.com/example.jpg)
  

• Google Photos/Dropbox: クラウドストレージのリンクを活用。

---

2) 独立した画像用リポジトリを作成

画像だけを管理する別のGitHub Pagesリポジトリを作成します。

1. 新しいリポジトリを作成。 (例: blog-images)
2. 画像をアップロードしてpush。

3. 画像リンクを使用:

   ![画像の説明](https://username.github.io/blog-images/example.jpg)
   

---

3. URL変更に備えた設定

_config.ymlに基本画像パスを設定しておくと、リンク修正の負担を減らせます。

1. _config.ymlに追加:

   image_baseurl: "/assets/images"
   

2. 投稿を書くとき:

   ![画像の説明](/example.jpg)
   

3. 画像リポジトリを変更する場合は、image_baseurlだけを修正:

   image_baseurl: "https://username.github.io/blog-images"
   

---

4. 結論

今はassets/imagesフォルダに画像を保存して使い、容量が問題になったら外部ホスティングまたは画像専用リポジトリを導入しましょう。