使用自定义域将 SvelteKit 应用部署到 GitHub Pages（放弃 GoDaddy 转而使用 Porkbun）

现在是 2023 年，我被解雇了，我需要一个作品集网站来证明我懂行。我在 Figma 中勾勒出了一个设计草图，但却分心在地下室建造桑拿房。剧透：桑拿房比网站先完工。

时间飞快——我找到了新工作，但作品集模拟却积满灰尘。八个月后，我终于用 Svelte 完成了网站，Svelte 是一个闪亮的新框架，具有我喜欢的语法。但部署它？使用 GoDaddy。花了几个小时处理 DNS 设置，并学习购买和配置 SSL 证书，这让我很沮丧。就在那时，我发现了 Porkbun——透明的定价、免费的 SSL 和轻松的设置。

现在，让我一步一步地向您展示如何让您的 Svelte 应用程序上线，而无需我忍受的麻烦。

步骤 1：安装静态适配器

SvelteKit 提供各种针对不同部署设置的适配器 - Node.js 服务器、无服务器平台、边缘功能等。您选择的适配器决定了您的应用的部署方式。对于 GitHub Pages，我们将使用 @sveltejs/adapter-static，它是静态站点托管的理想选择。

将其安装为开发依赖项：

pnpm add -D @sveltejs/adapter-static

使用此适配器，您的应用将在构建过程中预渲染为静态文件，随时可以上线。简单又有效！

第 2 步：配置静态适配器

首先将新安装的包导入到 svelte.config.js 文件中。接下来，添加下面提供的默认配置。您可以随意调整它以满足您的需求，并参阅 adapter-static 文档了解更多详细信息。

import adapter from '@sveltejs/adapter-static';
import { sveltePreprocess } from 'svelte-preprocess';

export default {
 preprocess: sveltePreprocess({ ...sveltePreprocess() }),
 kit: {
  adapter: adapter({
   // default options are shown. On some platforms
   // these options are set automatically - see below
   pages: 'build',
   assets: 'build',
   fallback: 'index.html',
   precompress: false,
   strict: true
  })
 },
};

最后，运行构建命令并确认项目的输出位于构建文件夹中：

pnpm build

步骤 3：使用 GitHub Actions 进行免手动部署

在项目根目录下添加一个 .github/workflows 文件夹，并在其中创建一个 deploy.yml 文件。此文件告诉 GitHub Actions 如何处理应用程序的部署。这是一个示例配置 - 请务必根据您使用的包管理器进行调整：

name: Deploy to GitHub Pages

on:
  push:
    branches:
      - main

jobs:
  build_site:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - 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: pnpm

      - name: Install dependencies
        run: pnpm install

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

      - name: Upload Artifacts
        uses: actions/upload-pages-artifact@v3
        with:
          # This should match the `pages` option in your adapter-static configuration
          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 都会自动部署你的应用。你可以通过访问 GitHub Pages 默认 URL 来验证部署情况，该 URL 通常是：

https://.github.io/

步骤 4：Porkbun 取代 GoDaddy — DNS 设置变得简单

前往 Porkbun 购买域名。您可以随意添加任何您想要的附加功能 — 我选择了最基本的选项，价格为 38.55 美元。

接下来，转到您的域名管理页面。将鼠标悬停在您的域名行上，您将看到 DNS 文本出现 - 单击它以打开设置模式（请参阅屏幕截图以供参考）。

打开模式后，向下滚动到快速 DNS 配置部分并选择 GitHub。这将自动填充部署所需的 DNS 记录，为您节省一小时的设置时间，并免去您担心 SSL 证书配置的麻烦 — 与 GoDaddy 不同。

第五步：Github页面设置

最后一步是更新您的 GitHub Pages 设置并将其指向您的自定义域。转到您的存储库的设置页面并导航到 Pages 部分。确保部署源设置为 GitHub Actions（因为这就是我们设置部署的方式）。

接下来，将您的自定义域粘贴到自定义域输入字段并保存更改。 GitHub 将开始验证您的域并设置 SSL 证书。这可能需要一些时间，您可能需要刷新或重试以使强制 HTTPS 复选框可用。

验证完所有内容后，您的应用将在您的自定义域中上线。恭喜您 — 您已正式部署了 Svelte 应用！🎉

想要查看实际示例吗？请访问我的网站并告诉我您的想法！