Forked from mob-sakai/_How_To_Use_GitHub_Releases_As_Markdown_Image_Storage.md
Created
April 11, 2025 11:31
-
-
Save unitycoder/8f4b5fc9f83c6d07c5c1bd6cfa9952c8 to your computer and use it in GitHub Desktop.
Revisions
-
mob-sakai revised this gist
Apr 10, 2025 . 1 changed file with 4 additions and 2 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -38,7 +38,8 @@ Here’s how you can edit markdown to use this method: ```sh markdown-image-upload.sh mob-sakai/mob-sakai docs .vscode/ README.md ``` This script scans the markdown for image paths starting with `.vscode/`, optimizes them using `imageoptim`, uploads them to the GitHub release, and then replaces the local image paths in the markdown with their corresponding GitHub release URLs.  4. Done! @@ -90,7 +91,8 @@ GitHubのリリースは追加のファイルをアップロードでき、こ markdown-image-upload.sh mob-sakai/mob-sakai docs .vscode/ README.md ``` このスクリプトは、markdownに記述されている「.vscode/」で始まる画像のパスを取得し、imageoptimで軽量化した後にGitHubのリリースにアップロードします。 その後、markdown内の画像パスをアップロード先のURLに変更します。  4. Done! -
mob-sakai revised this gist
Apr 10, 2025 . 1 changed file with 37 additions and 37 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,5 +1,7 @@ ## How to use GitHub releases as markdown image storage  I often uploaded images to GitHub issues and used their URLs in markdown files (such as `README.md`). This method was convenient since it didn’t require adding the images to the repository, and each image had a unique URL. However, in (probably) March 2025, GitHub changed their policy so that accessing images uploaded to issues now requires cookie-based authentication. @@ -17,28 +19,26 @@ There’s no limit to the number of files or total size, and files in public rep Here’s how you can edit markdown to use this method: 1. Create a public repository on GitHub and create a release. In this example, I created a release named `docs` in the `mob-sakai/mob-sakai` repository. You can make it a pre-release, but note that draft releases are not publicly accessible.  2. In VSCode, when you paste or drop an image into a markdown file, it saves the image with a relative path and enables previewing. You can also configure the destination path in your settings. With the following setting, a `.vscode` directory is created in the same directory as the markdown file, and images are saved with a filename like `<unixTime>.<fileExtName>`. This format avoids problematic spaces and symbols for shell scripts and ensures a unique name. ```json "markdown.copyFiles.destination": { "**/README.md": ".vscode/${unixTime}.${fileExtName}" } ```  3. After saving the markdown file, download the `markdown-image-upload.sh` script from this gist and run it as follows: ```sh markdown-image-upload.sh mob-sakai/mob-sakai docs .vscode/ README.md ``` This script scans the markdown for image paths starting with `.vscode/`, optimizes them using `imageoptim`, uploads them to the GitHub release, and then replaces the local image paths in the markdown with their corresponding GitHub release URLs. 4. Done! @@ -70,27 +70,27 @@ GitHubのリリースは追加のファイルをアップロードでき、こ 具体的なmarkdownの編集方法は以下の通りです。 1. GitHubに公開リポジトリを作成し、リリースを作成します。 ここでは`mob-sakai/mob-sakai`というリポジトリに`docs`というリリースを作成しました。 リリースはプレリリースでも大丈夫ですが、ドラフトリリースは公開されないため注意してください。  2. VSCodeには、markdownに画像をペースト/ドロップすると、画像を相対パスで保存し、プレビューする機能があります。 また、設定から保存先を変更することもできます。 次のように設定すると、markdownと同じディレクトリに`.vscode`というディレクトリが作成され、その中に画像が`<unixTime>.<fileExtName>`という名前で保存されます。 このファイル名はシェルスクリプトに都合の悪い空白や記号が含まれず、ユニークな名前になります。 ```json "markdown.copyFiles.destination": { "**/README.md": ".vscode/${unixTime}.${fileExtName}" } ```  3. markdownを保存後、このgistにアップロードされている`markdown-image-upload.sh`をダウンロードし、以下のように実行します。 ```sh markdown-image-upload.sh mob-sakai/mob-sakai docs .vscode/ README.md ``` このスクリプトは、markdownに記述されている「.vscode/」で始まる画像のパスを取得し、imageoptimで軽量化した後にGitHubのリリースにアップロードします。 その後、markdown内の画像パスをアップロード先のURLに変更します。 4. Done! -
mob-sakai revised this gist
Apr 10, 2025 . 1 changed file with 2 additions and 2 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -20,7 +20,7 @@ Here’s how you can edit markdown to use this method: In this example, I created a release named `docs` in the `mob-sakai/mob-sakai` repository. You can make it a pre-release, but note that draft releases are not publicly accessible.  2. In VSCode, when you paste or drop an image into a markdown file, it saves the image with a relative path and enables previewing. You can also configure the destination path in your settings. @@ -32,7 +32,7 @@ This format avoids problematic spaces and symbols for shell scripts and ensures } ```  3. After saving the markdown file, download the `markdown-image-upload.sh` script from this gist and run it as follows: ```sh -
mob-sakai revised this gist
Apr 10, 2025 . 1 changed file with 53 additions and 27 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,44 +1,59 @@ ## How to use GitHub releases as markdown image storage I often uploaded images to GitHub issues and used their URLs in markdown files (such as `README.md`). This method was convenient since it didn’t require adding the images to the repository, and each image had a unique URL. However, in (probably) March 2025, GitHub changed their policy so that accessing images uploaded to issues now requires cookie-based authentication. This applies even to images uploaded to issues in public repositories. As a result, the benefit of 'anyone who knows the URL can access the image' has been lost. Although images still display properly when viewing markdown on GitHub in a browser, they no longer appear when the markdown is rendered elsewhere. This affects markdown hosted in remote environments such as package registries or GitHub Pages, as well as local environments. Not being able to preview images while editing markdown is quite inconvenient. To address this, I came up with a method of embedding images in markdown using GitHub Releases. GitHub Releases allow you to upload additional files, and those files don’t count toward the repository’s size. There’s no limit to the number of files or total size, and files in public repository releases have URLs accessible to anyone. Here’s how you can edit markdown to use this method: 1. Create a public repository on GitHub and create a release. In this example, I created a release named `docs` in the `mob-sakai/mob-sakai` repository. You can make it a pre-release, but note that draft releases are not publicly accessible.  2. In VSCode, when you paste or drop an image into a markdown file, it saves the image with a relative path and enables previewing. You can also configure the destination path in your settings. With the following setting, a `.vscode` directory is created in the same directory as the markdown file, and images are saved with a filename like `<unixTime>.<fileExtName>`. This format avoids problematic spaces and symbols for shell scripts and ensures a unique name. ```json "markdown.copyFiles.destination": { "**/README.md": ".vscode/${unixTime}.${fileExtName}" } ```  3. After saving the markdown file, download the `markdown-image-upload.sh` script from this gist and run it as follows: ```sh markdown-image-upload.sh mob-sakai/mob-sakai docs .vscode/ README.md ``` This script scans the markdown for image paths starting with `.vscode/`, optimizes them using `imageoptim`, uploads them to the GitHub release, and then replaces the local image paths in the markdown with their corresponding GitHub release URLs. 4. Done! <br> With these steps, you can use GitHub Releases as markdown image storage. This script is intended for macOS, but similar functionality should be possible on Windows and Linux as well. <br><br><br><br> --- In Japaneesese: 私はよく画像をGitHub issueにアップロードし、そのURLをmarkdown (README.md等)に貼り付けて使っていました。 この方法はリポジトリに画像を追加することなく、また画像ごとにユニークなURLを持つので便利でした。 しかしながら、2025年の(おそらく)3月に、issueにアップロードした画像にアクセスするためにはクッキーによる認証が必要になりました。 これは、公開リポジトリのissueにアップロードした画像にも適用されます。 @@ -49,26 +64,37 @@ In Japaneesese: markdownを編集する際に画像をプレビューできないのは非常に不便です。 そこで、GitHubのリリース機能を利用して、画像をmarkdownに貼り付ける方法を考えました。 GitHubのリリースは追加のファイルをアップロードでき、これらのファイルはリポジトリのサイズを肥大させません。 ファイル個数や合計サイズにも制限はなく、公開リポジトリのリリースは誰でもアクセスできるURLを持っています。 具体的なmarkdownの編集方法は以下の通りです。 1. GitHubに公開リポジトリを作成し、リリースを作成します。 ここでは`mob-sakai/mob-sakai`というリポジトリに`docs`というリリースを作成しました。 リリースはプレリリースでも大丈夫ですが、ドラフトリリースは公開されないため注意してください。  2. VSCodeには、markdownに画像をペースト/ドロップすると、画像を相対パスで保存し、プレビューする機能があります。 また、設定から保存先を変更することもできます。 次のように設定すると、markdownと同じディレクトリに`.vscode`というディレクトリが作成され、その中に画像が`<unixTime>.<fileExtName>`という名前で保存されます。 このファイル名はシェルスクリプトに都合の悪い空白や記号が含まれず、ユニークな名前になります。 ```json "markdown.copyFiles.destination": { "**/README.md": ".vscode/${unixTime}.${fileExtName}" } ```  3. markdownを保存後、このgistにアップロードされている`markdown-image-upload.sh`をダウンロードし、以下のように実行します。 ```sh markdown-image-upload.sh mob-sakai/mob-sakai docs .vscode/ README.md ``` このスクリプトは、markdownに記述されている「.vscode/」で始まる画像のパスを取得し、imageoptimで軽量化した後にGitHubのリリースにアップロードします。 その後、markdown内の画像パスをアップロード先のURLに変更します。 4. Done! <br> 以上の手順により、GitHubのリリースをmarkdownの画像ストレージとして利用することができます。 このスクリプトはMacOS向けですが、WindowsやLinuxでも同様の事ができるでしょう。 -
mob-sakai renamed this gist
Apr 10, 2025 . 1 changed file with 0 additions and 0 deletions.There are no files selected for viewing
File renamed without changes. -
mob-sakai revised this gist
Apr 10, 2025 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -5,7 +5,7 @@ help() echo "Usage: markdown-image-upload.sh <repo> <tag> <img_dir> <markdown_file>" } [ "$4" = "" ] && help && exit 0 repo="$1" tag="$2" -
mob-sakai created this gist
Apr 10, 2025 .There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,74 @@ ## How to use GitHub releases as markdown image storage 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. ```json "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. ```sh markdown-image-upload.sh mob-sakai/mob-sakai docs .vscode/ README.md ``` With these steps, you can use GitHub releases as markdown image storage. --- <br><br><br><br> 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>`という名前で保存されます。 このファイル名はシェルスクリプトに都合の悪い空白記号が含まれず、ユニークな名前になります。 ```json "markdown.copyFiles.destination": { "**/README.md": ".vscode/${unixTime}.${fileExtName}" } ``` 3. markdownを編集後、このgistにアップロードされている`markdown-image-upload.sh`をダウンロードし、実行します。 このスクリプトは、markdownに記述されている「.vscode/」で始まる画像のパスを取得し、imageoptimで軽量化した後にGitHubのリリースにアップロードします。 その後、markdownを更新して、画像パスをGitHubのリリースURLに変更します。 ```sh markdown-image-upload.sh mob-sakai/mob-sakai docs .vscode/ README.md ``` 以上の手順により、GitHubのリリースをmarkdownの画像ストレージとして利用することができます。 This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,33 @@ #!/usr/bin/env bash help() { echo "Usage: markdown-image-upload.sh <repo> <tag> <img_dir> <markdown_file>" } [ "$4" = "" ] && help && return 0 repo="$1" tag="$2" img_dir="$3" file="$4" dir_path=$(dirname "$file") file_name=$(basename "$file") ( cd "$dir_path" || exit 1 images=$(grep -o "$img_dir"'[^")]*' "$file_name") [ -z "$images" ] && echo "No images found." && return echo "$images" | while read -r img; do [ -f "$img" ] || { echo "Skip missing: $img"; continue; } echo "Optimizing: $img" npx -y imageoptim-cli "$img" echo "Uploading: $img" gh release upload "$tag" "$img" -R "$repo" --clobber done sed -i '' "s|$img_dir|https://github.com/$repo/releases/download/$tag/|g" "$file_name" echo "✅ Complete!" )