Joplin で GitHub Pages などに記事 Markdown と関連の添付画像を反映するメモです。
背景
最近、Joplin で色々なメモを残すようにしているのですが、その記事をそのままGitHub Pages などに記事 Markdown と関連の添付画像を反映したいときがあり、以前やった時から時間が経過するとついつい忘れているのでメモです。
Joplin は 2.14.20 のもので進めます。
ベース
ベースとなる記事です。Markdown で書いていて Joplin 内に添付画像もあって、それが内部参照で表示されているものです。
記事を Markdown 形式でエクスポート
まず記事を選択して エクスポート > MD – Markdown を選択して保存先を指定します。
このように保存されます。
+---99_sample | タイトル.md | \---_resources 1cc6e81ad7a1e806902845c6c26f8743.png 510b53581de9f7a273dc881f49c0b023.png e5449b0c74abd165ce7f5176d18d403c.png
フォルダ構造はこんな感じです。99_sample というのは、今回の記事のテキストデータが 99_sample に入っているので、そのようになっています。ファイル名は記事タイトル「タイトル」がそのまま使われてます。 _resources
には内容参照のIDを引き継いだ添付画像が入っています。
ファイル構造を調整する
もちろん、このまま配置しても使えますが、アップロード先に合わせてファイル構造を調整したいこともあるでしょう。
一例として画像も記事テキストも同じ階層に入れて調整してみます。
\---99_sample 1cc6e81ad7a1e806902845c6c26f8743.png 510b53581de9f7a273dc881f49c0b023.png e5449b0c74abd165ce7f5176d18d403c.png タイトル.md
このように記事テキスト側のフォルダに画像を集めます。
記事テキストをエディタで開きます。
画像パスをこのように全置換します。
これでできあがりです。
これを GitHub Pages などにアップロードすると画像つきで記事が表示されます!