Gatsbyで静的ファイルを使用する方法

著者は、 Write for DOnations プログラムの一環として、 InternetArchiveを選択して寄付を受け取りました。

序章

多くの人気のある静的サイトジェネレーターと同様に、 Gatsby は、フロントエンドで React を使用し、 Node.js を使用して、動的Webフレームワークの使用を採用しています。バックエンド。ただし、Gatsbyは、画像、 CSS ファイル、JavaScriptファイルなどの静的ファイルやアセットを取り込むこともできます。

このチュートリアルでは、Gatsbyサイトで静的ファイルを使用する場合がある状況について説明します。画像、スタイルシートをグローバルに、モジュール、JavaScriptファイル、およびユーザーがダウンロードできるPDFなどの任意のファイルとして追加するための最善の方法を示します。

前提条件

始める前に、ここにあなたが必要とするいくつかのものがあります：

Gatsbyを実行してサイトを構築するためのNode.jsのローカルインストール。インストール手順はオペレーティングシステムによって異なりますが、DigitalOceanには Ubuntu20.04およびmacOSのガイドがあり、最新リリースは公式Node.jsダウンロードページ[ X213X]。
gatsby-starter-defaultからの足場となる新しいGatsbyプロジェクト。この要件を満たし、新しいGatsbyプロジェクトを最初から構築するには、最初のGatsbyWebサイトのセットアップ方法チュートリアルのステップ1を参照してください。
このチュートリアルで説明されている以上に投稿のユーザーインターフェイス（UI）をカスタマイズする場合は、ReactとJSX、およびHTML要素にある程度精通している必要があります。
zipアーカイブファイルを解凍するプログラム。ほとんどのオペレーティングシステムでは、 unzip が最適なコマンドであり、ローカルのパッケージマネージャーを使用してLinuxにダウンロードできます。
このチュートリアルのサンプルファイルを提供するために使用されるデモファイルリポジトリへのアクセス。 DigitalOcean Community GitHubリポジトリからアクセスでき、ステップ1でダウンロード方法を説明します。

このチュートリアルは、Node.js v14.16.1、npm v6.14.12、Gatsby v3.13.1、およびflexboxgridv6.3.1でテストされました。

ステップ1—サンプルファイルの準備

このチュートリアルでは、事前に準備された静的アセットのコレクションを使用します。これらのコレクションは、次の手順で使用されます。ファイルのコレクションはGitHubリポジトリとして利用できます。このチュートリアルの最初のステップは、ファイルをダウンロードしてGatsbyプロジェクト内に配置することです。

まず、サンプルファイルをsrc/sample-assetsに抽出します。これは、 zipファイルをダウンロードして選択した解凍ツールを使用するか、次のコマンドを実行して手動で行うことができます。 Gatsbyプロジェクトのルートにあるターミナル：

wget -O ../sample-assets.zip https://github.com/do-community/gatsby-static-files-tutorial-assets/archive/refs/heads/main.zip
unzip ../sample-assets.zip -d ./src

上記のコマンドは、リポジトリ全体のアーカイブを wget を使用して単一のzipアーカイブファイルとしてダウンロードし、コンテンツをソースディレクトリに解凍します。

ファイルが解凍されたら、次のステップは、このチュートリアルのデモページとして機能する空のGatsbyページコンポーネントを作成することです。 src/pages/static-files-demo.jsで空のファイルを作成し、選択したエディターでファイルを開いて、次のコードを追加します。

src / pages / static-files-demo.js

import * as React from "react"

import Layout from "../components/layout"
import Seo from "../components/seo"

const StaticFilesDemo = () => (
  <Layout>
    <Seo title="Static Files Demo" />
    <h1>Static Files Demo</h1>
  </Layout>
)

export default StaticFilesDemo

このコードは、https://localhost/static-files-demo/でパブリックページを生成するために使用するGatsbyページコンポーネントファイルとして機能します。 StaticFilesDemo関数は、ページコンテンツとなるJSXを返すReactコンポーネントです。 Gatsbyのビルドシステムは、ページコンポーネントのデフォルトのエクスポートがページのレンダリングを担当するReactコンポーネントであると想定しているため、最終行としてexport default StaticFilesDemoを使用します。

ページコードを追加したら、ファイルを保存しますが、次の手順で追加されるため、開いたままにしておきます。

この最初のステップでは、チュートリアル全体で使用される静的アセットファイルをダウンロードし、内部に構築するデモページを設定しました。次のステップでは、静的アセットの最も一般的な形式の1つである画像ファイルを追加します。

ステップ2—画像を追加する

Webサイトの一般的なニーズは、サイトの読み込みエクスペリエンスに影響を与えない方法で画像ファイルを埋め込むことです。このステップでは、gatsby-plugin-imageといくつかのHTMLを使用してGatsbyページに画像を埋め込み、読み込み時間と帯域幅の使用量を最適化して、Gatsbyでこれを行う方法を学びます。

gatsby-plugin-image はgatsby-starter-default前提条件に含まれているため、依存関係としてすでにインストールされており、すぐに使用できます。 gatsby-starter-defaultテンプレートからプロジェクトを開始しなかった場合は、公式Gatsbyドキュメントでgatsby-plugin-imageのインストールと構成について学ぶことができます。

前の手順で作成したデモページコンポーネントファイルを開き、次の強調表示されたコードを追加します。

src / pages / static-files-demo.js

import * as React from "react"
import { StaticImage } from "gatsby-plugin-image"

import Layout from "../components/layout"
import Seo from "../components/seo"

const StaticFilesDemo = () => (
  <Layout>
    <Seo title="Static Files Demo" />
    <h1>Static Files Demo</h1>

    <section className="demo">
      <h2>Static Image Files Demo</h2>

      <figure className="image-demo">
        <StaticImage
          src="../gatsby-static-files-tutorial-assets-main/images/water.jpg"
          width={1000}
          quality={90}
          alt="Underwater view of clear, blue body of water"
        />
        <figcaption>
          Photo by{" "}
          <a target="_blank" rel="noreferrer noopener" href="https://unsplash.com/@cristianpalmer">
            Cristian Palmer
          </a>
        </figcaption>
      </figure>

      <figure className="image-demo">
        <StaticImage
          src="../gatsby-static-files-tutorial-assets-main/images/turtle.jpg"
          width={1000}
          quality={90}
          alt="Overhead view of a turtle floating over blue water"
        />
        <figcaption>
          Photo by{" "}
          <a target="_blank" rel="noreferrer noopener" href="https://unsplash.com/@ruizra">
            Randall Ruiz
          </a>
        </figcaption>
      </figure>
    </section>
  </Layout>
)

export default StaticFilesDemo

標準のHTMLimgタグを直接使用してパブリックイメージURLを指す代わりに、このコードではgatsby-plugin-imageのStaticImageコンポーネントを使用してパスを渡しますローカルの静止画像に。これはベストプラクティスのアプローチです。StaticImageはソース画像のサイズ変更された複数のバージョンを生成し（内部で gatsby-plugin-sharp を使用）、訪問者に最も近いものを提供します。ウェブページ（ srcset 機能を使用）により、ページの読み込みが速くなり、ダウンロードサイズが小さくなります。

StaticImageに渡される画像では、90の品質を使用して、デフォルト値の50を上書きし、gatsby-plugin-imageがファイルサイズを改善できることを示しています。品質を維持しながら。また、1000の幅を指定しました。これは、両方のソース画像の元の幅がそれをはるかに超えているため、最大幅の上限として機能します。デモや多くのWebページの目的では、幅1000ピクセルで十分です。これらの2つのオプションはパフォーマンスに大きな影響を与えますが、gatsby-plugin-imageには他にも多くのオプションがあり、 Gatsbydocsにあります。

このページでは、2つの画像の元のバージョンは、表示される画面のサイズに関係なく、合わせて約4MBを占めます。しかし、StaticImageを使用すると、小型の携帯電話では、元のサイズの約100kB、つまり約2.5% oに圧縮されます。読み込み時間は、3Gインターネット接続のほぼ2分から数秒に短縮されます。 gatsby-plugin-imageプラグインは、webpやavifなどの圧縮されたWeb配信により適した最新の画像形式も利用します。

先に進む前にファイルを保存してください。

注： gatsby-plugin-imageをバイパスして画像をそのまま完全に読み込む必要がある場合、Gatsbyは静的フォルダーを介してこれを行う方法を提供しますが、これは通常ですこれには前述の画像の最適化が含まれないため、お勧めしません。

これで、Gatsby内のベストプラクティスを使用して、Webページの訪問者に最適なユーザーエクスペリエンスを提供する、いくつかの新しい画像をサイトに追加しました。次のステップでは、静的CSSファイルをサイトに追加して、Webページのスタイリングコンポーネントに焦点を当てます。

ステップ3—CSSスタイルシートを追加する

画像の埋め込みと同様に、CSSベースのスタイルをGatsbyサイトに追加する方法は複数あります。インラインスタイリングとCSS-in-JSは常にGatsbyのオプションですが、サイト全体またはコンポーネントのスタイリングには、専用の静的スタイルシートを使用することをお勧めします。このステップでは、Gatsbyのベストプラクティスに従ったアプローチを使用して、独自のカスタムCSSファイルとサードパーティのCSSファイルをGatsbyプロジェクトに追加します。

デモページと同じフォルダのsrc/pages/static-files-demo.module.cssにCSSファイルを作成することから始めます。 .module.cssサフィックスを使用して、このファイルが CSSモジュールとして使用されることを示しています。これにより、スタイリングは、インポート先のコンポーネントではなく、インポート先のコンポーネントにスコープされるようになります。ユーザーインターフェイス（UI）の他の領域。

新しく作成したファイルを開いた後、次のコードを追加します。

src / pages / static-files-demo.module.css

.headerText {
  width: 100%;
  text-align: center;
}
.container img {
  border-radius: 8px;
}

このCSSでは、.headerTextのクラスを持つ任意の要素のテキストを中央揃えにして全幅にし、要素内の任意のimg要素に丸みを帯びたエッジを与えます。 .containerクラス。

CSSファイルを保存して閉じます。次に、デモページコンポーネントを開いてバックアップし、次の強調表示されたコードを追加します。

src / pages / static-files-demo.js

import * as React from "react"
import { StaticImage } from "gatsby-plugin-image"

import Layout from "../components/layout"
import Seo from "../components/seo"
import * as DemoStyles from "./static-files-demo.module.css"

const StaticFilesDemo = () => (
  <Layout>
    <Seo title="Static Files Demo" />
    <h1 className={DemoStyles.headerText}>Static Files Demo</h1>

    <section className={'demo ' + DemoStyles.container}>
      <h2>Static Image Files Demo</h2>

      <figure className="image-demo">
        ...
      </figure>
      <figure className="image-demo">
        ...
      </figure>
    </section>
  </Layout>
)

export default StaticFilesDemo

このファイルに加えた最初の変更は、作成したCSSファイルをインポートするimportステートメントを追加することです。 CSS @importステートメントを使用する代わりに、標準の ESモジュールインポートステートメントを使用して、このインポートの値をDemoStyles変数に割り当てます。内部的には、GatsbyはこのCSSファイルを webpack で処理し、CSSモジュールとして扱います。

また、CSSモジュールファイルのクラスを使用するようにコンポーネントのJSXを更新しました。これを行うには、戦略的な場所のclassName属性を、DemoStylesインポートからの正確なスコープクラス名で更新します。

ファイルを保存します。

次のステップには、反対のシナリオが含まれます。サイト全体に影響を与える静的CSSコードを追加します。この方法でロードしたい種類のCSSの例は、フレックスボックスベースのレイアウトを設計するときに役立つユーティリティクラスの小さなセットです：flexboxgrid。

Gatsbyプロジェクトのルートで次のコマンドを実行して、このサードパーティのCSSを依存関係としてインストールします。

npm install flexboxgrid

次に、このライブラリが以前と同じデモページ内で提供するCSSをインポートする代わりに、プロジェクトの最上位レベルでインポートして、グローバルに適用されるようにします。スターターテンプレートでは、他のすべてのコンポーネントがそのコンテンツをその中にラップするため、このレベルはlayout.jsファイルにあります。

注：グローバルCSSインポートの別のオプションはgatsby-browser.jsファイルにありますが、グローバルに関する Gatsbyドキュメントで説明されているように、Gatsbyはほとんどの状況でこれを主要なアプローチとして推奨していませんスタイリング。従来の<link>要素を使用して、内部または外部のスタイルシートをインポートすることもできますが、Webpackをバイパスするため、これもお勧めしません。

src/components/layout.jsを開き、次の変更を加えます。

src / components / layout.js

/**
 * Layout component that queries for data
 * with Gatsby's useStaticQuery component
 *
 * See: https://www.gatsbyjs.com/docs/use-static-query/
 */

import * as React from "react"
import PropTypes from "prop-types"
import { useStaticQuery, graphql } from "gatsby"

import Header from "./header"
import "./layout.css"
import "../../node_modules/flexboxgrid/dist/flexboxgrid.min.css"

const Layout = ({ children }) => {
  const data = useStaticQuery(graphql`
    query SiteTitleQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `)

  return (
    <>
      ...
    </>
  )
}

Layout.propTypes = {
  children: PropTypes.node.isRequired,
}

export default Layout

node_modulesの下のflexboxgridライブラリからCSSファイルを直接インポートするimportステートメントを追加しました。 CSSファイルはサイト全体に適用されることを意図しているため、変数に割り当てることはありません。また、CSSファイルをモジュールとして使用したくないため、ファイル名は.module.cssで終わりません。

layout.jsを保存して閉じ、Gatsbyサイト全体にCSSをグローバルにインポートするプロセスを完了します。

CSSをグローバルにインポートすると、CSSファイルを再度インポートしなくても、デモページでflexboxgridのクラスを使用できるようになります。デモページのコンポーネントファイルを開き、コードを更新します。

src / pages / static-files-demo.js

import * as React from "react"
import { StaticImage } from "gatsby-plugin-image"

import Layout from "../components/layout"
import Seo from "../components/seo"
import * as DemoStyles from "./static-files-demo.module.css"

const StaticFilesDemo = () => (
  <Layout>
    <Seo title="Static Files Demo" />
    <h1 className={DemoStyles.headerText}>Static Files Demo</h1>

    <section className={'demo row around-xs ' + DemoStyles.container}>
      <h2 className="col-xs-12">Static Image Files Demo</h2>

      <figure className="image-demo col-xs-10 col-sm-5">
        ...
      </figure>

      <figure className="image-demo col-xs-10 col-sm-5">
        ...
      </figure>
    </section>
  </Layout>
)

export default StaticFilesDemo

flexboxgridCSSファイルのルールセットを使用するクラスをデモページに追加しました。 section要素のrowおよびaround-xsクラスは、justify-contentがspace-aroundに設定され、[ X136X] クラスは、各要素が占める行の量を制御するために使用されます。

デモファイルを閉じる前に、必ずデモファイルへの変更を保存してください。この変更により、ページの応答性が向上し、画像は十分な大きさのディスプレイに並べて表示されます。

これまでの変更をプレビューするには、次のコマンドを実行します。

npm run develop

これにより、Gatsbyサイトのローカル開発サーバーがhttp://localhost:8000/static-files-demoで起動します。このURLに移動すると、新しいスタイルでレンダリングされたサイトが見つかります。

注： GatsbyにはReactが付属しているため、ここで概説する静的CSSオプションに加えて、ReactおよびReactベースのフレームワークを介してスタイルを適用するオプションもあります。

このステップでは、静的CSSファイルを使用して、サイトにスタイルを追加しました。次のステップでは、同様のアプローチを使用して、機能を追加するための静的JavaScriptファイルを追加します。

ステップ4—JavaScriptファイルを追加する

Gatsbyはすでにバックエンドとフロントエンドの両方でJavaScriptを使用していますが、これはビルドプロセス中にのみ実行されるNode.jsコード、または静的HTML出力を生成するためのReactコンポーネントとして使用されます。このステップでは、Node.jsベースでもReactベースでもないJavaScriptファイルを含めますが、Gatsbyによって生成されたすべてのページに取り込まれます。

このチュートリアルでは、開発者コンソールを開くサイトへの訪問者にメッセージを出力するファイルを追加します。 src/gatsby-static-files-tutorial-assets-main/js/every-page.jsでファイルを開くと、実行されるJavaScriptを調べることができます。

このファイルをESモジュールimportを介してGatsbyファイルに直接インポートするのではなく（CSSファイルで行ったように）、Gatsbyサーバー側レンダリング（SSR）APIを介してページに追加します。このアプローチにより、 DOM のどこにJavaScriptファイルを取り込むかをきめ細かく制御でき、Gatsbyのビルドプロセスの一部としてコードが実行されるのを防ぐことができます。

ただし、Gatsby SSR APIを使用する前に、静的JavaScriptファイルを一般に公開する必要があります。これを行うには、Gatsbyプロジェクトのルートにstaticという名前のフォルダーを作成して、Gatsbyがサポートする特別な静的フォルダーを使用します。次に、静的JavaScriptファイルをこのフォルダーにコピーします。これらのアクションは両方とも、ファイルブラウザーで手動で実行するか、プロジェクトのルートから実行される次のコマンドを使用して実行できます。

mkdir static
cp src/gatsby-static-files-tutorial-assets-main/js/every-page.js static/every-page.js

このアクションにより、JavaScriptファイルはhttps://localhost:8000/every-page.jsで一般公開されます。このステップの次の部分は、HTML経由でロードするようにトリガーすることです。

Gatsbyプロジェクトのルートでgatsby-ssr.jsを開きます。これにより、GatsbyでサーバーレンダリングAPIにフックできるようになります。次に、次のコードを追加します。

gatsby-ssr.js

/**
 * Implement Gatsby's SSR (Server Side Rendering) APIs in this file.
 *
 * See: https://www.gatsbyjs.com/docs/ssr-apis/
 */

import * as React from "react"

export const onRenderBody = ({ setPostBodyComponents }) => {
  setPostBodyComponents([
    <script type="text/javascript" src="/every-page.js" key="every-page-js" defer></script>,
  ])
}

追加したコードの最初の行は、ファイルでJSXを使用できるようにするために必要なReactをインポートするステートメントです。次に、onRenderBodyという関数をエクスポートします。この関数は、独自の関数内から呼び出すsetPostBodyComponentsの入れ子関数を使用して、オブジェクトを引数として取ります。この関数は、静的JSファイルを読み込むスクリプトタグを使用して呼び出しますが、一意のkeyプロパティとdeferを追加するベストプラクティスを使用します。この場合、この関数はいつでも問題ありません。 JavaScriptが実行されます。

setPostBodyComponentsは、最初の引数として渡された array 内のReactコンポーネント（この場合は単一のスクリプトタグ）を受け取り、それを本体の一部としてレンダリングします。これにより、ユーザーの読み込みがトリガーされます。ブラウザのスクリプトファイル。ファイルを保存しますが、次のステップのために開いたままにしておきます。

次に、https://localhost:8000/static-files-demo URLに移動して、JavaScriptコンソールを開きます。次の画像に示すように、JavaScriptファイルによって作成されたメッセージが表示されます。

注： Gatsbyのライブ開発機能を使用している場合、このファイルへの変更を有効にする前に、npm run developを停止して再起動する必要がある場合があります。

Gatsby SSR APIを使用してローカルの静的JavaScriptファイルを追加しましたが、サードパーティスクリプトとも呼ばれる他のドメインから外部JavaScriptを読み込むためにも同じ戦略を使用できます。デモ内の画像を簡単に拡大できるように、Fancyboxというサードパーティのライトボックスライブラリを追加します。同じgatsby-ssr.jsファイルに、次の行を追加します。

gatsby-ssr.js

/**
 * Implement Gatsby's SSR (Server Side Rendering) APIs in this file.
 *
 * See: https://www.gatsbyjs.com/docs/ssr-apis/
 */

import * as React from "react"

export const onRenderBody = ({ setPostBodyComponents }) => {
  setPostBodyComponents([
    <script type="text/javascript" src="/every-page.js" key="every-page-js" defer></script>,
    <script
      src="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox.umd.js"
      integrity="sha256-B34QrPZs5i0CQ3eqywkXHKIWw8msfAVH30RWj/i+dMo="
      crossOrigin="anonymous"
      key="fancybox-js"
      defer
    ></script>,
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox.css"
      integrity="sha256-WIieo0WFPkV7kcA2lQ4ZCO5gTg1Bs/SBX5YzEB4JkyM="
      crossOrigin="anonymous"
      key="fancybox-css"
    ></link>,
  ])
}

このコードでは、サードパーティライブラリであるFancyboxのJavaScriptとCSSの両方を、ローカルのevery-page.jsファイルに使用しているのと同じonRenderBody GatsbySSRAPIを介して追加しました。今回は2つの追加属性が使用され、どちらもセキュリティに役立ちます。 crossOrigin="anonymous"は、自分のドメインと一致しないドメインと資格情報を共有しないようにブラウザに明示的に指示し、integrity属性は、サブリソース整合性（SRI）を適用するために使用されます。これは、ファイルが追加された後の突然の変更から保護します。

警告：経験則として、サードパーティのスクリプトとスタイルは信頼できないものとして扱います。使用前に検査することに加えて、常にSRIを使用してください。一般に、インポートとバンドルするのではなく、URLを介してサードパーティのアセットをロードすることは、可能な場合は避ける必要がありますが、分析、埋め込みウィジェット、およびエラーログサービスで必要になる場合があります。

これでサードパーティのコードを読み込むタスクは完了ですが、この特定のライブラリには、新しいUI機能をトリガーする別の手順があります。

gatsby-ssr.jsを保存して閉じてから、src/pages/static-files-demo.jsを開いてバックアップし、次の編集を行います。

src / pages / static-files-demo.js

import * as React from "react"
import { StaticImage } from "gatsby-plugin-image"

import Layout from "../components/layout"
import Seo from "../components/seo"
import * as DemoStyles from "./static-files-demo.module.css"

const StaticFilesDemo = () => (
  <Layout>
    <Seo title="Static Files Demo" />
    <h1 className={DemoStyles.headerText}>Static Files Demo</h1>

    <section className={"demo row around-xs " + DemoStyles.container}>
      <h2 className="col-xs-12">Static Image Files Demo</h2>

      <figure className="image-demo col-xs-10 col-sm-5">
        <StaticImage
          data-fancybox
          src="../gatsby-static-files-tutorial-assets-main/images/water.jpg"
          ...
        />
        <figcaption>
          ...
      </figure>

      <figure className="image-demo col-xs-10 col-sm-5">
        <StaticImage
          data-fancybox
          src="../gatsby-static-files-tutorial-assets-main/images/turtle.jpg"
          ...
          
        />
        <figcaption>
          ...
        </figcaption>
      </figure>
    </section>
  </Layout>
)

export default StaticFilesDemo

data-fancyboxを追加すると、ライトボックス効果をトリガーする画像の場所がfancyboxライブラリに通知されます。これにより、ユーザーは、次のGIFに示すように、デモ画像をクリックしてライトボックスビューアの使用を開始できます。

注：自分とサードパーティの両方のページの<head>にスクリプトまたはスタイルをロードする場合、推奨されるアプローチはgatsby-plugin-react-helmetプラグインを使用することです。。このプラグインはスターターテンプレートにバンドルされており、src/components/seo.jsで既存の使用法に追加できます。

ローカルJavaScriptとリモートJavaScriptをGatsbyサイトに取り込むために、2つの異なる方法を使用しました。それぞれに、独自のユースケースとトレードオフがあります。この手順または前の手順でカバーされていないファイルの種類については、このチュートリアルの次のセクションで、Gatsbyサイトに任意のファイルを含める方法について説明します。

ステップ5—任意の静的ファイルを追加する

これで、Web開発に、画像、CSS、JavaScriptの3つの一般的なタイプの静的アセットが実装されました。しかし、それでもWebサイトの一部である可能性のある他の多くのファイルタイプが残ります。このステップでは、Gatsbyサイトに任意の静的ファイルを追加して、訪問者にダウンロードとして埋め込んだり提供したりできるようにします。

ユーザーがアクセスできるように任意の静的ファイルを追加する最初の方法は、JavaScriptファイル内にそれらをインポートし、webpackを使用してパブリックリンクを生成することです。この戦略は、アセットのインポートに関する公式Gatsbyドキュメントで推奨されています。これは、webpackがパスのタイプミスを防ぎ、インポートされないファイルの不要なディスクスペースの使用を回避し、場合によっては、データURIとしてのファイル。

デモページのコンポーネントファイルを開き、次の編集を追加します。

src / pages / static-files-demo.js

import * as React from "react"
import { StaticImage } from "gatsby-plugin-image"

import Layout from "../components/layout"
import Seo from "../components/seo"
import * as DemoStyles from "./static-files-demo.module.css"
import helloWorldPdf from "../gatsby-static-files-tutorial-assets-main/hello-world.pdf"

const StaticFilesDemo = () => (
  <Layout>
    <Seo title="Static Files Demo" />
    <h1 className={DemoStyles.headerText}>Static Files Demo</h1>

    <section>
      <h2>Arbitrary Static Files</h2>
      <a href={helloWorldPdf} title="Download the Hello World file">
        Access the Hello World file by clicking here.
      </a>
    </section>

    <section className={"demo row around-xs " + DemoStyles.container}>
      <h2 className="col-xs-12">Static Image Files Demo</h2>
      ...
    </section>
  </Layout>
)

export default StaticFilesDemo

このコードでは、静的ファイル（ PDFファイル）をJavaScriptに直接インポートしています。これは、webpackによって解析され、一意のリンクを生成します。そのリンクは、helloWorldPdfの値として入力されます。これは、aタグが指している値です。

この方法でアセットを処理する方法により、最終的なリンクは/static/hello-world-2f669160afa9b953cbe496f2d6ccb046.pdfのようにかなりランダムに見えます。これはほとんどのシナリオで機能しますが、永続的に読み取り可能なリンクが必要な場合、Gatsbyは特別なstaticフォルダーの形式で別のオプションを提供します。従業員がyour_domain.com/time-off-form.pdfのリンクをブックマークできるようにしたい雇用主のふりをして、この静的フォルダーを使用して新しいファイルを追加します。

まず、静的ファイルtime-off-form.pdfをデモファイルディレクトリからルートstaticフォルダーにコピーします。これは手動で行うか、次のコマンドを使用して行うことができます。

cp src/gatsby-static-files-tutorial-assets-main/time-off-form.pdf static/time-off-form.pdf

次に、ページファイルにリンクを追加します。

src / pages / static-files-demo.js

import * as React from "react"

...

import helloWorldPdf from "../gatsby-static-files-tutorial-assets-main/hello-world.pdf"

const StaticFilesDemo = () => (
  <Layout>
    <Seo title="Static Files Demo" />
    <h1 className={DemoStyles.headerText}>Static Files Demo</h1>

    <section>
      <h2>Arbitrary Static Files</h2>
      <a href={helloWorldPdf} title="Download the Hello World file">
        Access the Hello World file by clicking here.
      </a>
      <br />
      <a href="/time-off-form.pdf" title="Time Off Form">
        Request Time Off - Form to fill out and submit.
      </a>
    </section>

    <section className={"demo row around-xs " + DemoStyles.container}>
      ...
    </section>
  </Layout>
)

export default StaticFilesDemo

このファイルへの変更を保存して閉じます。

静的フォルダーアプローチを使用すると、ユーザーに/time-off-form.pdfの永続的なパスを提供できますが、ファイル変更のためのキャッシュバスティングと、ファイルパスのタイプミスをキャッチするWebpackのコンパイルステップの利点が失われます。

https://localhost:8000/time-off-form.pdfに移動して、次のPDFを表示します。

このステップでの努力のおかげで、サイトへの訪問者は、新しいコードによって有効にされた追加の静的ファイルタイプにアクセスできるようになりました。これは、サイトの訪問者がこれらのファイルにアクセスするためにドメインを離れる必要がないため便利であり、サイトを完全に離れる可能性が低くなるため、あなたにとって有益です。

注： Gatsby内のソースとしてMarkdownを使用していて、Markdownリンク内でリンクされているファイルをサイトの公開部分に自動的にコピーして、ユーザーがダウンロードできるようにする場合は、[ X229X]gatsby-remark-copy-linked-filesプラグイン。

結論

このチュートリアルの手順に従うことで、新しいタイプの静的ファイルとアセットをWebサイトに追加し、それらをGatsbyシステムと既存のコンテンツに統合しました。これらのアプローチは、ほぼすべての新規または既存のGatsbyサイトに適用でき、数百のユースケースとファイルタイプに適用できるため、将来的にGatsbyで静的ファイルを処理するための十分な準備が整います。

静的ファイルはWeb開発の多くの部分に関与しており、関連する設計上の決定に影響を与えるか、影響を受けます。さらに検討する価値のあるトピックは次のとおりです。

Gatsbyの詳細については、Gatsby.jsシリーズを使用して静的Webサイトを作成する方法の残りの部分を確認してください。