静的サイト生成
SvelteKitを静的サイトジェネレーター(SSG)として使用するには、adapter-static
を使用してください。
これは、サイト全体を静的ファイルの集合としてプリレンダリングします。一部のページのみをプリレンダリングし、他のページを動的にサーバーレンダリングする場合は、prerender
オプションと共に別のアダプターを使用する必要があります。
使用方法
npm i -D @sveltejs/adapter-static
でインストールし、アダプターをsvelte.config.js
に追加します
import import adapter
adapter from '@sveltejs/adapter-static';
export default {
kit: {
adapter: any;
}
kit: {
adapter: any
adapter: import adapter
adapter({
// default options are shown. On some platforms
// these options are set automatically — see below
pages: string
pages: 'build',
assets: string
assets: 'build',
fallback: undefined
fallback: var undefined
undefined,
precompress: boolean
precompress: false,
strict: boolean
strict: true
})
}
};
...そして、ルートレイアウトにprerender
オプションを追加します
// This can be false if you're using a fallback (i.e. SPA mode)
export const const prerender: true
prerender = true;
環境に合わせて、SvelteKitの
trailingSlash
オプションが適切に設定されていることを確認する必要があります。ホストが/a
へのリクエストを受け取った際に/a.html
をレンダリングしない場合は、ルートレイアウトで`trailingSlash: 'always'`を設定して、代わりに`/a/index.html`を作成する必要があります。
設定不要のサポート
一部のプラットフォームでは設定不要のサポートがあります(今後さらに追加される予定です)。
これらのプラットフォームでは、`adapter-static`が最適な構成を提供できるように、アダプターオプションを省略する必要があります。
export default {
kit: {
adapter: any;
}
kit: {
adapter: any
adapter: 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の設定は次のようになります。
import import adapter
adapter 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: any
adapter: import adapter
adapter({
fallback: string
fallback: '404.html'
}),
paths: {
base: string | undefined;
}
paths: {
base: string | undefined
base: var process: NodeJS.Process
process.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
argv.Array<string>.includes(searchElement: string, fromIndex?: number): boolean
Determines whether an array includes a certain element, returning true or false as appropriate.
includes('dev') ? '' : var process: NodeJS.Process
process.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; 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.
env.string | undefined
BASE_PATH
}
}
};
export default const config: {
kit: {
adapter: any;
paths: {
base: string | undefined;
};
};
}
config;
GitHub Actionsを使用して、変更を加えたときにサイトをGitHub Pagesに自動的にデプロイできます。ワークフローの例を次に示します。
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の干渉を防ぎます。