Static site generation
To use SvelteKit as a static site generator (SSG), use adapter-static
.
This will prerender your entire site as a collection of static files. If you’d like to prerender only some pages and dynamically server-render others, you will need to use a different adapter together with the prerender
option.
Usage
Install with npm i -D @sveltejs/adapter-static
, then add the adapter to your 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
})
}
};
...and add the prerender
option to your root layout:
// This can be false if you're using a fallback (i.e. SPA mode)
export const const prerender: true
prerender = true;
You must ensure SvelteKit’s
trailingSlash
option is set appropriately for your environment. If your host does not render/a.html
upon receiving a request for/a
then you will need to settrailingSlash: 'always'
in your root layout to create/a/index.html
instead.
Zero-config support
Some platforms have zero-config support (more to come in future):
On these platforms, you should omit the adapter options so that adapter-static
can provide the optimal configuration:
export default {
kit: {
adapter: any;
}
kit: {
adapter: any
adapter: adapter({...})
}
};
Options
pages
The directory to write prerendered pages to. It defaults to build
.
assets
The directory to write static assets (the contents of static
, plus client-side JS and CSS generated by SvelteKit) to. Ordinarily this should be the same as pages
, and it will default to whatever the value of pages
is, but in rare circumstances you might need to output pages and assets to separate locations.
fallback
Specify a fallback page for SPA mode, e.g. index.html
or 200.html
or 404.html
.
precompress
If true
, precompresses files with brotli and gzip. This will generate .br
and .gz
files.
strict
By default, adapter-static
checks that either all pages and endpoints (if any) of your app were prerendered, or you have the fallback
option set. This check exists to prevent you from accidentally publishing an app where some parts of it are not accessible, because they are not contained in the final output. If you know this is ok (for example when a certain page only exists conditionally), you can set strict
to false
to turn off this check.
GitHub Pages
When building for GitHub Pages, if your repo name is not equivalent to your-username.github.io
, make sure to update config.kit.paths.base
to match your repo name. This is because the site will be served from https://your-username.github.io/your-repo-name
rather than from the root.
You’ll also want to generate a fallback 404.html
page to replace the default 404 page shown by GitHub Pages.
A config for GitHub Pages might look like the following:
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
Array<string>.includes(searchElement: string, fromIndex?: number): boolean
Determines whether an array includes a certain element, returning true or false as appropriate.
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 otherWorker
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
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,
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 | undefined
BASE_PATH
}
}
};
export default const config: {
kit: {
adapter: any;
paths: {
base: string | undefined;
};
};
}config;You can use GitHub actions to automatically deploy your site to GitHub Pages when you make a change. Here’s an example 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 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
If 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.