下一代静态博客框架 Valaxy-工具盒子

杜老师一直在找 Hexo 替代框架，因为杜老师说博客文章量比较多，站点页面生成速度太慢，经晓雨童靴的推荐，了解到 Valaxy 框架。本文介绍 Valaxy 的特点，以及部署方式，感兴趣的小伙伴可以尝试下！

框架介绍 {#框架介绍}

Valaxy 的目标是成为新一代静态博客框架与生成器。提供更好热更新与用户加载体验、更强大更便捷自定义开发可能性。支持配置、文章的热更新，而不像 Hexo 一样重新加载页面。

它与 Hexo 相比开发体验和速度上都更胜一筹，且与 VitePress/VuePress 相比拥有更多针对博客的集成功能，譬如文章列表钩子、自动路由、组件注册、可覆盖的布局与主题等。

Valaxy 基于 Vite 提供热更新与打包功能，基于 Vue 实现视图等客户端的功能。因此 Valaxy 兼容并可自由使用 Vite 与 Vue 生态所有插件。

Valaxy 已经默认集成 Open Graph 的 SEO 优化。需要注意的是，对于许多搜索引擎来说，它们可能只青睐 SSG 构建模式。

部署过程 {#部署过程}

|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | penn@penn-PC:~/Desktop$ sudo npm i -g pnpm 请输入密码: 验证成功 added 1 package in 13s 1 package is looking for funding run `npm fund` for details penn@penn-PC:~/Desktop$ npm init valaxy Need to install the following packages: create-valaxy@0.14.30 Ok to proceed? (y) ? Valaxy v0.14.30 ✔ Project name: ... valaxy-blog ? /home/penn/Desktop/valaxy-blog Scaffolding project in valaxy-blog ... Done. ✔ Install and start it now? ... yes ✔ Choose the agent › pnpm Downloading registry.npmjs.org/typescript/4.8.4: 11.9 MB/11.9 MB, done Packages: +435 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ Packages are hard linked from the content-addressable store to the virtual store. Content-addressable store is at: /home/penn/.local/share/pnpm/store/v3 Virtual store is at: node_modules/.pnpm node_modules/.pnpm/vue-demi@0.14.5_vue@3.3.4/node_modules/vue-demi: Running postinstall script, done in 119ms Progress: resolved 457, reused 0, downloaded 435, added 435, done node_modules/.pnpm/esbuild@0.17.19/node_modules/esbuild: Running postinstall script, done in 73ms dependencies: + valaxy 0.14.30 + valaxy-theme-yun 0.14.30 devDependencies: + typescript 4.8.4 (5.1.3 is available) WARN Issues with peer dependencies found . ├─┬ valaxy 0.14.30 │ └─┬ vite-ssg 0.22.2 │ └── ✕ unmet peer critters@^0.0.16: found 0.0.17 in valaxy └─┬ valaxy-theme-yun 0.14.30 └─┬ valaxy-addon-waline 0.1.0 └── ✕ unmet peer valaxy@latest: found 0.14.30 Done in 1m 34.2s > valaxy-blog@0.14.30 dev /home/penn/Desktop/valaxy-blog > valaxy ℹ Resolve valaxyConfig from /home/penn/Desktop/valaxy-blog/valaxy.config.ts 03:31:05 ℹ Resolve siteConfig from /home/penn/Desktop/valaxy-blog/site.config.ts 03:31:05 ℹ Resolve valaxy.config.ts from theme(yun) 03:31:05 ℹ Resolve addons: 03:31:06 ? Valaxy v0.14.30 ? theme > yun ? /home/penn/Desktop/valaxy-blog Preview > http://localhost:4859/ Network > http://192.168.36.141:4859/ shortcuts > restart | open | edit |

注意：官方推荐使用 pnpm 来部署，所以杜老师第一步安装了 pnpm。另外在 Choose the agent 一步，需要选 pnpm。完成 Valaxy 的部署后会自动运行，默认端口号 4859。

博客更新 {#博客更新}

如需发布文章，进入到博客根目录的 pages/posts，新建.md 文件就行了，内容结构如下：

|---------------------------------|------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 10 11 | --- title: Title hide: true excerpt_type: text --- 这是摘要  这是正文 |

参数作用详见下表：

| 参数 | 作用 | 阈值 | |--------------|------------|-----------------------------------------------------------------------------------------| | title | 文章标题 | 暂无 | | hide | 临时隐藏某篇文章 | 当设置为 true 或 all 时，文章仍然会被渲染，可以直接访问链接进行查看。但不会被显示在展示的文章卡片与归档中；当设置为 index 时，将只在首页隐藏归档中仍然展示。 | | excerpt_type | 预览列表摘要渲染类型 | md 展示原始 Markdown；html 以 HTML 的形式展示；text 以纯文本的形式展示。 |

从 Hexo 迁移 {#从-Hexo-迁移}

Hexo 博客目录与 Valaxy 博客目录对应的关系如下，将相关的内容复制至对应文件夹即可：

| 用途 | Hexo | Valaxy | |------|---------------|-------------| | 文章 | source/_posts | pages/posts | | 页面 | source | pages | | 静态资源 | source | public |

托管部署 {#托管部署}

GitHub Pages: 在创建模版项目时，已内置文件 .github/workflows/gh-pages.yml 以实现 GitHub Actions 的自动部署工作流。
Netlify: 已内置 netlify.toml。
Vercel: 将 Framework Preset 设置为 Other，并更改 Build and Output Settings，将 Output Directory 设置为 dist 后点击 Deploy。
Cloudflare Pages: 点击创建应用程序------连接到 Git，然后选择点击开始设置，将构建输出目录设置为 dist 后添加一个环境变量。变量名称设置为 NODE_VERSION，阈值为 16.0，最后点击保存并部署就行了。