如何使用 SvelteKit 创建静态网站

如何使用 SvelteKit 创建静态网站

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

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

SvelteKit 静态网站演示

SvelteKit 静态网站演示

什么是 SvelteKit?

SvelteKit 是一个强大的网络框架,专为制作用户界面(包括静态网站)而设计。它以其性能、简洁性和通过声明式方法创建组件的能力而闻名。

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

开始使用 SvelteKit

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

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

  1. 为新项目搭建脚手架:
npm create svelte@latest my-app

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

  1. 导航至项目目录并安装其依赖项:
cd my-app
npm install
  1. 执行 npm run devlocalhost:5173 上启动本地开发服务器。

SvelteKit 骨架网站

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 中的程序化导航

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 中,您可以通过创建一个带有参数名称的方括号文件夹来实现这一点。以下是设置单个帖子页面的方法:

  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="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)。

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

  1. 运行以下命令安装 @sveltejs/adapter-static
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. 登录或创建账户,查看 MyKinsta 面板。
  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

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

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

小结

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

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

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

评论留言