跳转到内容

简介

不久前在国内进行域名备案,要求提供一个网站,开始搭了一个 halo 挂着,也没有实际用过,最近闲下来,花了点时间重新研究下博客的搭建。

建站工具

首先,建站最主要的就是先确定好工具。建立个人网站的工具有很多,其中 hexo、hugo、halo、vitepress 是目前比较流行的几种工具。

稍微了解几个工具后,结合个人的技术栈和喜好,我准备先尝试 vitepress,后面在仔细看了一遍官方文档后,我就决定直接使用 vitepress,不再考虑其它工具了。

vitepress 在我看来有以下几个优势:

  1. vitepress 自带的主题足够简洁好看,稍作修改就可以作为博客主题,而 hexo、hugo、halo 默认主题一言难尽(个人认为太过平庸甚至有些丑),或许它们有很多使用者分享的优秀主题,但我的目标不在优化主题上。
  2. 可以用 git 来做文章的版本控制,每一次修改都有记录,hexo 和 hugo 也是类似方案,而 halo 则是通过网页控制台写文章,要自己备份服务器中的数据。
  3. 最让我惊叹的是 vitepress 使用的技术栈,它将 markdown 转为 vue 单文件组件,然后写文章就能和 vue 开发一样了。只要你愿意,完全可以将 md 文件当做一个网页来写,这给了自定义无限的可能性,刚好我也比较熟悉 vue,对于这个特性我感到非常满意。
  4. 得益于 vite 的局部刷新,用 vitepress 写文章真的很舒服,只要运行服务器打开网页,修改保存文章就会直接在页面中更新而无需刷新页面。
  5. vitepress 是 spa 应用,页面切换非常丝滑。
  6. vitepress 默认集成了很多开箱即用的功能,高亮、代码引用(甚至支持 vscode region)、代码组、搜索、seo、最后更新时间、获取 config.mts 中的配置等,基本不需要任何配置,在 hexo、hugo、halo 可能要通过插件实现的很多功能,vitepress 默认就有了。
  7. vitepress 提供了很多构建钩子,配置文件就是一个 ts 文件,随时能加入自己的逻辑。

vitepress 搭建

经过了两周的努力,终于搭建好了 vitepress 博客,接下来,我会分享在这期间,我遇到的一些问题以及如何解决,包括:

  • 主题微调,包括主页设计、备案号显示、界面翻译
  • 配置 seo、谷歌分析、百度统计等功能
  • 针对国内、国外进行不同的构建和部署