Pour utiliser SvelteKit comme un générateur de site statique (SSG), utilisez [`adapter-static`](https://github.com/sveltejs/kit/tree/main/packages/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`](page-options#prerender). ## Usage Installez l'adaptateur avec `npm i -D @sveltejs/adapter-static`, puis ajoutez-le à votre fichier `svelte.config.js` : ```js // @errors: 2307 /// file: svelte.config.js import adapter from '@sveltejs/adapter-static'; export default { 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 }) } }; ``` ... et ajoutez l'option [`prerender`](page-options#prerender) à votre layout racine : ```js /// file: src/routes/+layout.js // Ceci peut valoir false si vous utilisez un fallback (c-à-d le mode SPA) export const prerender = true; ``` > [!NOTE] Vous devez vous assurer que l'option de SvelteKit > [`trailingSlash`](page-options#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 [!VO]Zero-config support Certaines plateformes ont un support ne nécessitant pas de configuration (et d'autres viendront dans le futur) : - [Vercel](https://vercel.com) Sur ces plateformes, vous devriez omettre les options d'adaptateur afin que l'adaptateur `adapter-static` puisse fournir la configuration optimale : ```js // @errors: 2304 /// file: svelte.config.js export default { kit: { 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](single-page-apps), 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](https://docs.github.com/en/pages/getting-started-with-github-pages/about-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`](configuration#paths) 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 : ```js // @errors: 2307 2322 /// file: svelte.config.js 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 : ```yaml ### file: .github/workflows/deploy.yml 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.