当サイトは Gatsby でマークダウンを利用してブログを書いています。

標準だと、static フォルダ配下か、マークダウン内から参照している画像ファイル^※くらいしかgatsby build したときにコピーしてくれません。

マークダウン内からリンクしたファイルも、public にもっていってくれるようにする便利なプラグイン「gatsby-remark-copy-linked-files」が公開されてますので、導入した手順を記録しておきます。

やりたいこと

当ブログは以下のようなフォルダとファイルの構成で記事を書いています。

図.フォルダ構成

gatsby build コマンドでリリース作業を 例えば記事「jp00002」に関連するファイル「xx.zip」は通常、public（リリース用フォルダ）にコピーされませんが、これを記事(マークダウン)からリンクを貼ることで public にコピーしてくれるプラグインです。

導入手順

前提

Gatsby にマークダウンプラグイン（gatsby-transformer-remark）を導入してページ生成していること。

実行した時の環境・参考

• Gatsby バージョン 2.24.9
• node.js バージョン 12.18.2（LTS）
• React バージョン 16.13.1

インストール

公式に書いてある手順に従っていきます。 正確な情報は下記を見てくださいね。このページでは公式を参照しながら私が実施した手順などなどを書いてます。

参考：公式Gatsby - pakcages - gatsby-remark-copy-linked-files

npm 経由で必要なパッケージをインストールしましょう。

npm install --save gatsby-remark-copy-linked-files

無事にパッケージが追加されたら使うための設定を書いていきましょー。

gatsby-config.js への設定追記

以下のように gatsby-remark-copy-linked-files への参照を 記載してあげます。

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-transformer-remark',
      options: {
        plugins: [  // このプラグインの一つとして記載
          ：中略
          {            resolve: `gatsby-remark-copy-linked-files`,            options: {              destinationDir: f => `downloads/${f.hash}-${f.name}`,              ignoreFileExtensions: [                `png`, `jpg`, `jpeg`, `bmp`,                `tiff`, `webp`, ``              ],            },          },          ：中略
        {
        resolve: 'gatsby-remark-prismjs',
        options: {
          ：以下略

destionationDir

destionationDir にはコピーしたファイルを格納する public フォルダ以下のパスを 決める関数を定義してあげます。

• hash はファイルのハッシュ値が入ります。
• name はコピー元のファイル名が入ります。

いろんな記事のファイルがコピーされるので、コピー後のファイル名にハッシュを含めてあげることで、名前衝突を避けることが出来ます。

上記の設定方法だと、コピー後のファイル名は「downloads/${ハッシュ値}-${コピー元ファイル名}」となります。

ignoreFileExtensions

リンクが貼られていても無視するファイル拡張子を記載します。

gatsby-remark-images プラグインを使ってれば、PNG形式と JPEG 形式は自動的に適切なサイズに変換して public 以下に生成してくれるので、画像関係は無視するようにしておきます。

これで設定はおしまい。Gatsby を再起動してあげれば、以下のように マークダウン内に記載したファイルへのリンクに応じて public/download 配下にファイルが 自動的にコピーされます。

図.コピー後のフォルダ構成

上の図のように、指定したフォルダ（download）にハッシュ付きでコピーされます。

補足

マークダウン内で以下の方法でリンクや参照を貼ったときにコピーされるとのこと。

• [DownloadZip:xx.zip](./xx.zip) みたいな通常のマークダウン書式でリンクを作製
•  みたいに画像貼り付けをしたとき
• HTMLタグのAタグ、IMGタグ、VIDEOタグ、AUDIOタグでリンクや画像、映像埋め込みをしたとき

プラグイン作者さまに感謝です！

おしまい。

参考

• (英語)Gatsby公式 - plugins - gatsby-remark-copy-linked-files
• (英語)ubuntu-user.com - Visualizing-complex-structures-using-Graphviz

変更履歴

• 2020/10/21 Cover&eyecatch画像作成
• 2020/07/25 初版公開