VuePress建站
在利用VuePress的Vdoing主题建站的过程中的踩坑和学习记录，发出来仅供参考。
# 1. 全文搜索&上次更新
# 1.1 启用全文搜索
npm i VuePress-plugin-fulltext-search -D
# or
yarn add VuePress-plugin-fulltext-search -D
2
3
然后在插件配置中启用该插件（以Vdoing主题为例）
plugins: <UserPlugins>['fulltext-search']
但是吧这个插件的搜索功能不是很强大， 有的词过短或者没有索引到就搜索不出来，比如这篇文章中的LF就搜索不到。后续其实可以换更强大的搜索插件。
# 1.2 显示上次更新时间
# 方法
在deploy.sh中的npm run build:win之前加入下面内容👇
# 提交 Markdown 源文件变更（显示上次更新时间用）
git add docs/
git commit -m "更新文档内容 $(date '+%Y-%m-%d %H:%M:%S')" || echo "无文档变更，无需提交"
echo "✅ Markdown 文件提交完毕"
2
3
4
# 理由
从下图中可以看到，npm run deploy命令实际commit的是构建好的dist文件。而VuePress提供的上次更新时间的插件取的是.md文件commit到本地仓库的时间，如果.md 文件未曾被git commit, 则插件 git log 查不到结果，构建后的页面中不会出现“上次更新时间”这行文字。每次更新博客后把.md文件提交到本地仓库就可以了。
# 2. 图床与cdn加速
本博客的图床采用PicGo (opens new window)+GitHub（Picx (opens new window)作为备用）
# 3. 部署
# 3.1 部署到GitHub
deploy.sh中的push_addr的GitHub地址用双引号包裹在bash中运行
npm run deploy后报错
deploy.sh: line 14: $'\224\250build:win': command not found
豆包了下说\224\250是 CRLF 换行符的一部分（\r 或 \n）被错误解析后的结果。于是尝试把deploy.sh的行尾序列从CRLF改为LF。之后再运行就推送成功了。
# 3.2 部署至Vercel |🚀海外访问
# 3.2.1 Vercel是什么
Vercel (opens new window) 和 GitHub Pages 都是部署静态网站的平台，但是GitHub不提供全球CDN加速， Vercel CDN会默认部署到全球边缘节点以加快访问速度。
在Vercel中设置了GitHub和Vercel的集成关系（连接到GitHub项目和监听分支）之后，源码推送到 GitHub 可自动触发 Vercel 部署。
构建完成之后，Vercel 会把你的静态文件托管在主源服务器上（即 Vercel Origin），但只有当用户访问页面时，该页面才会被缓存到用户最近的 CDN 边缘节点（懒加载机制）。具体过程如下👇：
部署：
📦 部署项目如VuePress → 📁 生成静态文件 → 🗃️ 存放在 Vercel Origin
第一次用户访问某页面： 🌍 用户请求页面 → CDN 检查本地缓存 ❌未命中 → 向 Vercel Origin 请求文件 → ✔️缓存该页面到当前 CDN 节点 → 🚀 返回页面
后续其他用户访问该页面： 🌍 CDN 命中缓存 → 直接从 CDN 边缘返回内容 ✅ 非常快
# 3.2.2 部署踩的坑
（1）报错内容
sh: line 1: VuePress: command not found
Error: Command "VuePress build src" exited with 127
2
（2）解决
ChatGPT告诉我这个错误说明：在 Vercel 的构建环境中无法找到 VuePress 命令，也就是没有安装 VuePress。
首先检查VuePress是否在项目
package.json的Dependencies或devDependencies中。其次，确保
package.json中的scripts包含正确的构建命令。
因Vercel无法识别 package.json 下面的build scripts
"build": "export NODE_OPTIONS=--openssl-legacy-provider && node --max_old_space_size=4096 ./node_modules/vuepress/cli.js build docs",
于是替换成了👇
"build": "vuepress build docs"
- 最后，在 Vercel 项目设置中配置：
- Build Command:
npm run build - Output Directory:
.VuePress/dist
- Build Command:
Framework Preset选择Other而不是VuePress。Vercel 的 VuePress Preset 支持的是 VuePress v2（Next），但我的package.json中使用的 VuePress是v1.9.9的，所以这里要改成Other。
按照上述修改后重新部署Vercel就成功了。（哦ChatGPT真好用~~~）
# 3.2.3 路由到Vercel
# （1）添加域名
- 在Vercel - Project Setting - Domains中添加域名，完成后会显示两条DNS记录，需要把这两条解析记录添加到域名控制台
# （2）DNS配置
- 打开域名控制台加入记录
# （3）验证域名指向
nslookup www.example.com
确认返回的CNAME是cname.vercel-dns.com则成功路由
# （4）总结
最后的配置结果是在Vercel上把 keijyu.top 自动重定向到 www.keijyu.top
把 www.keijyu.top 作为主域名，配置了 CNAME → cname.vercel-dns.com
# 3.3 部署至XXX |🚀大陆访问
3.3.1 又拍云存储
3.3.2 Web缓存网
Web缓存网下的JS CDN服务(国内阿里云CDN加速) https://www.webcache.cn (opens new window) https://code.webcache.cn (opens new window) https://cdnjs.webstatic.cn (opens new window) https://lib.webstatic.cn (opens new window)
还没研究，之后有空搞一搞。。
# 3.4 多线部署
可以采用DNS进行分流，国内线路默认解析至又拍云存储CNAME地址，国外线路解析至Vercel提供的地址，之后研究一下。。
# 4. 评论系统
未来考虑加入，先占个坑。
# 5. 关于写作与推送
博文使用Typora，在相应文件夹下新增md文件开始写作即可。如果需要放入特定分类和加入标签，---生成yml表头，添加categories和tags属性。其余属性在build的时候Vdoing会自动生成。categories如果不设置我设置的默认值是未分类。
本地build与启动
//windows电脑用这个命令，从deploy.sh可知，这个命令会先build再启动服务器
npm run dev:win
2
GitHub推送
npm run deploy