建置和部署

靜態網站產生

若要將 SvelteKit 用作靜態網站產生器 (SSG)，請使用 adapter-static。

這將預先渲染您的整個網站作為靜態檔案的集合。如果您只想預先渲染某些頁面，並動態伺服器渲染其他頁面，則需要將不同的轉接器與 prerender 選項搭配使用。

使用永久連結

使用 npm i -D @sveltejs/adapter-static 安裝，然後將轉接器新增至您的 svelte.config.js

svelte.config.js

ts
import adapter from '@sveltejs/adapter-static';
Cannot find module '@sveltejs/adapter-static' or its corresponding type declarations.2307Cannot find module '@sveltejs/adapter-static' or its corresponding type declarations.
export default {
	kit: {
		adapter: adapter({
			// default options are shown. On some platforms
			// these options are set automatically — see below
			pages: 'build',
			assets: 'build',
			fallback: undefined,
			precompress: false,
			strict: true
		})
	}
};

...並將 prerender 選項新增至您的根佈局

src/routes/+layout.js

ts
// This can be false if you're using a fallback (i.e. SPA mode)
export const prerender = true;

src/routes/+layout.ts

ts
// This can be false if you're using a fallback (i.e. SPA mode)
export const prerender = true;

您必須確保 SvelteKit 的 trailingSlash 選項已適當地設定為您的環境。如果您的主機在收到 /a 的請求時沒有渲染 /a.html，則您需要在根佈局中設定 trailingSlash: 'always' 來建立 /a/index.html。

零組態支援永久連結

有些平台有零組態支援（未來會有更多）

Vercel

在這些平台上，您應該省略轉接器選項，以便 adapter-static 可以提供最佳組態

svelte.config.js

export default {
	kit: {
		adapter: adapter({...})
		adapter: adapter()
	}
};

選項永久連結

pages永久連結

要寫入預先渲染頁面的目錄。預設為 build。

assets永久連結

要寫入靜態資產的目錄（static 的內容，加上 SvelteKit 產生的用戶端 JS 和 CSS）。通常這應該與 pages 相同，並且會預設為 pages 的值，但在某些罕見情況下，您可能需要將頁面和資產輸出到不同的位置。

備用永久連結

為 SPA 模式指定備用頁面，例如 index.html 或 200.html 或 404.html。

預先壓縮永久連結

如果為 true，會使用 brotli 和 gzip 預先壓縮檔案。這會產生 .br 和 .gz 檔案。

嚴格永久連結

預設情況下，adapter-static 會檢查應用程式的所有頁面和端點（如果有）是否已預先渲染，或者您已設定 fallback 選項。此檢查的存在是為了防止您意外發布應用程式，其中某些部分無法存取，因為它們未包含在最終輸出中。如果您知道這沒問題（例如，當某個頁面僅有條件存在時），您可以將 strict 設定為 false 以關閉此檢查。

GitHub Pages永久連結

在為 GitHub Pages 建置時，如果您的儲存庫名稱不等於 your-username.github.io，請務必更新 config.kit.paths.base 以符合您的儲存庫名稱。這是因為網站會從 https://your-username.github.io/your-repo-name 提供，而不是從根目錄提供。

您還需要產生一個備用的 404.html 頁面，以取代 GitHub Pages 顯示的預設 404 頁面。

GitHub Pages 的設定檔可能如下所示

svelte.config.js

ts
import adapter from '@sveltejs/adapter-static';
Cannot find module '@sveltejs/adapter-static' or its corresponding type declarations.2307Cannot find module '@sveltejs/adapter-static' or its corresponding type declarations.
/** @type {import('@sveltejs/kit').Config} */
const config = {
	kit: {
		adapter: adapter({
			fallback: '404.html'
		}),
		paths: {
			base: process.argv.includes('dev') ? '' : process.env.BASE_PATH
Type 'string | undefined' is not assignable to type '"" | `/${string}` | undefined'.
  Type 'string' is not assignable to type '"" | `/${string}` | undefined'.2322Type 'string | undefined' is not assignable to type '"" | `/${string}` | undefined'.
  Type 'string' is not assignable to type '"" | `/${string}` | undefined'.		}
	}
};

export default config;

當您進行變更時，您可以使用 GitHub 操作自動將您的網站部署到 GitHub Pages。以下是一個範例工作流程

.github/workflows/deploy.yml

yaml
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

如果您沒有使用 GitHub 操作來部署您的網站（例如，您將建置的網站推送到其自己的儲存庫），請在您的 static 目錄中新增一個空的 .nojekyll 檔案，以防止 Jekyll 造成干擾。

上一個 Node 伺服器

下一個單頁面應用程式