静态网站因其速度快、安全和简单而越来越受欢迎。在构建静态网站方面，有多种工具和框架可供选择，但 SvelteKit 是其中之一。
本指南将带您了解使用 SvelteKit 创建静态网站的整个过程，包括从设置到使用托管服务部署的整个过程。
SvelteKit 静态网站演示
什么是 SvelteKit？
SvelteKit 是一个强大的网络框架，专为制作用户界面（包括静态网站）而设计。它以其性能、简洁性和通过声明式方法创建组件的能力而闻名。
SvelteKit 通过添加路由、服务器端渲染等功能扩展了 Svelte 框架的功能。
开始使用 SvelteKit
要学习本指南，我们假定你已具备以下条件：
- 对 HTML、CSS 和 JavaScript 有基本了解。
- Svelte 的基础知识。
- 计算机上安装了 Node.js 和 npm。
要构建新的 SvelteKit 应用程序，请按照以下步骤操作。
- 为新项目搭建脚手架：
npm create svelte@latest my-app
该命令在 my-app 目录中构建一个新项目，要求配置一些基本工具，如 TypeScript。确保选择骨架项目选项，并将 my-app 更改为项目的首选名称。
- 导航至项目目录并安装其依赖项：
cd my-app npm install
- 执行
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="home_hero">
<h1>Enjoy Static Site Hosting With Kinsta StSH.</h1>
<p>Fast, Secure, Reliable Hosting Solution.</p>
<a href="https://kinsta.com/docs/static-site-hosting">
<div class="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="about_cont">
<h2>About</h2>
<div class="about_info">
<div class="about_text">
<p>
Kinsta allows you to{' '}
<a> href="https://kinsta.com/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://kinsta.com/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 analytics encompassing real-time
and historical data.
</p>
</div>
<iframe> width="560" height="315" src="https://www.youtube.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 使用标准的 元素处理页面之间的导航，从而使导航过程变得直观。无需像 React 中要求的那样导入 等额外组件。在接下来的章节中，我们将创建一个导航组件，并将其添加到每个页面中。
就当前项目而言，路由结构如下：
|-- /src |-- /routes |-- /about |-- +page.svelte |-- +page.svelte
在 SvelteKit 中使用组件
为了使代码更加模块化，可以创建组件并将其导入页面。例如，您可以在 routes 文件夹中创建一个 Navbar.svelte 组件：
然后，像这样将其导入 +page.svelte 主页：
<!-- src/routes/+page.svelte --> <script>> import Navbar from './Navbar.svelte' </script> <Navbar /> <div class="home_hero"> <h1>Enjoy Static Site Hosting With Kinsta.</h1> <p>Fast, Secure, Reliable Hosting Solution.</p> <a href="https://kinsta.com/static-site-hosting"> <div> class="btn">Read more</div> </a> </div> <style> /* CSS styles */ </style>
对于 Navbar 和 Footer 等在多个文件中使用的全局组件，应在 src/lib 文件夹中创建，以避免过长的导入路径。在 lib 文件夹中创建组件或模块时，可以使用 $lib 导入别名方便地将它们导入到任何组件中：
要使用独立组件，举个例子，假设你只需要一个组件用于关于页面，那么在 routes/about 路由中创建它，然后将它导入页面。
在这个项目中，你还可以在 lib 文件夹中创建一个 Footer 组件，并添加以下代码：
<div class="footer">
<p>
Hosted with ❤️ by Kinsta's{' '}
<a> href="https://kinsta.com/static-site-hosting">Static Site Hosting</a>
.
</p>
</div>
然后，将其导入所有页面。
在 SveletKit 中使用布局
为避免将组件导入多个页面，SvelteKit 允许您使用 +layout.svelte 文件为页面定义布局。
创建适用于每个页面的布局非常简单。创建一个名为 src/routes/+layout.svelte 的文件，然后用所需的标记、样式和行为对其进行自定义。最重要的要求是包含一个 元素来容纳页面内容。
例如，可以将 Navbar 和 Footer 组件集成到该布局中：
元素允许将每个页面的内容插入布局中。
还可以为特定页面嵌套布局。例如，如果 /dashboard 页面嵌套了 /profile 和 /settings 等页面，就可以创建一个特殊的布局：
|-- /dashboard |-- /profile |-- +page.svelte |-- /settings |-- +page.svelte |-- +layout.svelte
SvelteKit 中的程序化导航
SvelteKit 为编程导航提供了一个 goto 函数。例如，在登录操作后导航到 /dashboard 页面：
SvelteKit 中的样式
SvelteKit 支持传统的 CSS 来设计页面样式。您可以使用 标签在 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 文件导入布局文件，这样它就会成为全局文件，适用于所有文件：
使用 SvelteKit 加载数据
使用 SvelteKit 时，您经常需要将数据加载到布局、页面和组件中。这些数据可能来自外部 API、数据库或本地服务器。为了管理这些数据，您可以为页面使用 +page.js 文件，为布局使用 +layout.js 文件。
在 SvelteKit 项目中，+page.svelte 文件可以有一个导出加载函数的同级 +page.js。该函数的返回值将通过 data 道具提供给页面。让我们举例说明：假设您想创建一个路由，用于从 JSON Placeholder API 获取帖子列表。
要从 API 中加载数据，请在 posts 文件夹中创建一个 +page.js 文件。该文件导出了一个加载函数。
export const load = async () => {
const title = "Hello World";
return {
title,
};
};
load 函数将返回一个对象，该对象作为道具提供给 +page.svelte 文件。然后就可以使用 data 道具访问 title 值：
{title}
现在，让我们继续与 JSON 占位符职位 API 进行交互。为此，您可以使用 JavaScript Fetch 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 请求。然后将响应作为道具发送到 “帖子” 页面，循环显示所有帖子：
这就是当前文件树的样子：
|-- /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 中，您可以通过创建一个带有参数名称的方括号文件夹来实现这一点。以下是设置单个帖子页面的方法：
- 在 posts 文件夹中创建 [postid] 文件夹。[postid] 代表动态参数，可容纳帖子 ID 或 slugs 等值。
- 在 [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 ：
{post.title}
{post.body}
你可以在 GitHub 上查看 SvelteKit 项目的完整源代码。您还可以查看 SvelteKit 官方文档，了解更多信息。
部署 SvelteKit 静态网站
在开始推送 SvelteKit 网站之前，根据部署目标进行定制非常重要。在本项目中，我们将重点使用 Kinsta 的静态网站托管服务，这需要将 SvelteKit 配置为静态网站生成器（SSG）。
下面介绍如何将网站预渲染为静态文件集：
- 运行以下命令安装 @sveltejs/adapter-static：
npm i -D @sveltejs/adapter-static
- 接下来，调整 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：
- 登录或创建账户，查看 MyKinsta 面板。
- 通过 Git 提供商授权 Kinsta。
- 单击左侧边栏上的 “Static Sites“，然后单击 “Add site“。
- 选择要部署的版本库和分支。
- 为网站指定一个唯一的名称。
- 按以下格式添加构建设置：
- Build command（构建命令）:
npm run build - Node version（节点版本）:
18.16.0 - Publish directory（发布目录）:
build
- Build command（构建命令）:
- 最后，点击 Create site。
就是这样！现在，您只需几秒钟就能拥有一个已部署的网站。系统会提供一个链接，用于访问已部署的网站版本。之后，您可以根据需要添加自定义域名和 SSL 证书。
作为静态网站托管的替代方案，您可以选择使用 Kinsta 的应用程序托管来部署您的静态网站，它提供了更大的托管灵活性、更广泛的优势以及更强大的功能。例如，可扩展性、使用 Dockerfile 进行定制部署以及包含实时和历史数据的全面分析。
小结
本指南介绍了使用 SvelteKit 创建静态网站的过程。从设置开发环境到部署，您现在已经掌握了轻松创建高性能静态网站的知识。
使用 SvelteKit 构建静态网站是性能和简便性的完美结合，可确保您的网站项目在互联网上大放异彩。
现在，是时候将所学知识付诸行动，开始使用 SvelteKit 构建自己的静态网站了。您过去使用过 SvelteKit 吗？欢迎在下面的评论区分享您的项目和经验。
原文地址：https://www.wbolt.com/static-sveltekit.html
