如何使用 SvelteKit 创建静态网站

静态网站因其速度快、安全和简单而越来越受欢迎。在构建静态网站方面，有多种工具和框架可供选择，但 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 使用标准的 <a> 元素处理页面之间的导航，从而使导航过程变得直观。无需像 React 中要求的那样导入 <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="logo-img" />
</a>
<div class="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="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 导入别名方便地将它们导入到任何组件中：

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

要使用独立组件，举个例子，假设你只需要一个组件用于关于页面，那么在 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 的文件，然后用所需的标记、样式和行为对其进行自定义。最重要的要求是包含一个 <slot> 元素来容纳页面内容。

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

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

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

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

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

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 道具提供给页面。让我们举例说明：假设您想创建一个路由，用于从 JSON Placeholder API 获取帖子列表。

要从 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="blog_cont">
<h2>{title}</h2>
</div>

现在，让我们继续与 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 请求。然后将响应作为道具发送到 “帖子” 页面，循环显示所有帖子：

<script>
export let data;
const posts = data.posts;
</script>
<div class="blog_cont">
<h2>Posts</h2>
<div class="blog_grid">
{#each posts as post}
<a href={`/posts/${post.id}`} class="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 中，您可以通过创建一个带有参数名称的方括号文件夹来实现这一点。以下是设置单个帖子页面的方法：

在 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 ：

<script>>
export let data;
const post = data.post;
</script>
<div>
<div class="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>

你可以在 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

最后，点击 Create site。

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

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

小结

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

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

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

SvelteKit 静态网站

如何使用 SvelteKit 创建静态网站

什么是 SvelteKit？

开始使用 SvelteKit

了解 SvelteKit 文件结构

SvelteKit 中的路由设置

在 SvelteKit 中使用组件

在 SveletKit 中使用布局

SvelteKit 中的程序化导航

SvelteKit 中的样式

使用 SvelteKit 加载数据

使用 SvelteKit 进行动态路由选择

部署 SvelteKit 静态网站

小结

评论留言

取消回复

文章目录

如何使用 SvelteKit 创建静态网站

什么是 SvelteKit？

开始使用 SvelteKit

了解 SvelteKit 文件结构

SvelteKit 中的路由设置

在 SvelteKit 中使用组件

在 SveletKit 中使用布局

SvelteKit 中的程序化导航

SvelteKit 中的样式

使用 SvelteKit 加载数据

使用 SvelteKit 进行动态路由选择

部署 SvelteKit 静态网站

小结

相关的

评论留言

取消回复

文章目录