静态网站生成
要将 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
而不是从根目录提供服务。
你还需要生成一个后备 404.html
页面以替换 GitHub Pages 显示的默认 404 页面。
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 干预。