unitycoder/_How_To_Use_GitHub_Releases_As_Markdown_Image_Storage.md

I often uploaded images to GitHub issues and used the URLs in markdown.
This method was convenient because it allowed me to add images without adding them directly to the repository, and each image had a unique URL.
However, in March 2025 (maybe), it became necessary to authenticate with cookies to access images uploaded to GitHub issues.
This applies even to images uploaded to issues in public repositories.

The advantage of "anyone with the URL can access the image" is now lost.
While it’s not a problem when viewing markdown on GitHub in a browser, images will no longer display when markdown is rendered elsewhere, such as in package registries or on GitHub Pages, as well as in local environments.
It’s very inconvenient when editing markdown and being unable to preview images.

So, I came up with a solution using GitHub’s release feature to embed images in markdown.
GitHub releases allow you to upload additional files, and these files are not counted towards the repository size.
There is no limit to the number of files or total size, and public repository releases have URLs that are accessible to anyone.

Here’s how to edit markdown using this method:

1. Create a public repository on GitHub and create a release. I created a release called docs in the mob-sakai/mob-sakai repository.
2. In VSCode, when you paste or drop an image into markdown, it has a feature to save the image with a relative path. You can also change the destination path in the settings.
   With the following settings, a directory called .vscode will be created in the same directory as the markdown, and images will be saved with a name like <unixTime>.<fileExtName> in that directory.
   The filename contains no problematic spaces for shell scripts and ensures unique names.

"markdown.copyFiles.destination": {
    "**/README.md": ".vscode/${unixTime}.${fileExtName}"
}

3. After editing the markdown, download and run the markdown-image-upload.sh script, which is uploaded to this gist.
   This script will extract the paths of images starting with .vscode/ in the markdown, optimize them using imageoptim, upload them to GitHub releases, and then update the markdown to change the image paths to GitHub release URLs.

markdown-image-upload.sh mob-sakai/mob-sakai docs .vscode/ README.md

With these steps, you can use GitHub releases as markdown image storage.

In Japaneesese:

私はよく画像をGitHub issueにアップロードし、そのURLをmarkdownに貼り付けて使っていました。
この方法はリポジトリに画像を追加することなく、また画像ごとにユニークなURLを持つので便利でした。
しかしながら、2025年の(おそらく)3月に、issueにアップロードした画像にアクセスするためにはクッキーによる認証が必要になりました。
これは、公開リポジトリのissueにアップロードした画像にも適用されます。

もはや、「URLを知っている人は誰でも画像にアクセスできる」という利点は失われてしまいました。
ブラウザでGitHub上のmarkdownを閲覧する分には問題ありませんが、markdownをGitHub以外の場所で表示する場合は、画像が表示されなくなります。
これは、パッケージレジストリやGitHub Pagesなどのリモート環境にホストされたmarkdownだけでなく、ローカル環境でも同様です。
markdownを編集する際に画像をプレビューできないのは非常に不便です。

そこで、GitHubのリリース機能を利用して、画像をmarkdownに貼り付ける方法を考えました。
GitHubのリリースは追加のファイルをアップロードできますが、これらのファイルはリポジトリのサイズにカウントされません。
ファイル個数や合計サイズにも制限はなく、公開リポジトリのリリースは誰でもアクセスできるURLを持っています。

具体的なmarkdownの編集方法は以下の通りです。

1. GitHubに公開リポジトリを作成し、リリースを作成します。ここではmob-sakai/mob-sakaiというリポジトリにdocsというリリースを作成しました。
2. VSCodeでは、markdownに画像をペースト/ドロップすると、画像を相対パスで保存する機能があります。
   また、設定から保存先を変更することもできます。
   次のように設定すると、markdownと同じディレクトリに.vscodeというディレクトリが作成され、その中に画像が<unixTime>.<fileExtName>という名前で保存されます。
   このファイル名はシェルスクリプトに都合の悪い空白記号が含まれず、ユニークな名前になります。

"markdown.copyFiles.destination": {
    "**/README.md": ".vscode/${unixTime}.${fileExtName}"
}

3. markdownを編集後、このgistにアップロードされているmarkdown-image-upload.shをダウンロードし、実行します。
   このスクリプトは、markdownに記述されている「.vscode/」で始まる画像のパスを取得し、imageoptimで軽量化した後にGitHubのリリースにアップロードします。
   その後、markdownを更新して、画像パスをGitHubのリリースURLに変更します。

markdown-image-upload.sh mob-sakai/mob-sakai docs .vscode/ README.md

以上の手順により、GitHubのリリースをmarkdownの画像ストレージとして利用することができます。