Valaxy,为表达而生的博客框架

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

对于上次我部署过一个cf-blog博客,部署方式在这里。但是它好像很久没更新了,因此也没有美化(除非你自己自定义主题)。而且它的安全性不是很怎么样。因此我把它给为备份博客使用。

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

,具体可以在这里查看。

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

—— VALAXY - 下一代静态博客框架。从一个想法,到你的宇宙。开箱即用,写下第一篇;自由定制,做出自己的模样。

感谢云游君创作这个作品。目前已有540个人使用此软件,包括OpenList 文档也使用此软件,有1.1k多Stars和134个Forks,55个贡献者。从这个博客框架找到后,我就有了兴趣来作这篇文章。

额外提醒,这篇文章我也会讲如何部署 Waline。

那么我们正式开始吧!

总览 ​

Valaxy = V + Galaxy 旨在成为下一代静态博客框架,提供更好的热更新与用户加载体验、更强大更便捷的自定义开发可能性。

你可以在 为什么选 Valaxy 中了解更多关于项目的设计初衷。

提示

Valaxy 基于 Vite 提供热更新与打包等功能,基于 Vue 实现视图(如主题、自定义组件)等客户端功能。

因此 Valaxy 兼容并可自由使用 Vite 与 Vue 生态的所有插件。

功能 ​

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:熟悉的工具,更多的可能。

立即测试? ​

StackBlitz

目前处在某种原因报错,希望官方修复。

如何部署 ​

1. 安装 ​

1.1. 创建模板 ​

兼容警告

Valaxy 要求:

  • Node.js 的版本为 >=22.12.0:这是由 unplugin-vue-markdown@32(要求 Node >=22)与 Vite 8(要求 ^20.19.0 || >=22.12.0)共同决定的——在 Node 22 分支上最低需要 22.12.0。请将 Node.js 升级至 22.12.0 或更高版本。
  • pnpm 的版本为 >=10.26.0:以支持模板中的 allowBuilds 依赖构建权限配置。版本不满足要求时,请先升级再创建项目。

提示

如果您是 Windows 用户,我们强烈建议您使用类 Unix 的 Shell(如 Git Bash 或 WSL),而非 CMD / PowerShell.

信息

Cloudflare Pages 默认使用 Node.js 22.16.0,因此没有兼容错误问题。但是 pnpm 使用的是 10.11.1,因此会出现错误(警告,不影响构建)。

默认,Valaxy 需要一些配置文件才能运行。因此,你需要它的创建模板程序来创建模板,并且自动配置。

Valaxy Version

首先,请确保你的系统有node.js和pnpm(若没有pnpm或不想安装可以使用npm)并且确保它大于或等于以下版本。

  • Node.js >=22.12.0(最好>=24)
  • pnpm >=10.26.0(最好>=11)

检查本地版本:

bash
node --version
# 应该显示 v22.12.0 或更高
pnpm --version
# 应该显示 10.26.0 或更高

从 v1.2.0 后,Valaxy 将使用 pnpm 当做默认软件包管理器,npm 仅安装与构件,不建议使用它来创建模板。其他软件包可能将不会再兼容。

你也可以使用它的最新版本,但注意配置与安装的样式。

然后再终端运行此命令:

bash
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. 升级 ​

在你的作品文件夹里运行以下命令:

bash
# 更新软件
pnpm add valaxy@latest
# 更新主题(若不是 Yun 主题请替换)
pnpm add valaxy-theme-yun@latest

你可以使用 pnpm 的交互升级命令。

bash
# 交互式更新
pnpm up --latest -i

2. 配置 ​

注意主题配置

此配置是按照 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. 使用 ​

进入刚创建的项目,安装依赖并启动开发服务器:

bash
cd valaxy-blog # 或者你的作品名称
pnpm install
pnpm dev

保留生成的 pnpm-workspace.yaml:它包含模板所需的依赖安装配置,包括构建脚本权限。pnpm 11 及以上版本默认会因未审核的依赖脚本而中止安装;模板已配置当前依赖,首次安装无需额外执行 pnpm approve-builds。

2.2. 配置文件 ​

文件主配置文件里的配置概述
valaxy.config.ts-主配置文件(必须文件存在)
site.config.tssiteConfig: {},站点配置(默认文件存在,可以在主配置文件存在)
theme.config.tsthemeConfig: {},主题配置(默认文件不存在,配置在主配置里)
vite.config.tsvite: {}Vite 配置文件(默认未配置,文件不存在)

每个配置文件都代表每个用途,因此请不要删除或乱改。若配置不恰当会导致构件失败。

2.3. 自定义博客(站点配置) ​

在一开始,里面的内容都不是你的,对吧。这些内容其实是例子,让你看看博客代码长怎样。而修改它也不是这么麻烦。

首先,我们先配置一下 site.config.ts。

你先写一下你是谁,在配置文件里修改一下信息:

site.config.ts
ts
export default defineSiteConfig({
  // ... 找到这一行
  author: {
    name: '张三',
    avatar: 'https://example.com/path/profile.png', // 或者在 public 文件夹下的图标。
  },
  // ...
})

这里就是你用户的信息,名字可以自己的或虚拟的。

其次,还得需要配置博客名称(不是作品名称)等。请按照以下方式修改:

site.config.ts
ts
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 控制,将它改成你希望显示的文字即可。模板中的社交链接、赞助信息和页脚备案信息也是示例,上线前请修改或关闭。

注意里面的内容,若需要包含",请在"之前写入\,否则会报错。

你也可以配置社交平台账号链接,按照以下配置:

site.config.ts
ts
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 的图标,若使用其他图标,请按照它的图标包。

若想配置赞助可以使用以下配置:

site.config.ts
ts
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,也就是主配置文件,在这里面,我们也配置一下内容。

第一部分:开头动画,使用以下配置来设置:

valaxy.config.ts
ts
export default defineValaxyConfig<UserThemeConfig>({
  // ...
  themeConfig: {
    banner: {
      enable: true,
      title: '云游君的小站', // 在这里更改你想要的词语
    },
    // ...
  },
  // ...
})

你仅需要修改 title 就行了,可以纯文本(例如 ''你好世界)或者列表(例如 ['你好', '世界'])。

那个 enable 是是否开启博客主封面。

第二部分:连接。按照以下配置来设置:

valaxy.config.ts
ts
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',
      },
    ],
    // ...
  },
  // ...
})

图标配置跟上一个社交平台账号链接一样。

第三部分:页脚。

备案号默认没事别乱来。

valaxy.config.ts
ts
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 语法

每个文章需要配置,配置如下:

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. 生产 ​

完成编辑后,停止开发服务器,在项目目录运行:

bash
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/_headersNetlify 和 Cloudflare Pages 头部配置文件
Dockerfile 和 nginx.confDocker 服务器(使用 Nginx)
netlify.tomlNetlify 配置文件
nginx.confNginx 配置文件
vercel.jsonVercel 配置文件

.dockerignore 同 .gitignore,但是给 Docker 使用的。

3.2. 初始化仓库 ​

因为这个作品需要在云仓库储存来部署到其他服务器。但没关系,这个仓库可以是私人的,这个配置部署的时候不会有什么问题。

你需要在 GitHub 创建一个仓库(若没有 GitHub 账号可以创建一个)。

提示

最好你的仓库是私人的,因为你可能会在里面放入一些密钥等(例如 Algolia Search 或加密的文章)。

发布(push)前建议

建议先运行 pnpm build 再发布,因为 pnpm build 会确认 .gitignore 是否正常配置,因此来避免上传不必要的文件。

默认 .gitignore 文件长这样:

.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

然后,在你的作品跟目录运行以下命令:

bash
git init

初始化以后,请配置仓库

bash
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 时报错,请运行以下命令:

bash
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:在终端运行以下命令(最简单):

bash
pnpm pkg set packageManager="pnpm@10.26.0"
# 后面那个 10.26.0 你可以自定义其他版本(pnpm 存在的版本,10.26.0或更高)

方法2:手动编辑 package.json:

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 变量里写入:

在设置变量里配置以下变量:

env
PNPM_VERSION=12.16.1

登录你的 Cloudflare 账号,从侧边栏导航至 “Workers 和 Pages” 页面。

登录

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

导入
选择

选择你的部署分支(默认 main)。

将 构建命令 设置为 pnpm build 。

将 构建输出目录 设置为 dist 。

部署

点击 保存并部署。等待部署完成。

部署完成后你可以自定义域名,而自定义域名后请在配置文件里写入你的博客地址(RSS 需要)。

site.config.ts
ts
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. 安装服务端 ​

Waline server Version

第一步你需要一个服务器,用来存储评论以及统计数据。放心,很简单的。

你只确保你有已下账号:

  • GitHub(支持 Google 和苹果账号登录,上一个步骤的账号也行)
  • Vercel(支持 GitHub、Google 等多种方式登录)

然后点击下面的按钮:

Deploy with Vercel

它会跳转到 Vercel,那里部署你的服务端。

输入一个你喜欢的 Vercel 项目名称(例如:waline-comments)并点击 Create(创建)继续:

Create

注意

请不要输重复的项目名,虽然 Vercel 没有重复名,但你的名称将会设置成仓库名,而如果仓库名有重复会导致初始化失败。

此时 Vercel 会基于 Waline 模板帮助你新建并初始化仓库,仓库名为你之前输入的项目名。

Init

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

Sucess

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(运行)执行创建表操作。

Neon 1
Neon 2

稍等片刻之后会告知你创建成功。此时回到 Vercel,点击顶部的 Deployments(部署记录)点击顶部最新的一次部署右侧的 Redeploy(从新部署)按钮进行重新部署。该步骤是为了让刚才配置的数据库服务生效。

此时会跳转到 Overview(概览)界面开始部署,等待片刻后 STATUS(状态)会变成 Ready(就绪)。此时请点击 Visit(预览) ,即可跳转到部署好的网站地址,此地址即为你的服务端地址。

建议部署完成后测试是否能发送评论再嵌入到网页里。

默认地址也可以使用,这里建议设置自己的域名,请查看官方文档的绑定域名。

部署并测试能用后,请访问你的评论区服务地址注册页面(例如:example.yourdomain.com/ui/register )来注册账号,第一个注册的就是管理员(因此这要小心了)。

Waline 除了 Vercel,它还支持很多部署服务器和数据库,具体用法请看官方文档。

3. 安装客户端 ​

Waline client Version

在作品目录里运行以下命令:

bash
pnpm add valaxy-addon-waline

然后在 valaxy.config.ts 中启用评论并加载插件:

valaxy.config.ts
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 配置
    }),
    // ...
  ],
  // ...
})

重新部署,你就得到评论区了。默认评论区会自动根据你的博客而调整样式,因此不需要额外调整。