如何使用 SvelteKit 创建静态网站

静态网站因其速度快、安全和简单而越来越受欢迎。在构建静态网站方面，有多种工具和框架可供选择，但 SvelteKit 是其中之一。

本指南将带您了解使用 SvelteKit 创建静态网站的整个过程，包括从设置到使用托管服务部署的整个过程。

SvelteKit 静态网站演示

什么是 SvelteKit？

是一个强大的 *** 框架，专为 *** 用户界面（包括静态网站）而设计。它以其性能、简洁性和通过声明式 *** 创建组件的能力而闻名。

SvelteKit 通过添加路由、服务器端渲染等功能扩展了 Svelte 框架的功能。

开始使用 SvelteKit

要学习本指南，我们假定你已具备以下条件：

• 对 、 和 有基本了解。
• 的基础知识。
• 计算机上安装了 。

要构建新的 SvelteKit 应用程序，请按照以下步骤操作。

1. 为新项目搭建脚手架：

npm create svelte@latest my-app

该命令在 my-app 目录中构建一个新项目，要求配置一些基本工具，如 。确保选择骨架项目选项，并将 my-app 更改为项目的首选名称。

1. 导航至项目目录并安装其依赖项：

cd my-app
npm install

1. 执行 npm run dev 在 localhost:5173 上启动本地开发服务器。

SvelteKit 骨架网站

了解 SvelteKit 文件结构

在代码编辑器中打开项目时，您会看到以下结构。了解这种结构至关重要，因为它可以帮助你有效地组织代码。

/
|-- /src
|-- /lib
|-- /routes
|-- +page.svelte
|-- app.html
|-- /static
|-- svelte.config.js

• /src：这是项目的核心，包含各种子目录和文件：
  • /lib：该目录包含自定义库、实用程序或模块。它是存储整个应用程序中可能会用到的可重复使用代码的好地方。
  • /routes：routes 目录对于定义应用程序中的不同页面或视图至关重要。每个页面都由一个 .svelte 文件表示，如 +page.svelte。这些 .svelte 文件包含该页面特有的组件、逻辑和样式。
  • app.html：该文件是应用程序的入口点。它定义了网页的主要结构。

• /static：该目录用于存储静态资产，如图像、字体或任何不需要应用程序处理的文件。这些资产可在 HTML 和 Svelte 组件中直接引用。
• svelte.config.js：此配置文件允许您自定义 SvelteKit 项目的各个方面。您可以用它来配置服务器端渲染、定义自定义布局等。

SvelteKit 中的路由设置

SvelteKit 的突出特点之一是它的路由系统。它采用基于文件系统的 *** ，URL 路径由 src/routes 目录中的文件和文件夹定义，因此管理起来既直观又简单。

在 SvelteKit 中，路由对应的每个文件都必须命名为 +page.svelte。例如，SvelteKit 网站的索引文件位于 routes 文件夹中，文件名为 +page.svelte。

在该文件中添加以下代码以创建主页：

<!-- src/routes/+page.svelte -->
<div class="2345HAOc7d7db35356df341 home_hero">
<h1>Enjoy Static Site Hosting With Kinsta StSH.</h1>
<p>Fast, Secure, Reliable Hosting Solution.</p>
<a href="https://kinst *** /docs/static-site-hosting">
<div class="2345HAOdb35356df341f340 btn">Read more</div>
</a>
</div>
<style>
.home_hero {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
}
.home_hero h1 {
font-size: 60px;
width: 70%;
}
.home_hero p {
color: #6e7076;
font-size: 20px;
}
.btn {
background-color: #5333ed;
padding: 20px 30px;
margin-top: 40px;
border-radius: 5px;
color: #fff;
}
@media (max-width: 700px) {
.home_hero h1 {
font-size: 40px;
}
.home_hero p {
font-size: 16px;
}
}
</style>

要在 SvelteKit 中创建嵌套路由（例如，可在 localhost:5173/about 访问的关于页面），需要在 routes 文件夹中创建一个文件夹，文件夹名称应代表 URL 路径。在该文件夹中创建一个 +page.svelte 文件，用于路由的渲染。

在 routes/about/+page.svelte 中添加以下代码：

<div class="2345HAO356df341f340970c about_cont">
<h2>About</h2>
<div class="2345HAOf341f340970ce363 about_info">
<div class="2345HAOf340970ce36379c6 about_text">
<p>
Kinsta allows you to{' '}
<a> href="https://kinst *** /docs/static-site-hosting/">
host up to 100 static websites
</a>{' '}
for free. This can be done by pushing your code to your preferred Git provider
(Bitbucket, GitHub, or Gitlab) and then deploying it to Kinsta.
</p>
<p>
As an alternative to Static Site Hosting, you can opt for deploying your
static site with Kinsta’s{' '}
<a> href="https://kinst *** /application-hosting/">
Application Hosting
</a>
, which provides greater hosting flexibility, a wider range of benefits,
and access to more robust features. For example, scalability, customized
deployment using a Dockerfile, and comprehensive  *** ytics encompassing real-time
and historical data.
</p>
</div>
<iframe> width="560" height="315" src="https://www. *** .com/embed/H7CNbsda8OA?si=40FGVlNvJ74_6hlj" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen> </iframe>
</div>
</div>
<style>>
.about_cont h2 {
font-size: 40px;
margin-bottom: 20px;
}
.about_info {
display: flex;
width: 100%;
justify-content: space-between;
gap: 20px;
}
@media (max-width: 700px) {
.about_info {
flex-direction: column;
}
}
.about_text {
flex-basis: 50%;
}
.about_text p {
margin-bottom: 20px;
font-size: 18px;
}
.about_img {
flex-basis: 50%;
width: 200px;
border-radius: 10px;
}
@media (max-width: 700px) {
.about_info {
flex-direction: column;
}
.about_img {
width: 100%;
}
}
</style>

添加到 Svelte 组件的任何样式都是有范围的，不会影响其他组件。

必须了解的是，SvelteKit 使用标准的 <a> 元素处理页面之间的导航，从而使导航过程变得直观。无需像 中要求的那样导入 <Link> 等额外组件。在接下来的章节中，我们将创建一个导航组件，并将其添加到每个页面中。

就当前项目而言，路由结构如下：

|-- /src
|-- /routes
|-- /about
|-- +page.svelte
|-- +page.svelte

在 SvelteKit 中使用组件

为了使代码更加模块化，可以创建组件并将其导入页面。例如，您可以在 routes 文件夹中创建一个 Navbar.svelte 组件：

<!-- src/routes/Navbar.svelte -->
<nav>
<a href="/">
<img src="/kinsta-logo.png" alt="" class="2345HAO970ce36379c64854 logo-img" />
</a>
<div class="2345HAOe36379c648547a94 nav-links">
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/posts">Posts</a>
</div>
</nav>

然后，像这样将其导入 +page.svelte 主页：

<!-- src/routes/+page.svelte -->
<script>>
import Navbar from './Navbar.svelte'
</script>
<Navbar />
<div class="2345HAO79c648547a945335 home_hero">
<h1>Enjoy Static Site Hosting With Kinsta.</h1>
<p>Fast, Secure, Reliable Hosting Solution.</p>
<a href="https://kinst *** /static-site-hosting">
<div> class="2345HAO48547a945335acc3 btn">Read more</div>
</a>
</div>
<style>
/* CSS styles */
</style>

对于 Navbar 和 Footer 等在多个文件中使用的全局组件，应在 src/lib 文件夹中创建，以避免过长的导入路径。在 lib 文件夹中创建组件或模块时，可以使用 $lib 导入别名方便地将它们导入到任何组件中：

<script>
import Navbar from '$lib/Navbar.svelte'
</script>

要使用独立组件，举个例子，假设你只需要一个组件用于关于页面，那么在 routes/about 路由中创建它，然后将它导入页面。

在这个项目中，你还可以在 lib 文件夹中创建一个 Footer 组件，并添加以下代码：

<div class="2345HAO7a945335acc359d2 footer">
<p>
Hosted with ️ by Kinsta's{' '}
<a> href="https://kinst *** /static-site-hosting">Static Site Hosting</a>
.
</p>
</div>

然后，将其导入所有页面。

在 SveletKit 中使用布局

为避免将组件导入多个页面，SvelteKit 允许您使用 +layout.svelte 文件为页面定义布局。

创建适用于每个页面的布局非常简单。创建一个名为 src/routes/+layout.svelte 的文件，然后用所需的标记、样式和行为对其进行自定义。最重要的要求是包含一个 <slot> 元素来容纳页面内容。

例如，可以将 Navbar 和 Footer 组件集成到该布局中：

<script>
import Navbar from '$lib/Navbar.svelte';
import Footer from '$lib/Footer.svelte';
</script>
<div class="2345HAO5335acc359d2099a layout">
<Navbar />
<slot />
<Footer />
</div>

<slot> 元素允许将每个页面的内容插入布局中。

还可以为特定页面嵌套布局。例如，如果 /dashboard 页面嵌套了 /profile 和 /settings 等页面，就可以创建一个特殊的布局：

|-- /dashboard
|-- /profile
|-- +page.svelte
|-- /settings
|-- +page.svelte
|-- +layout.svelte

SvelteKit 中的程序化导航

SvelteKit 为编程导航提供了一个 goto 函数。例如，在登录操作后导航到 /dashboard 页面：

<script>
import { goto } from '$app/navigation';
async function login() {
// Perform login action
goto('/dashboard');
}
</script>

SvelteKit 中的样式

SvelteKit 支持传统的 CSS 来设计页面样式。您可以使用 <style> 标签在 Svelte 组件中定义样式，也可以选择链接外部样式表。

您可能会注意到 Navbar 和 Footer 组件缺少特定样式。为了解决这个问题，应用全局样式是个不错的做法。这可以通过在 src 文件夹中创建 CSS 文件并将其导入根布局文件来实现。

为了更好地组织，可在 src 目录中创建一个 styles 文件夹。该文件夹可容纳所有样式。作为本项目的一部分，在 styles 文件夹中创建 global.css 文件，并添加以下代码：

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #ddd;
font-family: 'Poppins',
sans-serif;
width: 1200px;
margin: 0 auto;
}
a {
text-decoration: none;
}
img {
width: 100%;
}
nav {
display: flex;
justify-content: space-between;
height: 200px;
align-items: center;
}
nav .logo-img {
width: 100px;
}
nav .nav-links a {
padding: 0 20px;
font-size: 18px;
}
@media (max-width:700px) {
body {
width: 100%;
padding: 0 20px;
}
nav .nav-links a {
padding: 0 18px;
}
}
.footer {
width: 100%;
text-align: center;
margin: 100px 0 20px;
}

然后，你就可以将 CSS 文件导入布局文件，这样它就会成为全局文件，适用于所有文件：

<script>>
import Navbar from '$lib/Navbar.svelte';
import Footer from '$lib/Footer.svelte';
import '../styles/global.css';
</script>

使用 SvelteKit 加载数据

使用 SvelteKit 时，您经常需要将数据加载到布局、页面和组件中。这些数据可能来自外部 API、数据库或本地服务器。为了管理这些数据，您可以为页面使用 +page.js 文件，为布局使用 +layout.js 文件。

在 SvelteKit 项目中，+page.svelte 文件可以有一个导出加载函数的同级 +page.js。该函数的返回值将通过 data 道具提供给页面。让我们举例说明：假设您想创建一个路由，用于从 获取。

要从 API 中加载数据，请在 posts 文件夹中创建一个 +page.js 文件。该文件导出了一个加载函数。

export const load = async () => {
const title = "Hello World";
return {
title,
};
};

load 函数将返回一个对象，该对象作为道具提供给 +page.svelte 文件。然后就可以使用 data 道具访问 title 值：

<script>>
export let data;
const title = data.title;
</script>
<div class="2345HAOacc359d2099a1fcd blog_cont">
<h2>{title}</h2>
</div>

现在，让我们继续与 *** ON 占位符职位 API 进行交互。为此，您可以使用 ，但 SvelteKit 提供了自己的 fetch  *** ，您可以在渲染页面之前使用该 *** 从 API 端点获取数据：

export const load = async (loadEvent) => {
const { fetch } = loadEvent;
const response = await fetch(
'https://jsonplaceholder.typicode.com/posts?_limit=10'
);
const posts = await response.json();
return {
posts,
};
};

在上面的代码中，我们从 loadEvent 中提取了 fetch *** ，并提出了 API 请求。然后将响应作为道具发送到 “帖子” 页面，循环显示所有帖子：

<script>
export let data;
const posts = data.posts;
</script>
<div class="2345HAO59d2099a1fcdfb75 blog_cont">
<h2>Posts</h2>
<div class="2345HAO099a1fcdfb75c816 blog_grid">
{#each posts as post}
<a href={`/posts/${post.id}`} class="2345HAO1fcdfb75c8169fb6 blog_card">
<h3>{post.title}</h3>
<p>
{post.body}
</p>
</a>
{/each}
</div>
</div>
<style>
.blog_cont h2 {
font-size: 40px;
margin-bottom: 20px;
}
.blog_grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}
@media (max-width: 700px) {
.blog_grid {
grid-template-columns: 1fr;
}
}
.blog_card {
background-color: #bfbfbf;
padding: 20px;
border-radius: 5px;
color: #000;
transition: all 0.5s ease-in-out;
}
.blog_card:hover {
background-color: #5333ed;
color: #fff;
}
.blog_card h3 {
margin-bottom: 15px;
}
.blog_card p {
margin-bottom: 15px;
}
</style>

这就是当前文件树的样子：

|-- /src
|-- /lib
|-- Footer.svelte
|-- Navbar.svelte
|-- /routes
|-- /about
|-- +page.svelte
|-- /posts
|-- +page.js
|-- +page.svelte
|-- +page.svelte
|-- +layout.svelte
|-- /styles
|-- global.css

使用 SvelteKit 进行动态路由选择

现在，您的帖子页面上显示了 10 篇帖子；如果您想为每篇帖子创建一个单独的页面，更好的办法是创建一个动态路由。

为此，您需要从路由中接收 slug 值，并将其用作查询帖子的参数。在 SvelteKit 中，您可以通过创建一个带有参数名称的方括号文件夹来实现这一点。以下是设置单个帖子页面的 *** ：

1. 在 posts 文件夹中创建 [postid] 文件夹。[postid] 代表动态参数，可容纳帖子 ID 或 slugs 等值。
2. 在 [postid] 文件夹中创建两个文件：
   • +page.svelte: 该文件将定义单个帖子页面的布局和结构。
   • +page.js: 该 JavaScript 文件将处理数据获取和单个帖子的特定逻辑。

在 +page.js 文件中，从路由中获取 postid 参数，并用它来查询特定的帖子：

export const load = async (loadEvent) => {
const { fetch, params } = loadEvent;
const { postid } = params;
const response = await fetch(
`https://jsonplaceholder.typicode.com/posts/${postid}`
);
const post = await response.json();
return {
post,
};
};

然后，您就可以在 +page.svelte 文件中作为道具访问这些 data ：

<script>>
export let data;
const post = data.post;
</script>
<div>
<div class="2345HAOc7d7db35356df341 blog_content">
<h3>{post.title}</h3>
<p>{post.body}</p>
</div>
</div>
<style>>
.blog_content h3 {
font-size: 40px;
margin-bottom: 20px;
text-align: center;
}
</style>

你可以的完整源代码。您还可以，了解更多信息。

部署 SvelteKit 静态网站

在开始推送 SvelteKit 网站之前，根据部署目标进行定制非常重要。在本项目中，我们将重点使用 Kinsta 的静态网站托管服务，这需要将 SvelteKit 配置为静态网站生成器（SSG）。

下面介绍如何将网站预渲染为静态文件集：

1. 运行以下命令安装 ：

npm i -D @sveltejs/adapter-static

1. 接下来，调整 svelte.config.js 文件，将 adapter-auto 替换为 404.html ：

import adapter from '@sveltejs/adapter-static';
const config = {
kit: {
adapter: adapter({ fallback: '404.html' }),
},
};
export default config;

现在，将代码推送到首选的 Git 提供商。接下来，按照以下步骤将静态网站部署到 Kinsta：

1. 登录或创建账户，查看 面板。
2. 通过 Git 提供商授权 Kinsta。
3. 单击左侧边栏上的 “Static Sites“，然后单击 “Add site“。
4. 选择要部署的版本库和分支。
5. 为网站指定一个唯一的名称。
6. 按以下格式添加构建设置：
   • Build command（构建命令）: npm run build
   • Node version（节点版本）: 18.16.0
   • Publish directory（发布目录）: build

1. 最后，点击 Create site。

就是这样！现在，您只需几秒钟就能拥有一个已部署的网站。系统会提供一个链接，用于访问已部署的网站版本。之后，您可以根据需要添加自定义域名和 。

作为静态网站托管的替代方案，您可以选择使用 Kinsta 的应用程序托管来部署您的静态网站，它提供了更大的托管灵活性、更广泛的优势以及更强大的功能。例如，可扩展性、使用 进行定制部署以及包含实时和历史数据的全面分析。

小结

本指南介绍了使用 SvelteKit 创建静态网站的过程。从设置开发环境到部署，您现在已经掌握了轻松创建高性能静态网站的知识。

使用 SvelteKit 构建静态网站是性能和简便性的完美结合，可确保您的网站项目在互联网上大放异彩。

现在，是时候将所学知识付诸行动，开始使用 SvelteKit 构建自己的静态网站了。您过去使用过 SvelteKit 吗？欢迎在下面的评论区分享您的项目和经验。