publicのファイル

public/は、ファイル名と内容を保ったまま公開したいファイルの置き場所です。ここではサイトのfaviconと、ダウンロード用PDFを追加します。

Table of Contents

• ファイルを配置する
• ページから参照する
• ビルド結果を確認する
• 公開パスを変更する

ファイルを配置する

プロジェクトルートへpublic/を作り、手元のSVGとPDFを置きます。ファイルは次のように配置してください。

public/
├── favicon.svg
└── downloads/
    └── brochure.pdf
src/
├── layouts/
│   └── index.tsx
└── pages/
    └── index.tsx

public/のファイルは、ページから参照していなくてもビルド時にコピーされます。公開しないファイルはこのディレクトリへ置かないようにします。

ページから参照する

URLは/から始め、publicを含めずに指定します。public/downloads/brochure.pdfなら/downloads/brochure.pdfです。

import { Head } from "minista/head"

export default function Page() {
  return (
    <>
      <Head>
        <link rel="icon" href="/favicon.svg" />
      </Head>
      <h1>My Site</h1>
      <a href="/downloads/brochure.pdf" download>
        パンフレットをダウンロード
      </a>
    </>
  )
}

faviconを全ページで使う場合は、リンクを共通レイアウトのheadへ移します。public/のCSSやJavaScriptも、linkやscriptで読み込めます。

ビルド結果を確認する

npm run buildを実行すると、public/の中身が出力先のルートへコピーされます。

dist/
├── index.html
├── favicon.svg
└── downloads/
    └── brochure.pdf

リサイズ、圧縮、ファイル名へのハッシュ追加は行いません。画像をViteで処理したい場合は画像のバンドル、サイズや形式を変換したい場合は画像最適化を使います。

公開パスを変更する

base: "/site/"を指定すると、HTML内の実在するpublicファイルへの参照は/site/favicon.svgなどへ補正されます。base: "./"なら、出力ページからの相対URLになります。

ファイル本体は無加工です。public内のCSS・JavaScript・JSONに書かれたURLや、ブラウザで組み立てるURLは補正されません。Island内部も自動補正の対象外なので、公開パスを含むURLをpropsとして渡すなどして合わせます。

対象属性と制限はpluginSsgのpublic参照を参照してください。

次は画像のバンドルで、ソース内の画像を出力します。