Static site generation
要使用 SvelteKit 作为静态网站生成器(SSG),请使用 adapter-static。
这将为您的整个网站预渲染成一个静态文件的集合。如果您只想预渲染一些页面,而动态服务器渲染其他页面,您需要使用不同的适配器,并配合以下预渲染选项。
使用
安装 npm i -D @sveltejs/adapter-static 后,将适配器添加到您的svelte.config.js中:
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选项:
// 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 提供最佳配置:
export default {
kit: {
adapter: any;
}
kit: {
adapter: anyadapter: adapter({...})
}
};选项
页
目录用于写入预渲染页面的位置。默认为 build。
资产
目录用于写入静态资源(static的内容,以及由 SvelteKit 生成的客户端 JS 和 CSS)。通常,这应该与pages相同,并且默认为pages的值,但在罕见情况下,您可能需要将页面和资源输出到不同的位置。
回退
指定一个用于 SPA 模式 的回退页面,例如 index.html 或 200.html 或 404.html。
预压缩
如果 true,则使用 brotli 和 gzip 预压缩文件。这将生成.br和.gz文件。
严格
默认情况下,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 而不是从根目录提供服务。
您还希望生成一个后备的 404.html 页面,以替换 GitHub Pages 显示的默认 404 页面。
一个 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。以下是一个示例工作流程:
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 干扰。
Edit this page on GitHub llms.txt