抱歉,您的浏览器无法访问本站
本页面需要浏览器支持(启用)JavaScript
了解详情 >

杜老师一直在找 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
---

这是摘要

<!-- more -->

这是正文

参数作用详见下表:

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

从 Hexo 迁移

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

用途HexoValaxy
文章source/_postspages/posts
页面sourcepages
静态资源sourcepublic

托管部署

  1. GitHub Pages: 在创建模版项目时,已内置文件 .github/workflows/gh-pages.yml 以实现 GitHub Actions 的自动部署工作流。

  2. Netlify: 已内置 netlify.toml。

  3. Vercel: 将 Framework Preset 设置为 Other,并更改 Build and Output Settings,将 Output Directory 设置为 dist 后点击 Deploy。

  4. Cloudflare Pages: 点击创建应用程序——连接到 Git,然后选择点击开始设置,将构建输出目录设置为 dist 后添加一个环境变量。变量名称设置为 NODE_VERSION,阈值为 16.0,最后点击保存并部署就行了。

使用体验

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

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

评论