如何使用Sevalla部署Next.js博客

在本教程中，我将教你如何使用Next.js和Sevalla构建并部署自己的Next.js博客。

首先，让我回答一个可能的问题：“当有数百个博客平台可用时，为什么要自己托管博客？”
一个答案：Next.js。

什么是Next.js？

Next.js是一个基于React构建的Web开发框架。虽然React是用于构建用户界面的库，但Next.js添加了额外功能，使构建网站和Web应用程序更简单、更快速。

Next.js给你完全的控制权。你拥有自己的内容、设计和SEO策略。与Medium或Substack不同，你不受平台规则或品牌限制。你可以优化博客的每个部分，从加载速度到在Google搜索中的显示方式。

Next.js不仅仅是构建博客的工具。它是构建整个品牌的平台。这就是开发者和独立开发者喜欢它的原因。

什么是Sevalla？

Sevalla是一个平台即服务提供商，我最近爱上了它。由流行WordPress托管平台Kinsta背后的团队构建，Sevalla将强大功能与流畅的开发人员体验相结合。他们为你的项目提供应用程序托管、数据库、对象存储和静态站点托管。

与Heroku等平台不同（它们通过额外集成提供几乎所有功能），Sevalla为你提供构建和部署应用程序所需的一切。

想象一下，如果有人只从AWS或Azure等云平台中提取基本功能，并将它们放入一个易于使用的仪表板中。这正是Sevalla管理面板所具有的。一个干净、简单的界面，包含你需要的一切，没有你不需要的东西。

简而言之，Sevalla处理部署和扩展应用程序的所有繁重工作，因此你可以完全专注于构建它。

构建和部署Next.js博客

现在让我们构建和部署我们的Next.js博客。我们不必从头开始构建——有许多模板可供我们使用，比如这个。

我们将做三件事：

克隆存储库并在本地机器上设置博客
将站点部署到Sevalla
添加自定义域名

构建博客

首先，fork Next.js博客存储库。

fork后，将其克隆到本地机器：

1

git clone <repository url>

克隆存储库后，进入目录并运行npm install。确保你的机器上安装了最新的Node.js和Next.js。

现在让我们在机器上运行博客。命令是npm run dev。服务器运行后，转到localhost:3000查看站点。

你应该看到上面的页面。现在让我们添加自己的博客文章。转到content/blog目录。内容目录中的每个页面都是你的博客文章，你可以使用Markdown来设置样式。使用.mdx扩展名保存文件。

添加以下文本（第一部分是博客的元数据，用于理解标题和发布日期）：

1
2
3
4
5
6


---
title: "My New Post"
date: 2025-07-07
---

Welcome to my first blog post using Next.js and MDX!

重新加载主页，你现在应该看到两篇文章——默认文章和你的新文章。

因此，每次要发布新文章时，你都可以使用Markdown创建一个新页面。就是这么简单。

提交这个新文件并将其推送到你的存储库：

1
2
3


git add .
git commit -m "new post"
git push origin main

部署博客

现在在Sevalla上创建一个帐户（使用GitHub登录，这样就不必重新认证）。

登录Sevalla后，你会看到"Static site"选项。单击它以创建静态站点。

与其他托管提供商一样，并非所有Sevalla产品都是免费的，但它提供了慷慨的免费额度。除非有相当数量的用户访问你的博客，否则博客/小项目不会产生任何费用。但对于静态站点，你可以完全免费托管多达100个站点。

从列表中选择存储库。选中"Automatic deploy on commit"选项。这样每次推送代码时，Sevalla都会自动将新文章部署到服务器。

在"build settings"页面中，保留默认值。单击"Create site"。几分钟内，应用程序将从GitHub拉取，部署到服务器，你应该看到"visit site"按钮。

如果你访问该站点，应该会看到以下页面：

耶！你的博客上线了。你还可以在"deployments"选项卡下查看详细的构建日志，看看部署应用程序是否有任何问题。

添加自定义域名

太好了。最后一步，让我们为博客添加自定义域名。

转到"domains"选项卡，在自定义域名下单击"add domain"。我将使用我的私有域名manishshivanandhan.com的子域名next，但对于根域名的说明也是一样的。

单击"add domain"后，Sevalla将提供添加TXT记录进行验证和CNAME/A记录将新站点指向你的域名的说明。

在你的域名提供商处完成这些操作后，几分钟后回来检查。

万岁！你已经创建了自己的Next.js博客。这是我为这个项目构建的示例站点——http://next.manishshivanandhan.com

结论

就这样！你自己的Next.js博客现在在Sevalla上上线了。

在很短的时间内，你从克隆模板到发布第一篇文章，并使用自定义域名将其部署到全世界。使用Next.js，你可以完全控制内容和品牌，而使用Sevalla，部署变得轻松顺畅。

请记住，每次要发布新文章时，只需创建一个简单的markdown文件并推送代码。Sevalla会处理其余的事情，因此你可以专注于真正重要的事情：编写精彩的内容和建立个人品牌。

希望你喜欢这篇文章！我很快就会回来提供更多关于使用Next.js构建的教程。欢迎在LinkedIn上与我联系以保持联系。

使用Next.js和Sevalla部署个人博客的完整指南

本文详细介绍了如何利用Next.js框架和Sevalla平台快速构建并部署个人博客，包括项目克隆、本地运行、自动化部署及自定义域名配置的全流程操作指南。