Static site generation
SvelteKit を static site generator (SSG) として使用するには、adapter-static を使用します。
この adapter はサイト全体を静的なファイルのコレクションとしてプリレンダリングします。もし、一部のページのみをプリレンダリングして他のページは動的にサーバーでレンダリングしたい場合、別の adapter と prerender オプション を組み合わせて使用する必要があります。
使い方
npm i -D @sveltejs/adapter-static を実行してインストールし、svelte.config.js にこの adapter を追加します:
import import adapteradapter from '@sveltejs/adapter-static';
/** @type {import('@sveltejs/kit').Config} */
const const config: {
kit: {
adapter: any;
};
}
config = {
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
})
}
};
export default const config: {
kit: {
adapter: any;
};
}
config;…そして prerender オプションを最上位のレイアウト(root layout)に追加します:
// If you're using a fallback (i.e. SPA mode) you don't need to prerender all
// pages by setting this here, but should prerender as many as possible to
// avoid large performance and SEO impacts
export const const prerender: trueprerender = true;SvelteKit の
trailingSlashオプションを、あなたの環境に対して適切に設定しなければなりません。もしあなたのホスト環境が、/aへのリクエストを受け取ったときに/a.htmlをレンダリングしない場合、/a/index.htmlを作成するために最上位のレイアウト(root layout)でtrailingSlash: 'always'を設定する必要があります。
ゼロコンフィグサポート
ゼロコンフィグサポートがあるプラットフォームもあります (将来増える予定):
これらのプラットフォームでは、adapter のオプションを省略することで、adapter-static が最適な設定を提供できるようになります:
import import adapteradapter from '@sveltejs/adapter-static';
/** @type {import('@sveltejs/kit').Config} */
const const config: {
kit: {
adapter: any;
};
}
config = {
kit: {
adapter: any;
}
kit: {
adapter: anyadapter: import adapteradapter({...})
}
};
export default const config: {
kit: {
adapter: any;
};
}
config;Options
pages
プリレンダリングされたページを書き込むディレクトリです。デフォルトは build です。
assets
静的なアセット (static のコンテンツと、SvelteKit が生成するクライアントサイドの JS と CSS) を書き込むディレクトリです。通常は pages と同じにするべきで、デフォルトでは、それがどんな値だったとしても、pages の値になります。しかし、まれな状況では、出力されるページとアセットを別々の場所にする必要があるかもしれません。
fallback
シングルページアプリ (SPA)を作成するには、SvelteKit によって生成されるフォールバックページ (fallback page) の名前を指定する必要があります。これは、プリレンダリングされない URL のエントリーポインとして使用されます。一般的には 200.html ですが、使用するデプロイメントプラットフォームによって異なる場合があります。プリレンダリングされるホームページとの競合を避けるため、index.html という名前は可能な限り避けるべきです。
このオプションはパフォーマンスと SEO に大きな悪影響を及ぼします。例えば、モバイルアプリでサイトをラップする場合など、特定の状況でのみ推奨されます。詳細と代替案については、シングルページアプリ のドキュメントをご覧ください。
precompress
true の場合、brotli や gzip でファイルを事前圧縮(precompress)します。これによって .br ファイルや .gz ファイルが生成されます。
strict
デフォルトでは adapter-static は、アプリの全てのページとエンドポイント (もしあれば) がプリレンダリングされているか、もしくは fallback オプションが設定されているかをチェックします。このチェックは、アプリの一部が最終的な出力に含まれずアクセスできない状態なのに誤って公開されてしまうのを防ぐために存在します。もし、それでも良いことがわかっている場合 (例えばあるページが条件付きでしか存在しない場合)、strict を false に設定してこのチェックをオフにすることができます。
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 向けの設定は以下のようになるでしょう:
import import adapteradapter from '@sveltejs/adapter-static';
/** @type {import('@sveltejs/kit').Config} */
const const config: {
kit: {
adapter: any;
paths: {
base: string | undefined;
};
};
}
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 fourWould generate the output:
0: /usr/local/bin/node
1: /Users/mjr/work/node/process-args.js
2: one
3: two=three
4: fourArray<string>.includes(searchElement: string, fromIndex?: number): booleanDetermines whether an array includes a certain element, returning true or false as appropriate.
var process: NodeJS.Processprocess.NodeJS.Process.env: NodeJS.ProcessEnvThe 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 otherWorker threads.
In other words, the following example would not work:
node -e 'process.env.foo = "bar"' &#x26;&#x26; echo $fooWhile 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
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);
// => undefinedOn Windows operating systems, environment variables are case-insensitive.
import { env } from 'node:process';
env.TEST = 1;
console.log(env.test);
// => 1Unless explicitly specified when creating a Worker instance,
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.
string | undefinedBASE_PATH
}
}
};
export default const config: {
kit: {
adapter: any;
paths: {
base: string | undefined;
};
};
}config;GitHub actions を使用して、サイトが変更されたときに自動で GitHub Pages にデプロイすることができます。サンプルの workflow はこちらです:
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 i
- 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@v4If 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 llms.txt