added 发布了两篇文章

This commit is contained in:
Vaica committed 2026-02-01 19:10:42 +08:00
1 parent 42b2a1f868
commit b681231ff7
2 files changed
+98 -52

No files matched your search

@@ -1,112 +1,106 @@
--- ---
title: Hugo博客部署腾讯云EdgeOne Pages的尝试 title: 我把Vercel换成了EdgeOne Pages
date: 2026-02-02T01:00:00.000Z date: 2026-02-02T01:00:00.000Z
draft: false draft: false
categories: categories:
- 尝试
- 技术 - 技术
- 碎碎念
tags: tags:
- Hugo - Hugo
- EdgeOne - EdgeOne
- CI/CD - Upyun
ai_comment: >- ai_comment: >-
哈哈,电子宠物这个比喻太真实了!我家的博客也整天被我折腾来折腾去,看到高清图片占满空间的经历简直感同身受。技术小白每次解决这种小问题都像打怪升级,EdgeOne这波安利吃得有点心动,脚本注释写得这么贴心,下次我也要抄作业试试~ 本文记录了博主将博客的境外加速服务从Vercel迁移至腾讯云EdgeOne Pages的过程。通过“境内又拍云 + 境外EdgeOne”的分流策略,不仅提升了海外访问速度,还实现了国内外双平台的稳定托管,体验相当丝滑。
--- ---
最近看到不少博友都在推荐腾讯云的 EdgeOne Pages,说是访问速度挺快,而且对个人博客这种静态站点很友好。想着自己这个小站平时也没少折腾,既然有更好的选择,那就试试看呗。 最近感觉 Vercel 虽然好用,但在国内或者部分亚洲地区的访问速度有时候还是不太稳定。前段时间油老师给我推荐了这个 EdgeOne Pages,今天有空试了试腾讯云新出的 EdgeOne Pages。
其实我对于运维这些也不是特别精通,就是喜欢捣鼓。这次迁移过程虽然遇到了一点小插曲,但好在最后都解决了。顺便把过程记录下来,给同样用 Hugo 搭建博客的朋友们做个参考。 听说 EdgeOne 的节点覆盖很不错,而且对个人开发者也有免费额度,于是心血来潮,决定把博客的境外加速线路从 Vercel 换成 EdgeOne。
## 为什么要换? ## 现在的部署方案
其实原来的部署方式也能用,但作为一个把博客当成"电子宠物"养的人,总想给来访的朋友们提供更好的体验。EdgeOne 主打的就是边缘加速,直白点说就是能让国内的朋友打开博客更快一点。而且它给的免费额度对于我们这种个人博客来说完全够用了。 为了保证访问速度和稳定性,我现在的策略是:
## 遇到的一个小插曲 * **国内(境内)**:继续用 **又拍云 (Upyun)**。老牌子了,国内节点多,速度快,用了很久一直很稳,没必要换。
* **国外(境外)**:换成了 **腾讯云 EdgeOne Pages**。用来替代 Vercel,主要负责港澳台和海外的流量。
刚开始在 GitHub Actions 上自动部署的时候,总是提示空间不足: 这样既能保证国内访客秒开,又能照顾到海外访问的体验,相当于搞了个“双保险”。
```text ## 迁移过程
Error: No space left on device
```
这就很尴尬了。后来发现是我以前上传图片太随意了,很多高清原图把空间占满了。于是先用脚本把图片都压缩成了 WebP 格式,给仓库"瘦身"了一下,这才顺利进行下一步。这也提醒我,平时维护博客还是要注意一下资源管理呀。 其实过程没有我想象的顺利,EdgeOne Pages 给我更多的感觉是一个半成品,很多功能还在完善中。
## 编写部署脚本 我看了支持的框架,还没有适配 Hugo,实际部署起来坑不少。我试了三次,用自定义配置也没跑通,老是报错。
为了让部署过程更稳定,也方便以后自己在本地测试,我没有直接把一堆命令写在 GitHub 的配置里,而是专门写了一个小脚本。 既然官方的构建环境不太稳,那我就把构建这一步放在自己手里。转变思路:**在 GitHub Actions 里构建好,然后直接把生成的静态文件推送到 EdgeOne Pages**。
虽然我代码写得一般,但加上注释后应该还是挺好懂的。这里把完整代码贴出来,大家如果有需要可以直接拿去用: ### 1. 准备一个部署脚本
**`scripts/deploy_edgeone.sh`** 参考一下其他博主的文档,以及询问豆包,下面分享我的思路。首先,在项目里加个脚本 `scripts/deploy_edgeone.sh`,利用 EdgeOne 的 CLI 工具来上传文件。
```bash ```bash
#!/bin/bash #!/bin/bash
# EdgeOne Pages 部署脚本 # EdgeOne Pages Deployment Script
# 1. 检查必要的环境变量 # 1. 检查环境变量
# 如果没有配置 API Token,就直接报错退出,防止后面瞎忙活
if [ -z "$EDGEONE_API_TOKEN" ]; then if [ -z "$EDGEONE_API_TOKEN" ]; then
echo "Error: EDGEONE_API_TOKEN is not set." echo "Error: EDGEONE_API_TOKEN is not set."
exit 1 exit 1
fi fi
# 2. 设置默认值 # 2. 设置默认值
# 如果没传参数,就用默认的 "hugo-blog" 作为项目名
PROJECT_NAME=${1:-"hugo-blog"} PROJECT_NAME=${1:-"hugo-blog"}
# 默认发布当前目录下的 public 文件夹
BUILD_DIR=${2:-"./public"} BUILD_DIR=${2:-"./public"}
echo "正在部署到 EdgeOne Pages..." echo "Deploying to EdgeOne Pages..."
echo "项目名称: $PROJECT_NAME" echo "Project: $PROJECT_NAME"
echo "发布目录: $BUILD_DIR" echo "Directory: $BUILD_DIR"
# 3. 执行部署命令 # 3. 执行部署命令
# 这里用 npx 来运行,这样就不用在电脑上专门安装 edgeone 的命令行工具了 # 使用 npx 运行 edgeone CLI,无需全局安装
# 也不用担心版本不兼容的问题,挺方便的
npx edgeone pages deploy "$BUILD_DIR" -n "$PROJECT_NAME" -t "$EDGEONE_API_TOKEN" npx edgeone pages deploy "$BUILD_DIR" -n "$PROJECT_NAME" -t "$EDGEONE_API_TOKEN"
# 4. 检查是否成功 # 4. 检查结果
# $? 代表上一个命令的退出状态,0 表示成功
if [ $? -eq 0 ]; then if [ $? -eq 0 ]; then
echo "太棒了,部署成功!" echo "Deployment successful!"
else else
echo "哎呀,部署失败了,快去检查一下日志吧。" echo "Deployment failed!"
exit 1 exit 1
fi fi
``` ```
## 配置自动化流程 ### 2. 配置 GitHub Actions
脚本写好了,最后一步就是告诉 GitHub Actions 每次我更新文章时自动运行这个脚本。 然后,在 `.github/workflows/deploy.yml` 里加上这一步。记得先去 EdgeOne 控制台生成一个 API Token,然后放到 GitHub 仓库的 Secrets 里(名字叫 `EDGEONE_API_TOKEN`)。
在 `.github/workflows/deploy.yml` 文件里,我是这样配置的:
```yaml ```yaml
# ... 前面的构建步骤省略了 ...
# 构建生成静态文件
- name: Build
run: rm -rf public && hugo --minify
# 部署到 EdgeOne Pages
- name: Deploy to EdgeOne Pages - name: Deploy to EdgeOne Pages
env: env:
# 这个 Token 记得去 GitHub 仓库的 Settings -> Secrets 里配好哦
EDGEONE_API_TOKEN: ${{ secrets.EDGEONE_API_TOKEN }} EDGEONE_API_TOKEN: ${{ secrets.EDGEONE_API_TOKEN }}
run: | run: |
# 给脚本加上可执行权限,不然运行不了
chmod +x scripts/deploy_edgeone.sh chmod +x scripts/deploy_edgeone.sh
# 执行脚本,传入项目名和目录
./scripts/deploy_edgeone.sh hugo-blog ./public ./scripts/deploy_edgeone.sh hugo-blog ./public
# ... 后面的步骤 ...
``` ```
## 小结 这样一来,每次我推送代码,GitHub Actions 就会自动把 Hugo 构建好的 `public` 文件夹推送到 EdgeOne,既省心又稳定。
看着 GitHub Actions 里的绿色对号亮起,心里还是挺舒坦的。现在博客访问起来感觉确实顺滑了一些。
折腾博客的乐趣大概就在这里吧,虽然过程中会遇到各种奇奇怪怪的问题,但解决问题后的那份满足感,还有能和博友们分享经验的快乐,是什么都比不了的。
如果你的博客也想试试 EdgeOne,希望这篇文章能帮到你。有问题欢迎在评论区留言,我们一起交流~ ### 关键的 DNS 设置
部署好之后,最关键的一步就是在域名解析里做分流。
我是在 dnspod 服务商那里这样设置的:
1. **默认线路(Default)**:CNAME 指向 EdgeOne 提供的域名。这样海外用户就会走 EdgeOne 的加速节点。
2. **境内线路(China)**:CNAME 指向又拍云的域名。这样国内用户依然走又拍云,速度不受影响。
## 体验总结
切过来,简单测试一下,整体感觉挺香的。
* **速度方面**:简单测了一下,海外节点的响应确实挺快,感觉比 Vercel 要稳一些。
* **管理方便**:毕竟是腾讯云的产品,控制台全中文,功能看着也直观。
总之,这次调整算是一次小小的升级吧,既保留了国内的优势,又补齐了海外的短板。对于像我这样喜欢把博客托管在静态服务上的朋友,EdgeOne Pages 确实是个不错的替代方案。
@@ -0,0 +1,52 @@
---
title: 周末闲暇时间翻修了一下博客
date: 2026-02-03T09:00:00+08:00
draft: false
categories:
- 碎碎念
- 博客日记
tags:
- Hugo
- 体验优化
ai_comment: >-
趁着周末,博主对博客进行了一次细致的“大扫除”。从毛玻璃风格的视觉微调,到极简搜索框的重构,再到移动端布局和打字机特效的适配,每一处改动都透着对阅读体验的细腻考量。还顺手请来了“蕉太狼”坐镇,让这个技术小站多了一份生活的温度。
---
这周末不用加班,人闲下来了,打开电脑,chorme浏览器键入 usj.cc ,简单看了一下博客的样式,有几处我还不是很满意。
怎么说呢,虽然一直都在用,但总感觉在一些交互细节和视觉呈现上,还有提升的空间。既然发现了问题,那就趁着有空,把这些“边边角角”打磨一下。
为了避免毫无意义的折腾,这次我并没有什么大刀阔斧的重构,只是做了一些修修补补的工作,希望能让来访的朋友(包括我自己)看着更舒服一点。
毕竟新年新气象,博客作为心灵的镜子,也需要“翻新”一下。
## 视觉上的“透气感”
之前的界面设计,色块感比较强,看久了难免觉得有些沉闷。
最近留意到一种叫 **Glassmorphism(毛玻璃)** 的设计风格,通过背景模糊和透明度,能营造出一种层次感。于是尝试着给顶栏和文章卡片加上了这种效果。
调整后的界面,背景若隐若现,整体视觉上轻盈了不少。就像是给窗户擦去了灰尘,通透感出来了,心情也跟着明亮了一些。
## 首页搜索框的“改造”
之前的搜索框,一直放在右下角作为工具栏存在,思来想去,还是感觉和整体的极简风格不太搭。
于是在蹲坑的时候,奇思妙想,我为何不放到随笔上,这样既能保证风格的简约,又能增加一个搜索文章的入口
就是简单CSS的调整,然后把之前的搜索文章逻辑进行复用,于是就有了现在的效果,做完,还美美的欣赏了一遍,别说忙,还真不错!
## 一些贴心的小功能
除了视觉上的调整,也加了两个实用的小功能:
* **昼夜切换**:对于像我这样喜欢深夜阅读的人来说,刺眼的白底黑字简直是“视力杀手”。加上这个切换按钮,是对眼睛最基本的尊重,你可以点击头像进行切换,也可以在其他页面通过工具栏进行切换昼夜模式,这里听取了一个博友的建议,改了昼夜切换的逻辑,默认第一次获取访客的深色模式状态,后续再根据访客的操作进行切换。
* **蕉太狼温馨提示**:在首页右下角加了一个小小的“蕉太狼”挂件。它会在早晨问好,深夜催睡。虽然只是简单的几行代码逻辑,但让博客多了一点“人情味”。
## 写在最后
其实做博客这么久,越来越觉得,**内容始终是核心,而样式只是容器**。
我们花时间去优化样式,不是无休止的折腾,而是为了让盛在里面的内容能以更优雅、更舒适的姿态呈现给读者。
这次的调整,算是一次小小的“大扫除”吧。看着焕然一新的小站,心里也觉得踏实了不少。希望你们也会喜欢这些细微的变化。