Build and deploy

Static site generation

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

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

使い方permalink

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

svelte.config.js

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: undefined,
			precompress: false,
			strict: true
		})
	}
};

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

src/routes/+layout.js

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

src/routes/+layout.ts

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 を作成するために最上位のレイアウト(root layout)で trailingSlash: 'always' を設定する必要があります。

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

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

Vercel

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

svelte.config.js

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 ファイルが生成されます。

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

GitHub Pagespermalink

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

GitHub Pages が提供するデフォルトの 404 ページを置き換えるためにフォールバック用の 404.html ページを生成することもあるでしょう。

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

svelte.config.js

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.
/** @type {import('@sveltejs/kit').Config} */
const config = {
	kit: {
		adapter: adapter({
			fallback: '404.html'
		}),
		paths: {
			base: process.argv.includes('dev') ? '' : process.env.BASE_PATH
Type 'string | undefined' is not assignable to type '"" | `/${string}` | undefined'.
  Type 'string' is not assignable to type '"" | `/${string}` | undefined'.2322Type 'string | undefined' is not assignable to type '"" | `/${string}` | undefined'.
  Type 'string' is not assignable to type '"" | `/${string}` | undefined'.		}
	}
};

export default config;

GitHub actions を使用して、サイトが変更されたときに自動で GitHub Pages にデプロイすることができます。サンプルの workflow はこちらです:

.github/workflows/deploy.yml

yaml
name: Deploy to GitHub Pages

on:
  push:
    branches: 'main'

jobs:
  build_site:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      # If you're using pnpm, add this step then change the commands and cache key below to use `pnpm`
      # - name: Install pnpm
      #   uses: pnpm/action-setup@v3
      #   with:
      #     version: 8

      - name: Install Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm

      - name: Install dependencies
        run: npm install

      - name: build
        env:
          BASE_PATH: '/${{ github.event.repository.name }}'
        run: |
          npm run build

      - name: Upload Artifacts
        uses: actions/upload-pages-artifact@v3
        with:
          # this should match the `pages` option in your adapter-static options
          path: 'build/'

  deploy:
    needs: build_site
    runs-on: ubuntu-latest

    permissions:
      pages: write
      id-token: write

    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}

    steps:
      - name: Deploy
        id: deployment
        uses: actions/deploy-pages@v4

If you're not using GitHub actions to deploy your site (for example, you're pushing the built site to its own repo), add an empty .nojekyll file in your static directory to prevent Jekyll from interfering.

previous Node サーバー

next Single-page apps

Static site generation

使い方permalink

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

Optionspermalink

pagespermalink

assetspermalink

fallbackpermalink

precompresspermalink

strictpermalink

GitHub Pagespermalink