前端后端CLISSR【免费下载链接】valaxy Next Generation Static Blog Framework (Beta) 下一代静态博客框架支持页面/配置热重载项目地址https://gitcode.com/YunYouJun/valaxy点击查看免费下载Valaxy 是一个基于 Vite 与 Vue 的下一代静态博客框架支持页面热重载与强大的自定义能力。本教程将通过pnpm create valaxy脚手架命令带你用最少的代码在 10 分钟内从零搭建并运行自己的第一个静态博客。开始之前Valaxy 环境要求与准备工作在动手之前请先确认本地环境满足版本要求这是避免安装报错的最快方式工具要求版本Node.js 22.12.0pnpm 10.26.0在终端执行以下命令检查node --version pnpm --version如果版本过低请先升级再创建项目。此外Valaxy 还支持 Vite 和 Vue 的全部插件生态后续扩展非常方便。一键创建项目pnpm create valaxy 快速上手步骤在想要创建博客的目录下执行pnpm create valaxylatest命令会启动交互式脚手架源码见 packages/create-valaxy/src/valaxy.ts按顺序回答 4 个问题即可Select a type:选择模板类型→ 选择Blog面向大多数用户的博客模板Select a theme:选择主题→ 选择Yun默认的博客主题轻量清爽Project name:项目名称→ 输入valaxy-blog或任意新目录名Install and start it now?立即安装并启动吗→ 建议选No我们稍后手动安装方便理解每一步其中主题选择共提供 3 个选项定义于 packages/create-valaxy/src/config.tsYun默认博客主题本教程使用Press面向文档的极简主题Custom手动输入任意主题名 选择 Blog 模板时脚手架会自动把对应主题的依赖写入package.json并生成valaxy.config.ts配置无需手动改代码。了解项目结构只需要关注 pages 文件夹脚手架会基于 Blog 模板生成项目模板文件位于 packages/create-valaxy/template-blog/。生成后进入项目目录cd valaxy-blog日常写博客你只需要关注这几个位置pages/所有页面与文章。其中pages/posts/存放博客文章会自动被识别并计入文章列表site.config.ts站点信息标题、作者、描述、语言、时区、URLvalaxy.config.ts主题与框架配置styles/覆盖主题样式index.scss会被自动加载components/自定义 Vue 组件可直接在 Markdown 中使用locales/自定义国际化文案pnpm-workspace.yaml包含依赖构建脚本的权限配置请勿删除启动开发服务器热重载实时预览效果安装依赖并启动开发服务器pnpm install pnpm dev启动成功后终端会打印出类似下面的内容示例输出参考 docs/generated/startup-output.txt Valaxy 1.1.0 theme yun /path/to/valaxy-blog Preview http://localhost:4859/在浏览器打开Preview后面的地址通常是http://localhost:4859/。如果端口被占用Valaxy 会自动换一个可用端口以终端显示为准。此时你应该能看到模板自带的第一篇文章Hello, Valaxy!点击标题即可打开正文页面。开发服务器会持续运行编辑 Markdown 文件后保存页面会实时热重载无需手动刷新。需要执行其他命令时请再开一个终端窗口停止服务器使用CtrlC。撰写第一篇博客文章Markdown 前置信息在pages/posts/下新建first-post.md--- title: 我的第一篇博客 date: 2026-10-13 tags: - 笔记 --- ## Hello, Valaxy 这是我用 Valaxy 写的第一篇文章。---之间的部分是前置信息Front Matter用于描述文章元数据标题、日期、标签等其余内容为标准 Markdown。保存文件后首页文章列表会自动更新访问/posts/first-post即可阅读。也可以用命令一键生成文章文件它会自动帮你填好带时区偏移的日期pnpm exec valaxy new my-first-post配置站点信息site.config.ts 和 valaxy.config.ts 快速配置打开项目根目录的site.config.ts把站点信息改成你自己的title/description站点标题与描述author.name作者名url生产环境地址用于文章链接、RSS 与 sitemap部署前务必替换lang、timezone语言与时区模板默认Asia/Shanghai保留显式时区可保证文章时间与访客显示一致valaxy.config.ts则负责主题与框架选项。例如 Yun 主题首页的大字标语由themeConfig.banner.title控制替换成你想展示的内容即可。模板中的社交链接、赞助信息、页脚备案号均为示例部署前请自行替换或移除。首次正式构建pnpm build 与 pnpm serve 部署预览确认开发效果无误后先停掉开发服务器CtrlC执行正式构建pnpm build pnpm serve模板的build脚本实际执行的是valaxy build --ssg会使用内置的 SSG 引擎把页面预渲染为静态文件输出到dist/目录。pnpm serve用于预览构建产物默认http://localhost:4173/注意它不会重新构建改动后需再次pnpm build。上线前建议检查首页显示你的站点名称和新文章链接直接打开/posts/first-post能正常显示刷新后不丢失dist/index.html、dist/posts/first-post.html中包含对应页面内容确认无误后把dist/目录上传到任意静态托管平台即可完成部署详见 docs/pages/guide/deploy.md。常见问题 FAQQ提示 Node 版本不兼容怎么办AValaxy 要求 Node.js 22.12.0请先升级 Node 再执行pnpm create valaxylatest。Qpnpm install报依赖构建脚本相关错误A请保留脚手架生成的pnpm-workspace.yaml它已包含依赖安装所需的构建脚本权限不要手动删除。Q如何给博客换主题A创建时选择 Custom 输入主题名即可后续可通过pnpm add valaxy-theme-主题名安装新主题并修改valaxy.config.ts中的theme字段。下一步继续探索 Valaxy完整入门指南docs/pages/guide/getting-started.md命令行速查docs/pages/guide/commands/index.md博客主题源码packages/valaxy-theme-yun/创建脚手架源码packages/create-valaxy/恭喜你现在已经用 Valaxy 拥有了一个属于自己的静态博客。接下来可以从 Markdown 写作指南 开始把想法写下来吧 ✨赞分享前端后端CLISSR【免费下载链接】valaxy Next Generation Static Blog Framework (Beta) 下一代静态博客框架支持页面/配置热重载项目地址https://gitcode.com/YunYouJun/valaxy点击查看免费下载相关推荐10分钟快速上手HubPress从零开始搭建你的第一个GitHub博客10分钟快速上手HubPress从零开始搭建你的第一个GitHub博客 HubPress是一款基于GitHub和AsciiDoc的开源博客工具让你无需复杂配快速上手 Taste-Skill如何用 3 个旋钮调出有品味的 AI 前端设计快速上手 Taste Skill如何用 3 个旋钮调出有品味的 AI 前端设计 连续让 AI 做落地页第三版你还是看到了紫蓝渐变、深色网格底、三张一模一样宽AI 技能前端设计系统如何快速上手 Epoch.js10分钟搭建你的第一个实时图表如何快速上手 Epoch.js10分钟搭建你的第一个实时图表 Epoch.js 是一个功能强大的通用实时可视化图表库专为应用程序开发者和数据可视化设计师打造数据可视化前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考