从2026 年 1 月 12 日起,Leancloud将停止开放注册,2027 年 1 月 12 日将正式停止运作,也就是说,Valine(也是cf-blog的评论系统)将无法运行,因此,如果还在使用Leancloud,我劝你赶紧备份并切换到Waline(应为Valine已经停止更新了),更多信息在这里查看。

在部署博客之中,我遇到了很多难题

之后我在网站中找到了这款

感谢云游君创作这个作品。目前已有540个人使用此软件,包括OpenList 文档也使用此软件,有1.1k多Stars和134个Forks,55个贡献者。从这个博客框架找到后,我就有了兴趣来作这篇文章。
额外提醒,这篇文章我也会讲如何部署 Waline。
那么我们正式开始吧!
总览
Valaxy = V + Galaxy 旨在成为下一代静态博客框架,提供更好的热更新与用户加载体验、更强大更便捷的自定义开发可能性。
你可以在 为什么选 Valaxy 中了解更多关于项目的设计初衷。
功能
WORK IN PROGRESS,

- Markdown - 专注你的内容:支持完整的 Markdown 语法与各类扩展格式,毫无疑问还有 SSG
- Vite - 极速的开发体验:享受 Vite 带来的生态与热更新开发体验,即便在编写内容与修改配置之时
- Vue - 自定义任意组件与布局:在 Markdown 中使用 Vue,或是自定义覆盖主题中的任意组件与布局
- UnoCSS - 自由的编写样式:在文章、组件以及任意地方自由地编写任意样式,同时保持最小的体积
- VueUse - 合成式 API 工具集:内置的 VueUse 按需满足你的各类需求,除此之外,还有我们自身的 Blog Composition API
- 内容自持,自由部署:文章以本地文件保存,生成的静态站点可部署到你选择的平台。内容与代码由你管理。
- Actions - 自动化部署:内置 GitHub Actions、Netlify、Vercel 等自动部署配置,一键部署你的站点
- 国际化 - 无缝的多语言支持:Vue i18n + CSS i18n 实现单页面与局部元素的全局多语言支持,国际化无需新页面/新站点
- TypeScript - 类型安全:所有配置与 API 伴随着完备的类型安全与智能提示,这是当然的
- VSCode - 流畅的开发体验:我们正在完善 VSCode 插件,以便你在使用 VSCode 开发、编写文章过程中获得更好的体验
- 主题 - 扩展亦或自定义:通过同名 Vue 组件覆盖主题中的任意组件与布局,或是编写自己的主题
- 插件 - 按需扩展:通过插件添加评论、搜索与相册。结合 Vue、Vite 与 UnoCSS,继续拓展你的想法。
- Electron - 客户端应用:在未来我们还将推出面向非开发者的客户端,让你从开发、部署到发布更加便捷,敬请期待……
新功能:
- 可视化管理:内置 Valaxy DevTools,搜索文章、编辑元信息、调整配置,在直观的面板里管理博客。
- AI 协作友好:用提示词与主题 Skill 将设计想法实现为主题。按需开启 MCP 查询和检查文章,或生成 AI 可读内容。
- 无障碍细节:Press 主题支持键盘导航与清晰的焦点提示;首页动画可暂停,并尊重减少动态效果偏好。
Vue + Vite:熟悉的工具,更多的可能。
立即测试?
目前处在某种原因报错,希望官方修复。
如何部署
1. 安装
1.1. 创建模板
兼容警告
Valaxy 要求:
信息
Cloudflare Pages 默认使用 Node.js 22.16.0,因此没有兼容错误问题。但是 pnpm 使用的是 10.11.1,因此会出现错误(警告,不影响构建)。
默认,Valaxy 需要一些配置文件才能运行。因此,你需要它的创建模板程序来创建模板,并且自动配置。
首先,请确保你的系统有node.js和pnpm(若没有)并且确保它大于或等于以下版本。pnpm或不想安装可以使用npm
检查本地版本:
node --version
# 应该显示 v22.12.0 或更高
pnpm --version
# 应该显示 10.26.0 或更高从 v1.2.0 后,Valaxy 将使用 pnpm 当做默认软件包管理器,npm 仅安装与构件,不建议使用它来创建模板。其他软件包可能将不会再兼容。
你也可以使用它的最新版本,但注意配置与安装的样式。
然后再终端运行此命令:
pnpm create valaxy@latest运行后它会问你一些问题:
选择类型:
首次或其次都会从新下载软件
.../mty52ts6-h3v | +28 +++
.../mty52ts6-h3v | Progress: resolved 28, reused 28, downloaded 0, added 0, done
🌌 Valaxy v1.2.0
? Select a type: › - Use arrow-keys. Return to submit.
❯ Blog - For Most Users 【按下回车】
Theme - For Theme Developers
Addon - For Addon Developers- Blog:博客,给所有用户。默认没有其他需求直接使用此选项,若开发文档也是此选项。
- Theme:主题,给主体开发者。若你想贡献你的主题可以选择此选项。
- Addon:扩展,给扩展开发者。跟上面的一样。
选择后,更改类型需要删除并重新创建。默认选择 Blog(博客)。
选择主题:
✔ Select a type: › Blog - For Most Users
? Select a theme: › - Use arrow-keys. Return to submit.
❯ Yun - A light & clean theme (default) 【按下回车】
Press - A document-oriented theme
Custom - Enter a custom theme name在选择 Blog 类型后,你将看到主题选择提示:
- Yun(默认):轻盈简洁的博客主题
- Press:面向文档的主题
- Custom:输入自定义主题名(如
starter或完整包名valaxy-theme-starter)
你可以在 Valaxy 主题橱窗里使用你想要的主题。
默认选择 Yun。
选择主题后,create-valaxy 会自动配置 valaxy.config.ts 中的 theme 字段和 package.json 中的主题依赖。
注意
默认 create-valaxy 不会自动配置 lockfile,因此建议先本地安装后再部署到云服务器。
默认使用主题 valaxy-theme-yun,当然您也可以安装使用任意其他主题。 官方文档同样是一个 Valaxy 主题 valaxy-theme-press,它的灵感来自 VitePress。
作品名称:
✔ Select a theme: › Yun - A light & clean theme (default)
? Project name: › valaxy-blog 【按下回车】这里写你的作品名称:valaxy-blog,或一个尚不存在的目录名。
注意
作品名称不是你的博客名称。作品名称也是你的文件夹名称,基本上仅支持英文文字、数字和-,不建议在那里输入中文。
你可以自定义此作品名称用来区分或记号。若不知道怎么写,默认即可(直接按下回车)。
提示
你的作品名称也可以设置到你的仓库名称。
是否现在开始:
✔ Project name: … valaxy-blog
📁 /home/user/valaxy-blog
Scaffolding project in valaxy-blog ...
Done.
? Install and start it now? › (Y/n) 【按下 N】No,然后按下文手动安装和启动。如果选择 Yes,请选择 pnpm,并在自动启动后直接进入“写第一篇文章”。
这里默认按下“是”(Y)。官方后来改为“否”(N)了。
手动进入并安装(如果上一个步骤按下了 N):
✔ Install and start it now? … no
start it later by:
cd valaxy-blog
pnpm install
pnpm run dev
✨选择你的软件包管理器(如果上一个步骤按下了 Y):
✔ Install and start it now? … yes
? Choose the agent › - Use arrow-keys. Return to submit.
bun
npm
yarn
❯ pnpm 【按下回车】这里默认(或者建议)选择 pnpm 并按下回车。你可以选择其他软件包管理器(除了 npm 和 pnpm,其他不建议)。
此处就是如何 pnpm 安装软件(这是使用pnpm 11。pnpm v10差不多一样)。
✔ Choose the agent › pnpm
Packages: +775
+++++++++++++++++++++++++++++++++++++++++++++++++++++
Packages are cloned from the content-addressable store to the virtual store.
Content-addressable store is at: /home/user/.local/share/pnpm/store/v11
Virtual store is at: node_modules/.pnpm
Progress: resolved 860, reused 764, downloaded 16, added 775, done
node_modules/.pnpm/vue-demi@0.14.10_vue@3.5.42_typescript@5.9.3_/node_modules/vue-demi: Running postinstall script, done in 587ms
dependencies:
+ valaxy 0.28.11
+ valaxy-theme-yun 0.28.11
devDependencies:
+ typescript 5.9.3
Done in 23.5s using pnpm v11.26.0之后它会自动运行 pnpm dev:
$ valaxy
[10:46:01 AM] ◐ Resolve valaxy config ...
[10:46:01 AM] ✔ Resolve siteConfig from /home/user/valaxy-blog/site.config.ts 100.58ms
[10:46:01 AM] ✔ Resolve userValaxyConfig from /home/user/valaxy-blog/valaxy.config.ts 208.81ms
[10:46:01 AM] ✔ Resolve valaxy.config.ts from theme(yun) 169.38ms
✔ Resolve addons from /home/user/valaxy-blog
✔ [valaxy] server ready.
[8:46:04 AM] ℹ [valaxy] total startup: 298ms
🌌 Valaxy v1.2.0
🪐 theme > yun (v0.28.11)
📁 /home/user/valaxy-blog
Preview > http://localhost:4859/
Network > http://192.168.1.2:4859/
shortcuts > restart | open | qr | edit你可以按下 o 来打开网页,或者打开终端中 Preview 后的地址,默认是 http://localhost:4859/ 。端口被占用时会自动选择其他可用端口,因此以终端输出为准。首页应能看到示例文章 Hello, Valaxy!,点击标题可进入文章页。
1.2. 升级
在你的作品文件夹里运行以下命令:
# 更新软件
pnpm add valaxy@latest
# 更新主题(若不是 Yun 主题请替换)
pnpm add valaxy-theme-yun@latest你可以使用 pnpm 的交互升级命令。
# 交互式更新
pnpm up --latest -i2. 配置
注意主题配置
此配置是按照 valaxy-theme-yun(官方默认)配置的,其他主题可能配置会不一样,请谨慎配置。
以下是此作品的目录:
.
├── .github/ # GitHub Workflow 配置(一般里面有 GitHub Pages 配置)
├── .valaxy/ # Valaxy 文件夹,一般不需要碰这个文件夹
├── components/ # 自定义模块(使用 Vue 语言。需要安装插件)
├── layouts/ # 自定义样式类型
├── locales/ # 语言
├── node_modules/ # 软件
├── pages/ # 页面(这里就是文章等其他页面)
├── public/ # 共享资源(一般这里存放图片、文件、字体等)
├── styles/ # 自定义样式(Postcss 语言)
├── .dockerignore # Docker 忽略文件
├── .editorconfig # 编辑配置文件的文件(我也不知道有什么用)
├── .gitignore # Git 忽略文件
├── Dockerfile # Docker 构建文件
├── README.md # 自述文件
├── netlify.toml # netlify配置文件
├── nginx.conf # Nginx配置文件(一般跟 Docker 一起的)
├── package.json # 软件包文件(里面可以配置软件版本)
├── pnpm-lock.yaml # Lockfile,一般不需要碰这个文件
├── pnpm-workspace.yaml # pnpm 配置文件,原 .npmrc
├── site.config.ts # Valaxy 站点配置文件
├── tsconfig.json # TypeScript 配置文件,一般不要碰
├── valaxy.config.ts # Valaxy 主配置文件
└── vercel.json # Vercel 配置文件提示
你也可以参考 demo 的代码来部署你的博客。demo 文件夹网站。
2.1. 使用
进入刚创建的项目,安装依赖并启动开发服务器:
cd valaxy-blog # 或者你的作品名称
pnpm install
pnpm dev保留生成的 pnpm-workspace.yaml:它包含模板所需的依赖安装配置,包括构建脚本权限。pnpm 11 及以上版本默认会因未审核的依赖脚本而中止安装;模板已配置当前依赖,首次安装无需额外执行 pnpm approve-builds。
2.2. 配置文件
| 文件 | 主配置文件里的配置 | 概述 |
|---|---|---|
valaxy.config.ts | - | 主配置文件(必须文件存在) |
site.config.ts | siteConfig: {}, | 站点配置(默认文件存在,可以在主配置文件存在) |
theme.config.ts | themeConfig: {}, | 主题配置(默认文件不存在,配置在主配置里) |
vite.config.ts | vite: {} | Vite 配置文件(默认未配置,文件不存在) |
每个配置文件都代表每个用途,因此请不要删除或乱改。若配置不恰当会导致构件失败。
2.3. 自定义博客(站点配置)
在一开始,里面的内容都不是你的,对吧。这些内容其实是例子,让你看看博客代码长怎样。而修改它也不是这么麻烦。
首先,我们先配置一下 site.config.ts。
你先写一下你是谁,在配置文件里修改一下信息:
export default defineSiteConfig({
// ... 找到这一行
author: {
name: '张三',
avatar: 'https://example.com/path/profile.png', // 或者在 public 文件夹下的图标。
},
// ...
})这里就是你用户的信息,名字可以自己的或虚拟的。
其次,还得需要配置博客名称(不是作品名称)等。请按照以下方式修改:
export default defineSiteConfig({
url: 'https://yun.valaxy.site/', // 这里要写你的站点链接(RSS需要)
lang: 'zh-CN',
// languages: ['zh-CN'], // 若仅一个语言
timezone: 'Asia/Shanghai',
title: '张三的站点',
// ...
favicon: 'https://example.com/path/favicon.ico', // 或者在 public 文件夹下的图标。
subtitle: 'Blog generated by yun theme',
description: '一个使用 Valaxy 部署的博客',
// ...
})url 是正式部署地址,用于文章链接、站点地图和 RSS;上线前请将 https://example.com/ 替换为你自己的网址。它不会改变开发服务器地址。保存后,检查浏览器标题、侧边栏站点名称和文章作者是否更新。
保留 timezone,或改成你的站点时区(如 UTC)。明确时区可让构建环境和不同时区的访客看到一致的文章时间。valaxy new 生成的时间包含时区偏移;手写日期时可以使用上面的 YYYY-MM-DD,需要精确时间则使用带偏移的格式,例如 2026-10-05T14:30:00+08:00。
valaxy.config.ts 用于主题和框架选项。Yun 模板中的首页大字单独由 themeConfig.banner.title 控制,将它改成你希望显示的文字即可。模板中的社交链接、赞助信息和页脚备案信息也是示例,上线前请修改或关闭。
注意里面的内容,若需要包含",请在"之前写入\,否则会报错。
你也可以配置社交平台账号链接,按照以下配置:
export default defineSiteConfig({
// ...
social: [ // 配置样式为 Json 列表一样
{
name: 'RSS',
link: '/atom.xml',
icon: 'i-ri-rss-line',
color: 'orange',
},
{
name: 'GitHub', // 名称(鼠标放上去显示的文本)
link: 'https://github.com/yourusername', // 地址
icon: 'i-ri-github-line', // 图标,从 https://icones.js.org/ 获取
color: '#6e5494', // 可选。颜色,支持文本(red)或者16进制(#ab54cd)等。
},
],
// ...
})另外:默认博客使用 Remix Icon 的图标,若使用其他图标,请按照它的图标包。
若想配置赞助可以使用以下配置:
export default defineSiteConfig({
sponsor: {
enable: false,
title: '私はとっても可愛いから、お金をください!', // 或者其他内容
methods: [
{
name: '支付宝',
url: 'https://example.com/your/link',
color: '#00A3EE',
icon: 'i-ri-alipay-line',
}
],
},
})默认任何更改都会自动更新到 dev 服务器上面,若没有,请按下 R(restart)键。
2.4. 自定义博客(主配置)
valaxy.config.ts,也就是主配置文件,在这里面,我们也配置一下内容。
第一部分:开头动画,使用以下配置来设置:
export default defineValaxyConfig<UserThemeConfig>({
// ...
themeConfig: {
banner: {
enable: true,
title: '云游君的小站', // 在这里更改你想要的词语
},
// ...
},
// ...
})你仅需要修改 title 就行了,可以纯文本(例如 ''你好世界)或者列表(例如 ['你好', '世界'])。
那个 enable 是是否开启博客主封面。
第二部分:连接。按照以下配置来设置:
export default defineValaxyConfig<UserThemeConfig>({
// ...
themeConfig: {
// ...
pages: [
{
name: '我的小伙伴们', // 连接名称
url: '/links/', // 地址,支持路径(/foo/bar)或地址(https://example.com/foo)
icon: 'i-ri-genderless-line', // 图标,从 https://icones.js.org/ 获取
color: 'dodgerblue', // 可选。颜色,支持文本(red)或者16进制(#ab54cd)等。
}, // 这里可以支持多个
{
name: '喜欢的女孩子',
url: '/girls/',
icon: 'i-ri-women-line',
color: 'hotpink',
},
],
// ...
},
// ...
})图标配置跟上一个社交平台账号链接一样。
第三部分:页脚。
备案号默认没事别乱来。
export default defineValaxyConfig<UserThemeConfig>({
// ...
themeConfig: {
// ...
footer: {
since: 2016, // 从什么时候部署博客的,例如2026(这里写年)
beian: {
enable: false, // 备案,若服务器不需要请禁用,需要时启用并且填写以下信息
icp: '', // 如 '苏ICP备xxxxxxxx号'
police: '', // 公安网备案号
},
},
},
// ...
})建议打开 dev 查看是否配置正确且生效。
2.5. 写第一篇文章
在 pages(也就是页面)文件夹里有个文件夹叫 posts,那里面就是博客文章。
pages 文件夹里面可以有各种各样的页面(Markdown 语法,非 HTML)。文件名为地址路径,支持文件夹(例如
/foo/bar)。
文章默认使用 Markdown 文件(譬如:hello-valaxy.md)。
Markdown 是纯文本,但是带有基本办公软件有的格式化。Markdown 语法
每个文章需要配置,配置如下:
---
title: 我的第一篇文章
date: 2022-04-01
updated: 2022-04-01
categories: Valaxy 笔记
tags:
- 日常
---
## 你好,Valaxy
这是我的第一篇文章。上面是这样的配置:
title:标题,文章标题。date:发布日期。updated:最后更新日期。categories:分类。tags:标签(下面每行一个)。top:置顶(后面数字指位置,默认可以不写)。
下面就是 Markdown 语言正文了。
另外,创建文章也可以使用 pnpm exec valaxy new [文章名字] 来直接创建文章。那里写的文章名字是地址,支持中文。
更多配置请查看官方文档。后续我会补充其他内容。
2.6. 生产
完成编辑后,停止开发服务器,在项目目录运行:
pnpm build
pnpm serve模板中的 build 执行 valaxy build --ssg,预渲染页面到 dist/。等待命令成功退出后再运行 pnpm serve;它预览刚刚生成的构建产物,默认地址为 http://localhost:4173/,实际地址以终端为准。
检查以下结果:
- 首页显示新站点名称,并能点击进入新文章。
- 直接打开
/posts/first-post,正文正常显示;刷新后仍能访问。 dist/index.html和dist/posts/first-post.html已生成,包含对应页面内容。dist/sitemap.xml与dist/atom.xml使用你在site.config.ts设置的站点地址。pnpm serve不会重新构建。后续修改需要再次执行pnpm build。构建产物可按 部署指南 部署到静态托管服务。
pnpm serve 不会重新构建。后续修改需要再次执行 pnpm build。构建产物可按部署指南部署到静态托管服务。
3. 部署
3.1. 平台配置文件
默认,create-valaxy 也会自动配置每个部署平台的配置文件,平台配置文件为以下:
| 配置文件 | 平台 |
|---|---|
.github/workflows/gh-pages.yml | 使用 GitHub Action 部署 GitHub Pages |
public/_headers | Netlify 和 Cloudflare Pages 头部配置文件 |
Dockerfile 和 nginx.conf | Docker 服务器(使用 Nginx) |
netlify.toml | Netlify 配置文件 |
nginx.conf | Nginx 配置文件 |
vercel.json | Vercel 配置文件 |
.dockerignore 同 .gitignore,但是给 Docker 使用的。
3.2. 初始化仓库
因为这个作品需要在云仓库储存来部署到其他服务器。但没关系,这个仓库可以是私人的,这个配置部署的时候不会有什么问题。
你需要在 GitHub 创建一个仓库(若没有 GitHub 账号可以创建一个)。
提示
最好你的仓库是私人的,因为你可能会在里面放入一些密钥等(例如 Algolia Search 或加密的文章)。
发布(push)前建议
建议先运行 pnpm build 再发布,因为 pnpm build 会确认 .gitignore 是否正常配置,因此来避免上传不必要的文件。
默认 .gitignore 文件长这样:
# valaxy
valaxy-fuse-list.json
# vite-ssg
.vite-ssg-dist
.vite-ssg-temp
temp/
.DS_Store
*.local
dist
dist-ssr
node_modules
.idea/
*.log
components.d.ts
# env (may contain secrets like VALAXY_ENCRYPT_PASSWORD)
.env
.env.*
# valaxy rss
public/feed.xml
# valaxy rss
public/atom.xml
# valaxy rss
public/feed.json
# valaxy fuse
public/valaxy-fuse-list.json然后,在你的作品跟目录运行以下命令:
git init初始化以后,请配置仓库
git branch -M main
# 这里替换你的仓库地址
git remote add origin https://github.com/yourusername/valaxy-blog.git
git add .
git commit -m "first commit"
git push -u origin main若在 commit 时报错,请运行以下命令:
git config --local user.name "yourusername" # GitHub 用户名
git config --local user.email youremail@example.com # GitHub 账号邮箱地址然后再次运行 git commit -m "first commit" 和 git push -u origin main。
成功后,你的作品就在 GitHub 上面了,以后就可以到处编辑了。
注意
发布以后,会自动运行 GitHub Action 部署 GitHub Pages 脚本(.github/workflows/gh-pages.yml),因为 GitHub 默认没有开启 GitHub Pages,因此有几率会报错(也有几率会强行打开)。因此如果不想部署到 GitHub Pages 请删除此文件或禁用此 Action。
3.3. 部署平台
软件支持很多部署平台支持,例如 GitHub Pages、Cloudflare Pages、Vercel、Netlify等。在官方文档查看全部部署平台支持。
这里我使用 Cloudflare Pages 来做演示。
首先请确保执行了步骤3.1和3.2。然后按照以下方式来进行。
默认 Cloudflare Pages 使用 Node.js v22.16.0(大于 22.12.0),因此没有兼容错误问题。但是 pnpm 使用的是 10.11.1(小于 10.26.0)因此需要以下配置来正常运行:
方法1:在终端运行以下命令(最简单):
pnpm pkg set packageManager="pnpm@10.26.0"
# 后面那个 10.26.0 你可以自定义其他版本(pnpm 存在的版本,10.26.0或更高)方法2:手动编辑 package.json:
{
// ...
"private": true,
// 在第6行插入,后面那个 10.26.0 你可以自定义其他版本(pnpm 存在的版本,10.26.0或更高)
"packageManager": "pnpm@12.16.1",
"engines": {
"node": ">=22.12.0"
},
// ...
}注意
配置 packageManager 以后,在此作品将会忽略系统安装的 pnpm 并仅适用 packageManager 提示的版本。
其他软件包管理器将会被禁用。
方法3:在 Cloudflare Pages 变量里写入:
在设置变量里配置以下变量:
PNPM_VERSION=12.16.1登录你的 Cloudflare 账号,从侧边栏导航至 “Workers 和 Pages” 页面。

点击 创建项目、连接到 Git,选择你的 GitHub 仓库,并点击 开始设置。


选择你的部署分支(默认 main)。
将 构建命令 设置为 pnpm build 。
将 构建输出目录 设置为 dist 。

点击 保存并部署。等待部署完成。
部署完成后你可以自定义域名,而自定义域名后请在配置文件里写入你的博客地址(RSS 需要)。
export default defineSiteConfig({
url: 'https://valaxy.site/', // 这里填你的地址,带 https://
// ...
})保存后请 commit 和 push 一下让服务器从新部署。
基本上部署博客已经大约可以了,若想要更多功能请在官方文档查看。后续我会补充其他内容。
评论区(Waline)
博客是部署完了,但不能评论,不能查看别人的建议与光感,于是需要部署评论区。
默认我建议 Waline,毕竟官方也有 Waline 兼容插件。可以提供统计数据。
Waline 是 Valine 的2次开发,使用 Valine 的基础添加了安全选项。
如官方所说:一款简洁、安全的评论系统。一款从 Valine 衍生的带后端评论系统。可以将 Waline 等价成 With backend Valine。
作品作者 Austin Lee,目前已有3.1k Stars 和643 Forks,有7.6k作品使用它了并且有130个贡献者(包括云游君在内)
基本上,在 Valaxy 使用 Waline 简直不要太爽。在完全静态的页面添加精简又安全的评论区世界上没有第二个了(夸张语法,不知道是否有第二个)。
功能
- 轻量:53kb gzip 的完整客户端大小。
- 完全免费部署:可免费部署在 Vercel 上。
- 易于部署:多种部署部署方式和存储服务支持。
- 登录支持:在允许匿名评论的基础上,支持账号注册,保持身份。
- 自由评论:完全的 Markdown 支持,同时包含表情、数学公式、HTML 嵌入。
- 强大的安全性:内容校验、防灌水、保护敏感数据等。
- 文章反应:快速表达你对文章的态度。
- 浏览量统计: 通过 <1kb 代码可靠统计文章浏览量。
如何部署?
1. 安装服务端
第一步你需要一个服务器,用来存储评论以及统计数据。放心,很简单的。
你只确保你有已下账号:
然后点击下面的按钮:
它会跳转到 Vercel,那里部署你的服务端。
输入一个你喜欢的 Vercel 项目名称(例如:waline-comments)并点击 Create(创建)继续:

注意
请不要输重复的项目名,虽然 Vercel 没有重复名,但你的名称将会设置成仓库名,而如果仓库名有重复会导致初始化失败。
此时 Vercel 会基于 Waline 模板帮助你新建并初始化仓库,仓库名为你之前输入的项目名。

一两分钟后,满屏的烟花会庆祝你部署成功(这是 Vercel 专属庆祝)。此时点击 Go to Dashboard(转到控制面板)可以跳转到应用的控制台。

2. 创建数据库
有了服务,但是没有数据库,需要数据库是为了存储评论与统计的数据。
原本本来使用 Leancloud,由于它要关闭,因此我使用 Neon。
点击顶部的 Storage(存储)进入存储服务配置页,选择 Create Database(创建数据库)。在 Marketplace Database Providers(数据库服务)选择 Neon,点击 Continue(继续)进行下一步。
此时会让你创建一个 Neon 账号,此时选择 Accept and Create(接受并创建)。后续选择数据库的套餐配置,包括地区和额度。这里可以什么都不操作(也可以按照自己方式调整)直接选择 Continue(继续)。
此时会让你定义数据库名称,这里也可以不用修改(或者改为 waline-database 等喜欢的名字)直接 Continue(继续)进行下一步。
这时候 Storage(存储)下就有你创建的数据库服务了,点击进去选择 Open in Neon(在 Neon 打开)。在 Neon 界面左侧选择 SQL Editor,将官方的 waline.pgsql 中的 SQL 语句粘贴进编辑器中,点击 Run(运行)执行创建表操作。


稍等片刻之后会告知你创建成功。此时回到 Vercel,点击顶部的 Deployments(部署记录)点击顶部最新的一次部署右侧的 Redeploy(从新部署)按钮进行重新部署。该步骤是为了让刚才配置的数据库服务生效。
此时会跳转到 Overview(概览)界面开始部署,等待片刻后 STATUS(状态)会变成 Ready(就绪)。此时请点击 Visit(预览) ,即可跳转到部署好的网站地址,此地址即为你的服务端地址。
建议部署完成后测试是否能发送评论再嵌入到网页里。
默认地址也可以使用,这里建议设置自己的域名,请查看官方文档的绑定域名。
部署并测试能用后,请访问你的评论区服务地址注册页面(例如:example.yourdomain.com/ui/register )来注册账号,第一个注册的就是管理员(因此这要小心了)。
Waline 除了 Vercel,它还支持很多部署服务器和数据库,具体用法请看官方文档。
3. 安装客户端
在作品目录里运行以下命令:
pnpm add valaxy-addon-waline然后在 valaxy.config.ts 中启用评论并加载插件:
import { defineValaxyConfig } from 'valaxy'
import { addonWaline } from 'valaxy-addon-waline'
export default defineValaxyConfig({
// ...
// 没有 siteConfig 则创建
siteConfig: {
comment: {
enable: true,
},
},
// ...
addons: [
addonWaline({
serverURL: 'https://your-waline-url', // 在第一、二步生成的链接,例如 https://xxxx-waline.example.com
// 下面可以填写 Waline 配置
}),
// ...
],
// ...
})重新部署,你就得到评论区了。默认评论区会自动根据你的博客而调整样式,因此不需要额外调整。
