added 发布了两篇文章
This commit is contained in:
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的调整,然后把之前的搜索文章逻辑进行复用,于是就有了现在的效果,做完,还美美的欣赏了一遍,别说忙,还真不错!
|
||||||
|
|
||||||
|
## 一些贴心的小功能
|
||||||
|
|
||||||
|
除了视觉上的调整,也加了两个实用的小功能:
|
||||||
|
|
||||||
|
* **昼夜切换**:对于像我这样喜欢深夜阅读的人来说,刺眼的白底黑字简直是“视力杀手”。加上这个切换按钮,是对眼睛最基本的尊重,你可以点击头像进行切换,也可以在其他页面通过工具栏进行切换昼夜模式,这里听取了一个博友的建议,改了昼夜切换的逻辑,默认第一次获取访客的深色模式状态,后续再根据访客的操作进行切换。
|
||||||
|
* **蕉太狼温馨提示**:在首页右下角加了一个小小的“蕉太狼”挂件。它会在早晨问好,深夜催睡。虽然只是简单的几行代码逻辑,但让博客多了一点“人情味”。
|
||||||
|
|
||||||
|
## 写在最后
|
||||||
|
|
||||||
|
其实做博客这么久,越来越觉得,**内容始终是核心,而样式只是容器**。
|
||||||
|
|
||||||
|
我们花时间去优化样式,不是无休止的折腾,而是为了让盛在里面的内容能以更优雅、更舒适的姿态呈现给读者。
|
||||||
|
|
||||||
|
这次的调整,算是一次小小的“大扫除”吧。看着焕然一新的小站,心里也觉得踏实了不少。希望你们也会喜欢这些细微的变化。
|
||||||
Reference in new issue
Block a user