手把手教你在 Sevalla 上部署 Next.js 博客：从搭建到上线全流程
<p>很多开发者会纠结：“现在博客平台这么多，为啥还要自己搭博客？”</p><p>答案很简单：用 Next.js 搭的博客，是真正属于你的 “数字资产”。</p>
<h2 id="为什么选-nextjs为什么是-sevalla">为什么选 Next.js？为什么是 Sevalla？</h2>
<p>先聊聊这两个核心工具的优势，帮你搞懂 “为什么这么组合”。</p>
<h3 id="nextjs不止是博客更是你的品牌载体">Next.js：不止是博客，更是你的品牌载体</h3>
<p>Next.js 是基于 React 的开发框架，相比纯 React，它多了很多 “开箱即用” 的功能：服务端渲染（SSR）、静态站点生成（SSG）、路由优化…… 这些特性让博客加载更快、SEO 更友好。</p>
<p><img src="https://oo4ovc1ib4.feishu.cn/space/api/box/stream/download/asynccode/?code=MjA4NmU3ZGIyYzMzNjk2YTZkNjYzZDZjNjRhNTVlYzFfbHNLOXltQUFGalhZZmxFZWNOdmxUTnNONU5XampGak1fVG9rZW46RVNhZ2JwMEVXb3FTZmV4WExmV2NQMG52bnpnXzE3NTIxOTQ5OTc6MTc1MjE5ODU5N19WNA" alt="img" loading="lazy"></p>
<p>但更重要的是自主权：</p>
<ul>
<li>内容完全由你掌控，不用受制于平台规则（比如 Medium 的排版限制、Substack 的订阅抽成）；</li>
<li>可以自由设计品牌风格，从配色到交互，和你的个人 IP 深度绑定；</li>
<li>扩展性极强，未来想加评论系统、数据统计、付费专栏，都能自己开发实现。</li>
</ul>
<p>对独立开发者来说，Next.js 不只是个博客工具，更是搭建个人技术品牌的 “地基”。</p>
<h3 id="sevalla简单到-开箱即用-的部署平台">Sevalla：简单到 “开箱即用” 的部署平台</h3>
<p>Sevalla 是 Kinsta（知名 WordPress 托管平台）团队推出的新平台，主打 “平台即服务（PaaS）”。它的特点是把复杂的部署流程 “做减法”：</p>
<ul>
<li>不用折腾服务器配置、环境变量这些琐事，控制台干净到 “需要的功能都在，没用的一个没有”；</li>
<li>集成了应用托管、数据库、对象存储等基础服务，不像 Heroku 那样需要一堆第三方插件才能跑起来；</li>
<li>对小项目很友好：静态站点最多能免费部署 100 个，流量不大的话基本零成本。</li>
</ul>
<p><img src="https://oo4ovc1ib4.feishu.cn/space/api/box/stream/download/asynccode/?code=NjEyZWM5MWY4Mjc5YmUwMTI4N2FiZWMwNmU1OThjNTVfVXBlN3piVUlUZmZ0OHhHdWNOME80bDFLdXhYbm92bVJfVG9rZW46UUlKTWJ1UGFvb1UyV294T1dLdmNnbmVKblpjXzE3NTIxOTQ5OTc6MTc1MjE5ODU5N19WNA" alt="img" loading="lazy"></p>
<p>如果你嫌传统云平台（比如 AWS、Azure）太复杂，又想避开某些平台的 “隐性收费”，Sevalla 会是个不错的选择。</p>
<h2 id="实战3-步搞定-nextjs-博客部署">实战：3 步搞定 Next.js 博客部署</h2>
<p>下面从 “本地搭建” 到 “上线访问”，一步步带你操作。</p>
<h3 id="第一步本地搭建-nextjs-博客5-分钟搞定">第一步：本地搭建 Next.js 博客（5 分钟搞定）</h3>
<p>不用从零写代码，直接用现成模板快速启动：</p>
<ol>
<li>复刻模板仓库 打开Next.js 博客模板（或文中提到的类似模板），点击 “Fork” 复刻到自己的 GitHub 账号（国内用户也可用 Gitee 同步），仓库名可以自定义（比如 “nextjs-blog”）。</li>
</ol>
<p><img src="https://oo4ovc1ib4.feishu.cn/space/api/box/stream/download/asynccode/?code=ODUxNGM3ZGJmY2I2MGQ3MWNlYWU1ZTlkZDdhYzkxYTZfZVJtajVDOVdLWWNJVzBsYmFZVUttUmdvUFBnT0N4YXRfVG9rZW46VzF2bmJmZGVubzQ3aVB4TE0wdWNVdzIxblBnXzE3NTIxOTQ5OTc6MTc1MjE5ODU5N19WNA" alt="img" loading="lazy"></p>
<ol>
<li>克隆到本地并运行 打开终端，克隆仓库到本地：</li>
</ol>
<pre><code class="language-Bash">git clone https://github.com/你的用户名/nextjs-blog.git
cd nextjs-blog
</code></pre>
<p>安装依赖并启动本地服务：</p>
<pre><code class="language-Bash">npm install# 或 yarn install
npm run dev# 启动开发服务器
</code></pre>
<p>打开<code>localhost:3000</code>，就能看到博客的默认页面了。</p>
<p><img src="https://oo4ovc1ib4.feishu.cn/space/api/box/stream/download/asynccode/?code=MDAxNTJhOTZlMzZjMmI2OTZhMTJhZWZhZjAxNGY4NjRfVnpyZDNrQXVsVlNRS0t5WTR6bU4wS2hSUmZUSUt5aWhfVG9rZW46UWhsWGJtQjVEb0tleXJ4N3R0cGNjdUMxbktpXzE3NTIxOTQ5OTc6MTc1MjE5ODU5N19WNA" alt="img" loading="lazy"></p>
<ol>
<li>写第一篇文章 博客内容存放在<code>content/blog</code>目录下，新建一个<code>.mdx</code>文件（比如<code>first-post.mdx</code>），按以下格式填写：</li>
</ol>
<pre><code class="language-Markdown">---
title: "My New Post"
date: 2025-07-10
---
Welcome to my first blog post using Next.js and MDX!
</code></pre>
<p><img src="https://oo4ovc1ib4.feishu.cn/space/api/box/stream/download/asynccode/?code=YmU4MWI0YmM3NjZhOWY2MTUxOWVhNDZhOWNhZGMwZDlfd05kNWdXVklQdEVhZkRxTGdqTVFxS1NtVENiZVZOeTdfVG9rZW46SWlRamJ3TWpCb040YlJ4WUhxTGNURTNFblZTXzE3NTIxOTQ5OTc6MTc1MjE5ODU5N19WNA" alt="img" loading="lazy"></p>
<p>保存后刷新页面，新文章会自动显示。最后提交代码到 GitHub：</p>
<pre><code class="language-Bash">git add .
git commit -m "添加第一篇文章"
git push origin main
</code></pre>
<h3 id="第二步部署到-sevalla自动上线一劳永逸">第二步：部署到 Sevalla（自动上线，一劳永逸）</h3>
<p>Sevalla 和 GitHub 的集成很顺畅，全程可视化操作：</p>
<ol>
<li>注册并登录 Sevalla 用 GitHub 账号登录（避免重复认证），进入控制台后点击 “创建静态站点”（Static site）。</li>
<li>关联 GitHub 仓库 在 “选择仓库” 列表中找到刚才的<code>nextjs--blog</code>，勾选 “自动部署”（Automatic deployment on commit）—— 这样以后每次 push 代码，Sevalla 会自动更新博客内容，不用手动操作。</li>
</ol>
<p><img src="https://oo4ovc1ib4.feishu.cn/space/api/box/stream/download/asynccode/?code=Zjc3YzM0ZDdlOWRhZDRhOGQxNThjNTYxMDA2OTMzZmVfV3c0VEs0d3poclp4TkJxd3QwbUhRdEVSa0o5bUc1OEZfVG9rZW46Q1pYY2JjSDkwbzc0eTN4VGpKWWNhMkVmbkVoXzE3NTIxOTQ5OTc6MTc1MjE5ODU5N19WNA" alt="img" loading="lazy"></p>
<ol>
<li>配置部署信息</li>
</ol>
<ul>
<li>分支选<code>main</code>（默认分支）；</li>
<li>显示名称填 “My New Blog”（方便识别）；</li>
<li>构建设置保持默认（Sevalla 会自动识别 Next.js 的构建命令）。</li>
</ul>
<p>点击 “创建站点”，等待 1-2 分钟，部署完成后会出现 “访问站点” 按钮，点击就能看到线上版本的博客了（默认域名是<code>xxx.sevalla.page</code>）。</p>
<p><img src="https://oo4ovc1ib4.feishu.cn/space/api/box/stream/download/asynccode/?code=OWVjNTM3Mzk3NDZiMDE5ZTYzMzNhNGNkMTNlNDNkNGJfeE1wMVRoaTUyWUZVb0tCbFpTamRkYk9hVEs2ZkZrZVRfVG9rZW46TnRScWJ3OG95b0xyd1N4a3YzTmNZM0NwbnFlXzE3NTIxOTQ5OTc6MTc1MjE5ODU5N19WNA" alt="img" loading="lazy"></p>
<h3 id="第三步绑定自定义域名让博客更-正式">第三步：绑定自定义域名（让博客更 “正式”）</h3>
<p>想让博客有个专属域名（比如<code>blog.你的名字.com</code>）？按这几步操作：</p>
<ol>
<li>在 Sevalla 添加域名 进入站点的 “Domains” 标签，点击 “添加自定义域名”，输入你的域名（比如<code>blog.example.com</code>）</li>
</ol>
<p><img src="https://oo4ovc1ib4.feishu.cn/space/api/box/stream/download/asynccode/?code=Njk3ZWQ5YzlkMjU4YzllM2U5ZmI2ODY3MThjNjY5NDFfcGNSUWZUUnVSZ1BuYW1XWUc1NEV3SlVuTUxjVUZUTmNfVG9rZW46SUtxUWJ0UFZwb0FDWnp4NGg2cmNmRHNVbkViXzE3NTIxOTQ5OTc6MTc1MjE5ODU5N19WNA" alt="img" loading="lazy"></p>
<ol>
<li>配置 DNS 解析 Sevalla 会显示需要添加的 DNS 记录（一般是 TXT 记录用于验证，CNAME 记录指向 Sevalla 服务器）。登录你的域名服务商（比如阿里云、腾讯云），在 DNS 解析面板添加对应的记录</li>
</ol>
<p><img src="https://oo4ovc1ib4.feishu.cn/space/api/box/stream/download/asynccode/?code=YzFjNTRjMjE4NWY2NDBkODgxZjg5YTMzZTdmYWNkY2ZfbXl5R0ZGckdoQ2h5WHZEWVM5UE5COUtxWlowOW9rampfVG9rZW46VkhwWmJmcllzb0x2NFl4ZVd3T2M3MWxhbndmXzE3NTIxOTQ5OTc6MTc1MjE5ODU5N19WNA" alt="img" loading="lazy"></p>
<ol>
<li>验证并生效 等待 10-30 分钟（DNS 生效需要时间），回到 Sevalla 刷新页面，显示 “配置成功” 就代表域名绑定完成。此时访问<code>blog.example.com</code>，就能看到你的博客了</li>
</ol>
<h2 id="为什么推荐这样的组合">为什么推荐这样的组合？</h2>
<ul>
<li>对内容创作者：Next.js 让博客加载快、SEO 好，Sevalla 自动部署省时间，你可以专注写内容；</li>
<li>对开发者：全程用熟悉的 GitHub+npm 流程，不用学复杂的服务器知识，适合新手；</li>
<li>对成本敏感的人：Sevalla 免费额度足够支撑中小型博客，流量不大的话几乎零成本。</li>
</ul>
<p>其实部署博客的核心不是 “用什么工具”，而是 “把内容掌握在自己手里”。用 Next.js+Sevalla 这套组合，既能享受技术带来的便利，又能真正拥有自己的 “数字领地”—— 这可能就是独立开发者最看重的自由吧。</p>
</div>
<div id="MySignature" role="contentinfo">
<hr>
<br>
<p style="font-size: 16px; font-family: 微软雅黑, 黑体, Arial; color: #000">本文是由葡萄城技术开发团队发布，转载请注明出处：葡萄城官网</p>
<!--p style="font-size: 16px; font-family: 微软雅黑, 黑体, Arial; color: #000">了解企业级低代码开发平台，请前往活字格
</p><p style="font-size: 16px; font-family: 微软雅黑, 黑体, Arial; color: #000">了解可嵌入您系统的在线 Excel，请前往SpreadJS纯前端表格控件</p>
<p style="font-size: 16px; font-family: 微软雅黑, 黑体, Arial; color: #000">了解嵌入式的商业智能和报表软件，请前往Wyn Enterprise
</p-->
<br><br><br>
来源：https://www.cnblogs.com/powertoolsteam/p/18978207
頁:
[1]