Nodachisoft Nodachi Sword Icon
  
@あまじ✎ 2020年10月21日に更新

Gatsby のマークダウン内からリンクしたファイルを自動的にリリース対象としてコピーする

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

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

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

画像のコピー

Gatsby で画像の自動スケーリング、SVG生成などは gatsby-remark-images プラグインを使っていれば自動的に行われます。

やりたいこと

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

図.フォルダ構成

graph_name root Gatsbyブログフォルダ public public(公開用) root--public post post(記事の元データ) root--post jp00001 jp00001 post--jp00001 jp00002 jp00002 post--jp00002 jpXXXXX jpXXXXX(記事ごとのデータ) post--jpXXXXX md1 index.md jp00001--md1 md2 index.md jp00002--md2 file xx.zip jp00002--file md3 index.md jpXXXXX--md3

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 への参照を 記載してあげます。

gatsby.config(抜粋)
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 配下にファイルが 自動的にコピーされます。

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

graph_name root Gatsbyブログフォルダ public public(公開用) root->public post post(記事の元データ) root->post download download public->download jp00001 jp00001 post->jp00001 jp00002 jp00002 post->jp00002 jpXXXXX jpXXXXX(記事ごとのデータ) post->jpXXXXX md1 index.md jp00001->md1 md2 index.md jp00002->md2 file xx.zip jp00002->file md3 index.md jpXXXXX->md3 file2 hash値-xx.zip download->file2 file->file2 コピーされる!

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

補足

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

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

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

おしまい。

参考

変更履歴

  • 2020/10/21 Cover&eyecatch画像作成
  • 2020/07/25 初版公開
 
 
送信しました!

コメント、ありがとうございます。

なんかエラーでした

ごめんなさい。エラーでうまく送信できませんでした。ご迷惑をおかけします。しばらくおいてから再度送信を試していただくか、以下から DM などでご連絡頂ければと思います。

Twitter:@NodachiSoft_jp
お名前:
 
連絡先:
 
メッセージ:
 
戻る
内容の確認!

以下の内容でコメントを送信します。よろしければ、「送信」を押してください。修正する場合は「戻る」を押してください

お名前:
 
連絡先:
 
メッセージ:
 
Roboto からの操作ではないという確認のため確認キーを入れてください。
確認キー=95
戻る
 / 
送信確認へ
コメント欄
コメント送信確認へ

関連ありそうな記事(5件)です!

Gatsby でマークダウンの文章を手軽に装飾する(下線とかマーカーを引く、太字にするなど)

#Gatsby✎ 2021-01-30
Gatsby のマークダウンで手軽に装飾する方法を記載。下線を引く、マーカーを引く、太字にする、点線を引くなどを html タグを省略して文章の一部に適用する。
広告領域
追従 広告領域
目次
Gatsby のマークダウン内からリンクしたファイルを自動的にリリース対象としてコピーする
Gatsby のマークダウン内からリンクしたファイルを自動的にリリース対象としてコピーする
やりたいこと
やりたいこと
導入手順
導入手順
前提
前提
実行した時の環境・参考
実行した時の環境・参考
インストール
インストール
gatsby-config.js への設定追記
gatsby-config.js への設定追記
destionationDir
destionationDir
ignoreFileExtensions
ignoreFileExtensions
補足
補足
参考
参考
変更履歴
変更履歴
Nodachisoft © 2020