Génération de site statique
Pour utiliser SvelteKit comme un générateur de site statique (SSG), utilisez
adapter-static
.
Cet adaptateur va pré-rendre tout votre site comme une collection de fichiers statiques. Si vous
souhaitez pré-rendre uniquement certaines pages et rendre dynamiquement sur le serveur d’autres
pages, vous aurez besoin d’un adaptateur différent combiné à l’usage de l’option
prerender
.
Usage
Installez l’adaptateur avec npm i -D @sveltejs/adapter-static
, puis ajoutez-le à votre fichier
svelte.config.js
:
import import adapter
adapter from '@sveltejs/adapter-static';
export default {
kit: {
adapter: any;
}
kit: {
adapter: any
adapter: import adapter
adapter({
// les options par défaut sont montrées. Sur certaines
// plateformes, ces options sont définies automatiquement
// — voir plus bas
pages: string
pages: 'build',
assets: string
assets: 'build',
fallback: undefined
fallback: var undefined
undefined,
precompress: boolean
precompress: false,
strict: boolean
strict: true
})
}
};
... et ajoutez l’option prerender
à votre layout racine :
// Ceci peut valoir false si vous utilisez un fallback (c-à-d le mode SPA)
export const const prerender: true
prerender = true;
Vous devez vous assurer que l’option de SvelteKit
trailingSlash
est définie de manière appropriée à votre environnement. Si votre hôte n’affiche pas/a.html
à la réception d’une requête pour/a
, vous devrez alors définirtrailingSlash: 'always'
dans votre layout racine pour créer plutôt/a/index.html
.
Support zéro configuration
Certaines plateformes ont un support ne nécessitant pas de configuration (et d’autres viendront dans le futur) :
Sur ces plateformes, vous devriez omettre les options d’adaptateur afin que l’adaptateur
adapter-static
puisse fournir la configuration optimale :
export default {
kit: {
adapter: any;
}
kit: {
adapter: any
adapter: adapter({...})
}
};
Options
pages
Le dossier dans lequel écrire les pages pré-rendues. Vaut par défaut build
.
assets
Le dossier dans lequel écrire les assets statiques (le contenu de static
, plus les fichiers JS et
CSS client générés par SvelteKit). En général cette option devrait être le même que pages
, et va
donc valoir par défaut la valeur de pages
, mais dans de rares circonstances vous pourriez avoir
besoin de définir vos pages et vos assets dans des endroits différents.
fallback
Permet de définir une page de secours pour le mode SPA, par ex. index.html
,
200.html
ou 404.html
.
precompress
Si true
, pré-compresse les fichiers avec brotli et gzip. Cela va ainsi générer des fichiers .br
et .gz
.
strict
Par défaut, l’adaptateur adapter-static
vérifie que soit toutes les pages et endpoints (s’il y en
a) de votre application ont été pré-rendues, ou si vous avez l’option fallback
définie. Cette
vérification existe pour vous empêcher de publier accidentellement une application dont certaines
parties sont inaccessibles car non incluses dans le dossier compilé. Si vous savez que cette
situation n’est pas un problème pour vous (par exemple lorsqu’une certaine page n’existe que dans
certaines conditions), vous pouvez définir strict
à false
pour désactiver cette vérification.
GitHub Pages
Lorsque vous compilez pour GitHub
Pages, si le
nom de votre repo n’est pas équivalent à votre-nom.github.io
, assurez-vous de mettre à jour
l’option config.kit.paths.base
pour que cela corresponde au nom de votre
repo. C’est nécessaire car votre site sera servi depuis
https://your-username.github.io/your-repo-name
plutôt que depuis la racine.
Vous allez également avoir besoin de générer une page 404.html
de secours pour remplacer la page
404 montrée par défaut par Github Pages.
Voici une configuration possible pour 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
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;Vous pouvez utiliser les actions Github pour déployer automatiquement votre site sur Github Pages lorsque vous faites un changement. Voici un workflow d’exemple :
name: Déploiement sur GitHub Pages
on:
push:
branches: 'main'
jobs:
build_site:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
# Si vous utilisez pnpm, ajoutez cette étape puis changez les commandes et les clés de cache
# plus bas pour utiliser pnpm
# - name: Install pnpm
# uses: pnpm/action-setup@v3
# with:
# version: 8
- name: Installer Node.js
uses: actions/setup-node@v4
with:
node-version: 20
cache: npm
- name: Installer les dépendances
run: npm install
- name: build
env:
BASE_PATH: '/${{ github.event.repository.name }}'
run: |
npm run build
- name: Uploader les artéfacts
uses: actions/upload-pages-artifact@v3
with:
# ceci devrait correspondre à l'option `pages` dans les options de l'adaptateur
# adapter-static
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
Si vous n’utilisez pas d’action Github pour déployer votre site (par exemple, vous envoyez le site
compilé vers son propre repo), ajoutez un fichier .nojekyll
vide dans votre dossier static
pour
empêcher Jekyll d’interférer.
Modifier cette page sur Github llms.txt