はてなブログ記事の画像をGitHub Pagesから配信する

はてなブログ記事の画像をはてなフォトライフを使わず GitHub Pages から配信したものを使っています。

記事を Markdown ファイルで管理していることが前提です。

目指すもの
やったこと

現在、このはてなブログの記事は GitHub で管理されています。詳細は以下の記事を参照。

GitHub を整備した後、新しい記事を投稿する中で画像を添付しようと思ったのですが、現在は VSCode で記事を書いておりそのままでは画像を添付できません。

ブラウザから画像をアップロードして、エディタに戻って URL を貼り付けるのはやや面倒です。

これを解決するためにやったことを書きます。

目指すもの

以下のような感じを目指しました。

VSCode の Markdown ファイル上に画像を貼り付ける何らかの操作をする
1.の画像がローカルにファイルとして保存される
画像ファイルをコミットして push → GitHub Pages から配信される
CI で記事内の画像ファイルパスが GitHub Pages の URL に置換されてブログに公開される

ローカルで置換して push するのではなく CI 上で置換するのは、先にローカルで置換してしまうと GitHub Pages の存在しない画像 URL を参照することになってしまうためです。

なお、記事ファイルのプレビューには自作拡張機能の Blogview を使っています。

やったこと

やったことを書きます。

拡張機能を使って Markdown ファイルに画像を添付する

Markdown ファイルに画像を添付する(風な動作でローカルに画像ファイルを配置する)ために、拡張機能である「Markdown Paste」を使いました。

Markdown Paste は上記含め派生がいくつかあるようですが、telesoho.vscode-markdown-paste-imageは WSL 対応がされているようで選びました。

設定は以下のようにすると、ワークスペース下のimagesディレクトリに画像が保存されます。

{
  "MarkdownPaste.path": "${workspaceRoot}/images",
  "MarkdownPaste.silence": true
}

添付した画像を GitHub Pages から配信する

画像は./images/以下に配置されるので、GitHub Pages の設定を有効化するだけでhttps://${GitHub PagesのURL}/images/から配信されるようになります。

実際それだけでも良かったのですが、コミットする度に Pages に関連した Action が 3 つ走るのが微妙だったので、

以下のようにしてpeaceiris/actions-gh-pagesからデプロイするようにしました。

steps:
  - uses: actions/checkout@v2
  - uses: peaceiris/actions-gh-pages@v3
    with:
      github_token: ${{ secrets.GITHUB_TOKEN }}
      publish_dir: images
      keep_files: true
      cname: pages.mkizka.dev

記事内の画像パスを GitHub Pages の URL に置換する

画像を「Markdown Paste」で貼り付けると../images/画像ファイル名.pngのような相対パスで書かれるので、GitHub Actions 上で置換します。

コマンドは

sed -i -e 's/\!\[\](\.\.\/images\//![](https:\/\/${GitHub PagesのURL}\//' entry/*.md

のような感じです。

置換後、actions-js/pushで push しています。このタイミングで gimonfu の変更も反映されて便利です。

- uses: actions-js/push@master
  with:
    github_token: ${{ secrets.GITHUB_TOKEN }}
    message: 変更をコミット