Skip to main content

Static site generation

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

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

使い方

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

svelte.config
import import adapteradapter from '@sveltejs/adapter-static';

export default {
	
kit: {
    adapter: any;
}
kit
: {
adapter: anyadapter: import adapteradapter({ // default options are shown. On some platforms // these options are set automatically — see below pages: stringpages: 'build', assets: stringassets: 'build', fallback: undefinedfallback: var undefinedundefined, precompress: booleanprecompress: false, strict: booleanstrict: true }) } };

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

src/routes/+layout
// This can be false if you're using a fallback (i.e. SPA mode)
export const const prerender: trueprerender = true;

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

ゼロコンフィグサポート

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

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

svelte.config
export default {
	
kit: {
    adapter: any;
}
kit
: {
adapter: anyadapter: adapter({...}) } };

Options

pages

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

assets

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

fallback

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

precompress

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

strict

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

GitHub Pages

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
import import adapteradapter from '@sveltejs/adapter-static';

/** @type {import('@sveltejs/kit').Config} */
const 
const config: {
    kit: {
        adapter: any;
        paths: {
 base: string | undefined;
        };
    };
}
@type{import('@sveltejs/kit').Config}
config
= {
kit: {
    adapter: any;
    paths: {
        base: string | undefined;
    };
}
kit
: {
adapter: anyadapter: import adapteradapter({ fallback: stringfallback: '404.html' }),
paths: {
    base: string | undefined;
}
paths
: {
base: string | undefinedbase: var process: NodeJS.Processprocess.NodeJS.Process.argv: string[]

The process.argv property returns an array containing the command-line arguments passed when the Node.js process was launched. The first element will be {@link execPath } . See process.argv0 if access to the original value of argv[0] is needed. The second element will be the path to the JavaScript file being executed. The remaining elements will be any additional command-line arguments.

For example, assuming the following script for process-args.js:

import { argv } from 'node:process';

// print process.argv
argv.forEach((val, index) => {
  console.log(`${index}: ${val}`);
});

Launching the Node.js process as:

node process-args.js one two=three four

Would generate the output:

0: /usr/local/bin/node
1: /Users/mjr/work/node/process-args.js
2: one
3: two=three
4: four
@sincev0.1.27
argv
.Array<string>.includes(searchElement: string, fromIndex?: number): boolean

Determines whether an array includes a certain element, returning true or false as appropriate.

@paramsearchElement The element to search for.
@paramfromIndex The position in this array at which to begin searching for searchElement.
includes
('dev') ? '' : var process: NodeJS.Processprocess.NodeJS.Process.env: NodeJS.ProcessEnv

The process.env property returns an object containing the user environment. See environ(7).

An example of this object looks like:

{
  TERM: 'xterm-256color',
  SHELL: '/usr/local/bin/bash',
  USER: 'maciej',
  PATH: '~/.bin/:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin',
  PWD: '/Users/maciej',
  EDITOR: 'vim',
  SHLVL: '1',
  HOME: '/Users/maciej',
  LOGNAME: 'maciej',
  _: '/usr/local/bin/node'
}

It is possible to modify this object, but such modifications will not be reflected outside the Node.js process, or (unless explicitly requested) to other Worker threads. In other words, the following example would not work:

node -e 'process.env.foo = "bar"' &#x26;#x26;&#x26;#x26; echo $foo

While the following will:

import { env } from 'node:process';

env.foo = 'bar';
console.log(env.foo);

Assigning a property on process.env will implicitly convert the value to a string. This behavior is deprecated. Future versions of Node.js may throw an error when the value is not a string, number, or boolean.

import { env } from 'node:process';

env.test = null;
console.log(env.test);
// => 'null'
env.test = undefined;
console.log(env.test);
// => 'undefined'

Use delete to delete a property from process.env.

import { env } from 'node:process';

env.TEST = 1;
delete env.TEST;
console.log(env.TEST);
// => undefined

On Windows operating systems, environment variables are case-insensitive.

import { env } from 'node:process';

env.TEST = 1;
console.log(env.test);
// => 1

Unless explicitly specified when creating a Worker instance, each Worker thread has its own copy of process.env, based on its parent thread’s process.env, or whatever was specified as the env option to the Worker constructor. Changes to process.env will not be visible across Worker threads, and only the main thread can make changes that are visible to the operating system or to native add-ons. On Windows, a copy of process.env on a Worker instance operates in a case-sensitive manner unlike the main thread.

@sincev0.1.27
env
.string | undefinedBASE_PATH
} } }; export default
const config: {
    kit: {
        adapter: any;
        paths: {
 base: string | undefined;
        };
    };
}
@type{import('@sveltejs/kit').Config}
config
;

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

.github/workflows/deploy
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.

Edit this page on GitHub