メインコンテンツへスキップ

静的サイト生成

SvelteKitを静的サイトジェネレーター(SSG)として使用するには、adapter-staticを使用してください。

これは、サイト全体を静的ファイルの集合としてプリレンダリングします。一部のページのみをプリレンダリングし、他のページを動的にサーバーレンダリングする場合は、prerenderオプションと共に別のアダプターを使用する必要があります。

使用方法

npm i -D @sveltejs/adapter-staticでインストールし、アダプターをsvelte.config.jsに追加します

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オプションを追加します

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をレンダリングしない場合は、ルートレイアウトで`trailingSlash: 'always'`を設定して、代わりに`/a/index.html`を作成する必要があります。

設定不要のサポート

一部のプラットフォームでは設定不要のサポートがあります(今後さらに追加される予定です)。

これらのプラットフォームでは、`adapter-static`が最適な構成を提供できるように、アダプターオプションを省略する必要があります。

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

オプション

pages

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

assets

静的アセット(`static`の内容に加えて、SvelteKitによって生成されたクライアントサイドのJSとCSS)を書き込むディレクトリ。通常、これは`pages`と同じである必要があり、`pages`の値にデフォルト設定されますが、まれにページとアセットを別の場所に配置する必要がある場合があります。

fallback

SPAモードのフォールバックページを指定します。例:`index.html`、`200.html`、`404.html`。

precompress

`true`の場合、brotliとgzipでファイルを事前圧縮します。これにより、`.br`ファイルと`.gz`ファイルが生成されます。

strict

デフォルトでは、`adapter-static`は、アプリのすべてのページとエンドポイント(存在する場合)がプリレンダリングされているか、`fallback`オプションが設定されていることを確認します。このチェックは、最終出力に含まれていないためにアクセスできないアプリの一部を誤って公開しないようにするために存在します。これが問題ないことがわかっている場合(たとえば、特定のページが条件付きでしか存在しない場合)、`strict`を`false`に設定してこのチェックを無効にすることができます。

GitHub Pages

GitHub Pages用にビルドする場合、リポジトリ名が`your-username.github.io`と同等でない場合は、`config.kit.paths.base`をリポジトリ名と一致するように更新してください。これは、サイトがルートではなく`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に自動的にデプロイできます。ワークフローの例を次に示します。

.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

GitHub Actionsを使用してサイトをデプロイしていない場合(たとえば、ビルドされたサイトを独自のリポジトリにプッシュしている場合)、`static`ディレクトリに空の`.nojekyll`ファイルを追加して、Jekyllの干渉を防ぎます。

GitHubでこのページを編集する