开始
总览
Valaxy = V + Galaxy 旨在成为下一代静态博客框架,提供更好的热更新与用户加载体验、更强大更便捷的自定义开发可能性。
你可以在 为什么选 Valaxy 中了解更多关于项目的设计初衷。
创建 Valaxy 项目
示例: yun.valaxy.site
在线试用
你可以通过 StackBlitz 在线试用 Valaxy(默认使用主题 valaxy-theme-yun)。
这是一个极简项目,您仅需以下几个文件,就可以快速搭建好你的博客!
pages文件夹:存放页面/文章site.config.ts站点信息valaxy.config.ts主题和框架配置package.json记录依赖
在本地创建
版本兼容
Valaxy 要求 Node.js >=22.12.0。本指南使用 pnpm >=10.26.0,以支持模板中的 allowBuilds 依赖构建权限配置。版本不满足要求时,请先升级再创建项目。
先检查本地版本:
node --version
pnpm --version在准备存放博客的目录中执行:
pnpm create valaxy@latest依次选择:
Select a type:→ Blog。Select a theme:→ Yun(本文使用的默认博客主题)。Project name:→ valaxy-blog,或一个尚不存在的目录名。Install and start it now?→ No,然后按下文手动安装和启动。如果选择 Yes,请选择 pnpm,并在自动启动后直接进入“写第一篇文章”。
命令行提示示例
🌌 Valaxy v1.1.0 ? Select a type: › - Use arrow-keys. Return to submit. ❯ Blog - For Most Users 【Press Enter】 Theme - For Theme Developers Addon - For Addon Developers ? Select a theme: ❯ Yun - A light & clean theme (default) 【Press Enter】 Press - A document-oriented theme Custom - Enter a custom theme name ? Project name: › valaxy-blog 【Press Enter】 📁 /root/repos/valaxy-blog Scaffolding project in valaxy-blog ... Done. ? Install and start it now? › (Y/n) 【Press N, Enter】 start it later by: cd valaxy-blog pnpm install pnpm run dev
选择主题
- Yun:默认博客主题,本文后续步骤以它为例。
- Press:面向文档的主题。
- Custom:输入自定义主题名,例如
starter或valaxy-theme-starter。
脚手架会配置主题依赖和 valaxy.config.ts;Press 还会使用自己的首页和配置模板。其他主题的配置请参考对应主题文档。
使用
进入刚创建的项目,安装依赖并启动开发服务器:
cd valaxy-blog
pnpm install
pnpm dev保留生成的 pnpm-workspace.yaml:它包含模板所需的依赖安装配置,包括构建脚本权限。pnpm 11 及以上版本默认会因未审核的依赖脚本而中止安装;模板已配置当前依赖,首次安装无需额外执行 approve-builds。
启动成功后的终端输出示例
以下按默认 Yun 模板的实际输出整理,省略了耗时和网卡地址。版本号、项目路径和端口以你的终端为准。
$ pnpm dev ✔ Resolve userValaxyConfig from /path/to/valaxy-blog/valaxy.config.ts ✔ Resolve siteConfig from /path/to/valaxy-blog/site.config.ts ✔ Resolve valaxy.config.ts from theme(yun) ✔ Resolve addons from /path/to/valaxy-blog ✔ [valaxy] server ready. 🌌 Valaxy v1.1.0 🪐 theme > yun (v1.1.0) 📁 /path/to/valaxy-blog Preview > http://localhost:4859/ shortcuts > restart | open | qr | edit
打开终端中 Preview 后的地址,默认是 http://localhost:4859/。端口被占用时会自动选择其他可用端口,因此以终端输出为准。首页应能看到示例文章 Hello, Valaxy!,点击标题可进入文章页。
pnpm dev 会持续运行。保持这个终端打开,在编辑器中修改项目;需要运行其他命令时,另开终端并进入同一个项目目录。按 Ctrl+C 可停止服务器。
写第一篇文章
新建 pages/posts/first-post.md,写入:
---
title: 我的第一篇文章
date: 2026-10-05
tags:
- 日常
---
## 你好,Valaxy
这是我的第一篇文章。将日期改为你的发布日期。文件顶部的 --- 区域是文章元数据,其后是 Markdown 正文。保存后首页的文章列表会更新;打开 /posts/first-post 可以查看正文。示例文章设置了 top: 1,因此仍会排在新文章前面。
也可以在项目目录运行 pnpm exec valaxy new first-post 生成文章文件,再编辑内容。文章文件已存在时,这条命令会创建带编号的新文件,请查看命令输出中的路径。
配置站点
修改 site.config.ts 中对应的字段,设置站点标题、作者和描述。例如:
import { defineSiteConfig } from 'valaxy'
export default defineSiteConfig({
url: 'https://example.com/',
lang: 'zh-CN',
timezone: 'Asia/Shanghai',
title: '我的博客',
author: {
name: '小明',
},
description: '记录生活与技术。',
})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 控制,将它改成你希望显示的文字即可。模板中的社交链接、赞助信息和页脚备案信息也是示例,上线前请修改或关闭。
首次生产构建
完成编辑后,停止开发服务器,在项目目录运行:
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。构建产物可按 部署指南 部署到静态托管服务。
部署
将构建生成的 dist/ 部署到静态托管服务,具体步骤参见 部署指南。
升级
cd your-blog
# upgrade valaxy
pnpm add valaxy@latest
# upgrade theme
pnpm add valaxy-theme-yun@latestcd your-blog
# upgrade valaxy
npm i valaxy@latest
# upgrade theme
npm i valaxy-theme-yun@latestpnpm
你可以使用 pnpm 的交互升级命令。
# interactive upgrade
pnpm up --latest -i迁移
如果你来自其他博客框架,可参考 迁移。
目录结构
在大部分情况下,你只需要在 pages 文件夹下进行工作,编写文章。
主要的文件夹
pages: 你的所有页面posts: 写在pages/posts文件夹下的内容,将被当作博客文章
styles: 覆盖主题样式,文件夹下的这些 scss 文件将会被自动加载index.ts/index.scss/index.css
components: 自定义你的组件(将会被自动注册)layouts: 自定义布局 (譬如可以通过layout: xxx来使用layouts/xxx.vue布局)locales: 自定义国际化关键词
其他
.vscode: 推荐安装一些有用的 VSCode 插件,这样你可以直接预览一些图标、国际化、辅助的 CSS Class 等- 可选安装 Valaxy VS Code 扩展,在编辑器中查看文章列表和本地站点预览。安装步骤、配置和兼容性说明请参阅扩展文档。
.github: 使用 GitHub Actions 自动构建并部署到 GitHub Pagesnetlify.toml: Netlify 自动配置vercel.json: Vercel 重定向配置
主题
如果您希望自己开发一个主题并发布,您可以参考 valaxy-theme-starter。
更多内容请参见 如何编写一个 Valaxy 主题。
社区
如果你有疑问或者需要帮助,可以到 Discord 和 GitHub Discussions 社区来寻求帮助。