hugo部署vercel踩坑记录

hugo和vercel都是什么?

hugo是一个静态博客框架, Vercel 是一个提供静态网站和 Serverless 函数部署的云平台,Vercel 提供了与 GitHub 的深度集成,你只需要通过几次点击就可以将你的 GitHub 项目部署到 Vercel 上, Vercel 提供了全球 CDN,可以确保你的网站在全球范围内都有优秀的加载速度。Vercel 提供了丰富的开发者工具,如 CLI 工具、集成的环境变量管理、日志查看等

第一坑 hugo皮肤下载和submodule

假如你不是自己去写皮肤模版,也不想用hugo默认的, 只想使用一些现成的模版, 你就想当然就themes目录下执行git clone 皮肤模版地址, 最好不要这么做, 因为你自己的博客项目也是git托管的, 你在一个git项目下再去克隆一个git项目,这其实形成了一个父子关系, 你会发现, 父级项目的git不会去追踪子项目的文件,其实也很好理解, 父应用只需要保存子应用的git地址, 这样两者可以解耦, 两个git项目互不影响, 这里可以执行以下这个命令

bash 复制代码
git submodule add https://github.com/username/theme-name themes/theme-name

这个命令执行完, 项目目录就是这个样子了

.submodules里面记录了子git项目的path和git托管地址

ini 复制代码
[submodule "themes/PaperMod"]
	path = themes/PaperMod
	url = https://github.com/adityatelange/hugo-PaperMod

第二坑 vercel打包是一堆xml文件

这个错误源自于皮肤模版没有正常加载所导致的, 我们需要override vercel的打包命令, 在vercel控制台点击设置 然后重新redeploy一下

第三坑 vercel hugo版本问题

假如第二坑还是没有解决的话可能就是vercel自身hugo版本的问题了, 在vercel中hugo不像node版本可以直接选择, vercel中的Hugo版本应该挺老的, 我们可以设置环境变量,我查了一下,现在最新版本是0.114.0

好了,可以再redeploy一下, 终于成功了

后言

以前不知道,vercel的功能的确很强大, 还可以继续挖掘更多的功能,假如还有部署方面的问题,可以评论区留言, 一起可以探讨一下。

相关推荐
Bigger1 天前
第三章:我是如何剖析 Claude Code 工具系统与命令执行机制的
前端·claude·源码阅读
GISer_Jing1 天前
告别手搓架构图!Excalidraw+AI Skills 高效绘制手绘风技术图
前端·人工智能·react.js
jiayong231 天前
第 7 课:第三轮真实重构,拆出新增任务弹窗
服务器·前端·重构
钛态1 天前
前端WebSocket实时通信:别再用轮询了!
前端·vue·react·web
爱学习的程序媛1 天前
浏览器内核揭秘:JavaScript 和 UI 的“主线程争夺战”
前端·性能优化·浏览器·web
你挚爱的强哥1 天前
欺骗加载进度条,应用于无法监听接口数据传输进度的情况
前端·javascript·html
zhensherlock1 天前
Protocol Launcher 系列:Mail Assistant 轻松发送 HTML 邮件
前端·javascript·typescript·node.js·html·github·js
恒本银河+1 天前
基于MQTT+NFC标签项目开发教程
前端·javascript·nfc标签
GISer_Jing1 天前
React 18+ 高级特性实战与面试精讲
javascript·react.js·面试
吴声子夜歌1 天前
ES6——异步操作和async函数详解
前端·ecmascript·es6