Skip to main content

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 :

svelte.config
import import adapteradapter from '@sveltejs/adapter-static';

export default {
	
kit: {
    adapter: any;
}
kit
: {
adapter: anyadapter: import adapteradapter({ // les options par défaut sont montrées. Sur certaines // plateformes, ces options sont définies automatiquement // — voir plus bas pages: stringpages: 'build', assets: stringassets: 'build', fallback: undefinedfallback: var undefinedundefined, precompress: booleanprecompress: false, strict: booleanstrict: true }) } };

... et ajoutez l’option prerender à votre layout racine :

src/routes/+layout
// Ceci peut valoir false si vous utilisez un fallback (c-à-d le mode SPA)
export const const prerender: trueprerender = 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éfinir trailingSlash: '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 :

svelte.config
export default {
	
kit: {
    adapter: any;
}
kit
: {
adapter: anyadapter: 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 :

svelte.config
import import adapteradapter from '@sveltejs/adapter-static';

/** @type {import('@sveltejs/kit').Config} */
const 
const config: {
    kit: {
        adapter: any;
        paths: {
 base: string | undefined;
        };
    };
}
@type{import('@sveltejs/kit').Config}
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 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
@sincev0.1.27
argv
.Array<string>.includes(searchElement: string, fromIndex?: number): boolean

Determines whether an array includes a certain element, returning true or false as appropriate.

@paramsearchElement The element to search for.
@paramfromIndex The position in this array at which to begin searching for searchElement.
includes
('dev') ? '' : var process: NodeJS.Processprocess.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;&#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.

@sincev0.1.27
env
.string | undefinedBASE_PATH
} } }; export default
const config: {
    kit: {
        adapter: any;
        paths: {
 base: string | undefined;
        };
    };
}
@type{import('@sveltejs/kit').Config}
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 :

.github/workflows/deploy
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

précédent suivant