当サイトは Gatsby でマークダウンを利用してブログを書いています。
標準だと、static フォルダ配下か、マークダウン内から参照している画像ファイル※くらいしかgatsby build したときにコピーしてくれません。
マークダウン内からリンクしたファイルも、public にもっていってくれるようにする便利なプラグイン「gatsby-remark-copy-linked-files」が公開されてますので、導入した手順を記録しておきます。
Gatsby で画像の自動スケーリング、SVG生成などは gatsby-remark-images プラグインを使っていれば自動的に行われます。
当ブログは以下のようなフォルダとファイルの構成で記事を書いています。
図.フォルダ構成
gatsby build コマンドでリリース作業を 例えば記事「jp00002」に関連するファイル「xx.zip」は通常、public(リリース用フォルダ)にコピーされませんが、これを記事(マークダウン)からリンクを貼ることで public にコピーしてくれるプラグインです。
Gatsby にマークダウンプラグイン(gatsby-transformer-remark)を導入してページ生成していること。
公式に書いてある手順に従っていきます。 正確な情報は下記を見てくださいね。このページでは公式を参照しながら私が実施した手順などなどを書いてます。
参考:公式Gatsby - pakcages - gatsby-remark-copy-linked-files
npm 経由で必要なパッケージをインストールしましょう。
npm install --save gatsby-remark-copy-linked-files
無事にパッケージが追加されたら使うための設定を書いていきましょー。
以下のように 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 にはコピーしたファイルを格納する public フォルダ以下のパスを 決める関数を定義してあげます。
いろんな記事のファイルがコピーされるので、コピー後のファイル名にハッシュを含めてあげることで、名前衝突を避けることが出来ます。
上記の設定方法だと、コピー後のファイル名は「downloads/${ハッシュ値}-${コピー元ファイル名}」となります。
リンクが貼られていても無視するファイル拡張子を記載します。
gatsby-remark-images プラグインを使ってれば、PNG形式と JPEG 形式は自動的に適切なサイズに変換して public 以下に生成してくれるので、画像関係は無視するようにしておきます。
これで設定はおしまい。Gatsby を再起動してあげれば、以下のように マークダウン内に記載したファイルへのリンクに応じて public/download 配下にファイルが 自動的にコピーされます。
図.コピー後のフォルダ構成
上の図のように、指定したフォルダ(download)にハッシュ付きでコピーされます。
マークダウン内で以下の方法でリンクや参照を貼ったときにコピーされるとのこと。
プラグイン作者さまに感謝です!
おしまい。
コメント、ありがとうございます。
ごめんなさい。エラーでうまく送信できませんでした。ご迷惑をおかけします。しばらくおいてから再度送信を試していただくか、以下から DM などでご連絡頂ければと思います。
Twitter:@NodachiSoft_jpお名前:以下の内容でコメントを送信します。よろしければ、「送信」を押してください。修正する場合は「戻る」を押してください
お名前: