type
Post
status
Published
date
Feb 6, 2026
slug
webstack-3
summary
利用 GitHub Actions，搭建一条全自动化的“图标生产流水线”。
tags
开发
建站
category
技术分享
icon
password
前情提要：
- [第一集]：我受够了手动下载图标的累，也受够了在线引用图标的 404 报错。
- [第二集]：我用 Python 把本地图标全部转成了 WebP，项目体积暴瘦 90%。
虽然 WebP 很香，但我不想每次加网站都手动跑脚本。我的终极梦想是：只管填网址，剩下的交给机器人。
今天，我们来完成这最后一块拼图：利用 GitHub Actions，搭建一条全自动化的“图标生产流水线”。
💡 核心思路：CI/CD 的降维打击
通常大家理解的 CI/CD 是用来跑测试、发版本的。但我拿它来抓图。
我的构想是这样的：
- 我在
webstack.yml里填入新网址（例如https://weibo.com），logo留空。
- git push 提交代码。
- GitHub 的服务器自动醒来，运行我的 Python 脚本。
- 脚本自动去 Google 抓取
weibo.com的图标，转成 WebP，存入文件夹。
- 脚本自动把
webstack.yml里的logo字段填好。
- GitHub Action 自动把这些改动提交回仓库。
这一套下来，我只需要填链接 -> 提交，剩下的全是自动挡。
🛠️ 第一步：编写“抓图工人” (Python)
我们需要一个能干脏活累活的脚本。
在项目根目录下新建
scripts/auto_favicon.py。这个脚本集成了三个功能：解析 URL、调用 Google API 下载、Pillow 转码 WebP。
Python
(注：别忘了在
scripts/requirements.txt 里加上 PyYAML, Pillow, requests)⚙️ 第二步：雇佣“监工” (GitHub Action)
脚本写好了，我不希望自己在本地跑，我要让 GitHub 帮我跑。
新建
.github/workflows/auto-icon.yml：YAML
🎉 最终体验：这就叫“躺平”
现在，我的操作流程变成了这样：
- 打开
webstack.yml，随便加一行：
(Logo? 不用填，甚至不用管)
git push。
- 关机，睡觉。
几分钟后，手机弹出 GitHub 的通知，告诉我构建成功。
此时打开我的导航站：图标已经有了，而且是压缩好的 WebP 格式，加载速度飞快，控制台干干净净，全是绿色的 200 OK。
📝 系列总结
从最开始的手动下载（累），到后来的在线链接（慢、404），再到最后的自动化流水线（爽）。
折腾这个导航站的过程，其实就是一次微型的技术架构演进。
- WebP 解决了性能问题。
- Google API 解决了资源获取问题。
- GitHub Actions 解决了人力维护问题。
现在，我终于拥有了一个秒开、零维护、高颜值的导航站。
这，才叫优雅。☕️
(系列完)
- 作者:Leisurelywolf
- 链接:https://blog.869669.xyz//technology/webstack-3
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。
相关文章
