Static site generation

SvelteKit を static site generator (SSG) として使用するには、adapter-static を使用します。

この adapter はサイト全体を静的なファイルのコレクションとしてプリレンダリングします。もし、一部のページのみをプリレンダリングして他のページは動的にサーバーでレンダリングしたい場合、別の adapter と prerender オプション を組み合わせて使用する必要があります。

使い方permalink

npm i -D @sveltejs/adapter-static を実行してインストールし、svelte.config.js にこの adapter を追加します:

ts
import adapter from '@sveltejs/adapter-static';
Cannot find module '@sveltejs/adapter-static' or its corresponding type declarations.2307Cannot find module '@sveltejs/adapter-static' or its corresponding type declarations.
 
export default {
  kit: {
    adapter: adapter({
      // default options are shown. On some platforms
      // these options are set automatically — see below
      pages: 'build',
      assets: 'build',
      fallback: null,
      precompress: false,
      strict: true
    })
  }
};

…そして prerender オプションを最上位のレイアウト(root layout)に追加します:

ts
// This can be false if you're using a fallback (i.e. SPA mode)
export const prerender = true;

SvelteKit の trailingSlash オプションを、あなたの環境に対して適切に設定しなければなりません。もしあなたのホスト環境が、/a へのリクエストを受け取ったときに /a.html をレンダリングしない場合、/a/index.html を作成するために trailingSlash: 'always' を設定する必要があります。

ゼロコンフィグサポートpermalink

ゼロコンフィグサポートがあるプラットフォームもあります (将来増える予定):

• Vercel

これらのプラットフォームでは、adapter のオプションを省略することで、adapter-static が最適な設定を提供できるようになります:

export default {
  kit: {
		adapter: adapter({...})
		adapter: adapter()
  }
};

Optionspermalink

pagespermalink

プリレンダリングされたページを書き込むディレクトリです。デフォルトは build です。

assetspermalink

静的なアセット (static のコンテンツと、SvelteKit が生成するクライアントサイドの JS と CSS) を書き込むディレクトリです。通常は pages と同じにするべきで、デフォルトでは、それがどんな値だったとしても、pages の値になります。しかし、まれな状況では、出力されるページとアセットを別々の場所にする必要があるかもしれません。

fallbackpermalink

SPA モード向けにフォールバックページ(fallback page)を指定します。例えば、index.html や 200.html、404.html などです。

precompresspermalink

true の場合、brotli や gzip でファイルを事前圧縮(precompress)します。これによって .br ファイルや .gz ファイルが生成されます。

strictpermalink

デフォルトでは adapter-static は、アプリの全てのページとエンドポイント (もしあれば) がプリレンダリングされているか、もしくは fallback オプションが設定されているかをチェックします。このチェックは、アプリの一部が最終的な出力に含まれずアクセスできない状態なのに誤って公開されてしまうのを防ぐために存在します。もし、それでも良いことがわかっている場合 (例えばあるページが条件付きでしか存在しない場合)、strict を false に設定してこのチェックをオフにすることができます。

GitHub Pagespermalink

GitHub Pages 向けにビルドするときは、paths.base をあなたのリポジトリ名に合わせて更新するようにしてください。サイトが root からではなく https://your-username.github.io/your-repo-name から提供されるためです。

GitHub が提供する Jekyll が、あなたのサイトを管理するのを防ぐために、空の .nojekyll ファイルを static フォルダに追加する必要があります。

GitHub Pages 向けの設定は以下のようになるでしょう:

ts
import adapter from '@sveltejs/adapter-static';
Cannot find module '@sveltejs/adapter-static' or its corresponding type declarations.2307Cannot find module '@sveltejs/adapter-static' or its corresponding type declarations.
 
const dev = process.argv.includes('dev');
 
/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter(),
    paths: {
      base: dev ? '' : '/your-repo-name',
    }
  }
};