IT博客汇 | 下一代静态博客框架 Valaxy

下一代静态博客框架 Valaxy

Teacher Du发表于 2024-11-01 03:51:26

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

框架介绍

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

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

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

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

部署过程

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 文件就行了，内容结构如下：

---
title: Title
hide: true
excerpt_type: text
---

这是摘要

<!-- more -->

这是正文

参数作用详见下表：

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

从 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，最后点击保存并部署就行了。

使用体验

杜老师将已发布的 590 篇文章迁移到 Valaxy，仅需 20 秒即可生成站点页面文件，而通过 Hexo 则需要 8 分钟「大概是因为杜老师说使用了太多插件」

不过毕竟是新型的框架，目前主题及插件比较少，并不足以满足杜老师的使用需求，想折腾的小伙伴可以尝试下，杜老师也在坐等着更多模板。