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 adapter from '@sveltejs/adapter-static';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	kit: {
		adapter: adapter({
			// les options par défaut sont montrées. Sur certaines
			// plateformes, ces options sont définies automatiquement
			// — voir plus bas
			pages: 'build',
			assets: 'build',
			fallback: undefined,
			precompress: false,
			strict: true
		})
	}
};

export default config;

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

src/routes/+layout
// Si vous utilisez un fallback (c-à-d le mode SPA) vous n'avez pas besoin de pré-rendre toutes
// les pages en définissant ce paramètre, mais vous devriez pré-rendre un maximum de pages pour
// éviter des impacts significatifs sur les performances ou le référencement de votre application
export const 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éfinir trailingSlash: 'always' dans votre layout racine pour créer plutôt /a/index.html.

Vous devez vous assurer que l’option ssr de SvelteKit n’est pas définie à false. Autrement, le pré-rendu ne construira qu’une page “coquille” vide au lieu de la page entièrement rendue.

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
import adapter from '@sveltejs/adapter-static';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	kit: {
		adapter: adapter({...})
	}
};

export default config;

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

Pour créer une SPA, vous devez préciser le nom de la page de secours que SvelteKit va générer, qui peut être utilisé comme point d’entrée pour les URLs qui n’ont pas été générées. C’est en général 200.html, mais peut varier en fonction de votre plate-forme de déploiement. Vous devriez éviter index.html lorsque c’est possible pour éviter de rentrer en conflit avec une éventuelle page d’accueil pré-rendue.

Cette option a un impact significatif sur les performances et le référencement de votre application. Elle n’est recommandée que dans certaines circonstances telles que l’embarquement du site dans une application mobile. Voir la section sur les SPA pour plus de détails et en apprendre plus sur les alternatives.

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 adapter from '@sveltejs/adapter-static';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	kit: {
		adapter: adapter({
			fallback: '404.html'
		}),
		paths: {
			base: process.argv.includes('dev') ? '' : process.env.BASE_PATH
		}
	}
};

export default 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@v7

			# 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@v6
      #   with:
      #     version: 8

      - name: Install Node.js
        uses: actions/setup-node@v6
        with:
          node-version: 20
          cache: npm

      - name: Installer les dépendances
        run: npm i

      - name: build
        env:
          BASE_PATH: '/${{ github.event.repository.name }}'
        run: |
          npm run build

      - name: Upload Artifacts
        uses: actions/upload-pages-artifact@v5
        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@v5

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