白天跟继电器、变频器和梯形图打交道，晚上却想把日子过在互联网上——于是有了你眼前这个小站。
这是本博客的第一篇文章。它既是一份开篇致辞，也是一份完整的"建站报告"：这个站长什么样、用了什么技术、踩了多少坑、以后打算写什么。如果你也是从工控行业跨界折腾出来的，或者纯粹好奇一个博客是怎么诞生的，往下读就对了。
一、这个站，为什么而建
动机其实很朴素：
- 知识需要沉淀。工控这行，经验散落在无数个调试夜晚里——某次通讯故障的最后排查思路、某个传感器选型的坑、某段梯形图的巧妙写法。写下来，才真正属于自己。
- 表达需要出口。朋友圈太碎，知乎太卷，不如自己圈一块地，想写什么写什么。
- 顺便学点新东西。Web 前端、云部署、API 接入——对一个天天跟工业协议打交道的人来说，这套互联网技术栈新鲜又好玩。
于是就有了这个站：骏 の 工控小站。
二、小站长什么样
先带你逛一圈。整个站点是毛玻璃拟态风格——半透明磨砂卡片悬浮在暗夜背景之上，配紫色霓虹点缀，白天黑夜两套主题自动切换。
首页从上到下依次是：
- 昼夜轮换背景：三张手挑的暗黑二次元背景图，每天不同时段自动切换；
- 天气卡片：接入和风天气 API，实时显示东莞的晴雨温度——数据每十分钟刷新一次；
- 音乐播放器：接了网易云音乐，现在循环着 33 首歌，从粤语金曲到华晨宇应有尽有；
- AI 猫娘：右下角那只"煤球"，接的是小米 MiMo 大模型，傲娇人设，会陪你聊天；
- 说说/杂谈/文章/相册/友链：内容模块一应俱全。
每篇文章底部还有 Gitalk 评论系统——用 GitHub 账号登录就能留言，所有评论存在我仓库的 Issues 里，永久保存。
三、技术栈拆解：这个站是怎么跑起来的
作为一个工控人，我最关心的就是"系统架构图"。这个站的架构，画出来大概是这样：
┌─────────────────────────────────────────────┐
│ 你的浏览器 │
│ https://www.junjun.site │
└───────────────────┬─────────────────────────┘
│ HTTPS
┌───────────────────▼─────────────────────────┐
│ Vercel（全球边缘网络托管） │
│ Next.js 16 + React 19 + Tailwind CSS 4 │
│ │
│ 页面渲染 │ API 路由： │
│ │ /api/weather → 和风天气 │
│ │ /api/chat → 小米 MiMo │
│ │ /api/music → 网易云+本地缓存 │
└───────────────────┬─────────────────────────┘
│ git push 自动部署
┌───────────────────▼─────────────────────────┐
│ GitHub 仓库 blog-junjun │
│ （源码 + Markdown 文章 + 图片资产） │
└───────────────────┬─────────────────────────┘
│ 本地写作
┌───────────────────▼─────────────────────────┐
│ 本地控制台（my-blog-manager） │
│ FastAPI 后端 :8300 + 管理前端 :8400 │
│ 写文章 → 发布 → 同步 → 一键推送上线 │
└─────────────────────────────────────────────┘
几个关键角色介绍一下：
技术在这个站里干的事Next.js 16 / React 19前端框架，页面服务端渲染，首屏快Tailwind CSS 4样式方案，毛玻璃效果全靠它FastAPI (Python)本地控制台的后端，管文章草稿、图床、音乐Vercel免费的网站托管，git push 后全自动部署GitHub代码仓库 + 评论存储 + OAuth 登录和风天气 / 小米 MiMo / 网易云天气、AI 聊天、音乐三件套
文章本身是纯 Markdown 文件，带 YAML 头信息（标题、日期、标签、封面），躺在仓库的 posts/ 目录里。每篇文章在服务端渲染成 HTML，支持代码高亮、表格、数学公式（KaTeX）和任务列表。所以你现在看到的排版，本质上是"写代码一样地写文章"。
四、建站路上踩过的坑
没有一帆风顺的调试，正如没有一次点亮的 PLC。记录几个印象最深的坑，给后来人排雷：
坑一：*.vercel.app 域名在大陆被墙。
网站在 Vercel 上部署完，兴冲冲用手机打开——打不开。排查发现是 DNS 污染：域名被解析到了一个毫不相干的 IP。解决方法是花钱（也就九块钱）买了个自己的域名 junjun.site 绑上去，国内裸网直连畅通。
这就跟现场调试一样：现象看起来是"没反应"，实际根因往往在你看不见的地方——比如 DNS。
坑二：本机代理的"幽灵端口"。
推送代码到 GitHub 时屡屡报 502，一度以为是节点坏了。最后发现是系统环境变量里残留着一个早已失效的旧代理端口，真正的代理端口是 7897。环境不干净，什么命令都会跑偏——这教训在工控现场同样适用：接地不良，仪表全飘。
坑三：Gitalk 登录报 redirect_uri 不匹配。
GitHub OAuth 应用对回调地址的校验是精确匹配，文章页路径 /about、/posts/xxx 都会被拒。解决：在 OAuth 应用里开启"通配符匹配"。另外 OAuth 的 Client Secret 绝不能提交到代码仓库里，我把它放进了服务端环境变量，由 API 路由在运行时注入。
坑四：网易云音乐的外链限制。
网易云对未授权歌曲会直接锁掉外链（302 跳转到 404）。所以歌单里的每一首歌都是实测过外链可播才加进来的，另外做了本地缓存兜底——就算网易云接口被限流，歌名、封面、歌词照常显示。
五、以后打算写点什么
规划了几个方向，欢迎按兴趣追更：
- 工控技术笔记（主力）：PLC 编程技巧、变频器调试、传感器选型、Modbus/Profinet 通讯排障、组态软件使用心得——把自己踩过的坑变成别人的捷径；
- 跨界折腾记录：像这篇一样，记录把博客、 homelab、小工具从零搭起来的全过程；
- 读书与随想：偶尔写点非技术的，防止大脑只剩下梯形图语法；
- 说说与杂谈：短平快的日常碎片，会发在"说说"页面，不动笔写长文的时候也在更新。
六、图片是怎么放进文章的
既然是"图文并茂"的教学文，顺手讲讲本站图片的工作流。本站的图片有两条通道：
通道 A：本地图库（默认，推荐）
把图片丢进项目的 public/images/ 目录，文章里这样引用：
控制台的编辑器里点"上传图片"按钮，没配图床时会自动走本地通道——图片直接存进博客目录，跟文章一起随 git 发布，永不失效。
通道 B：图床外链（可选进阶）
图片多了不想撑大仓库时，可以配一个「兰空图床」（Lsky Pro）：控制台设置页填入图床地址和 Token，之后上传的图片自动变成外链 URL。详细的注册配置步骤，我单独写了一份《图床使用指南》，放在项目根目录，需要时照着做就行。
经验法则：单张图控制在 2MB 以内（本站文章配图都压缩过，300KB 左右），文件名用英文，重要截图首选本地通道。
七、一篇文字的诞生之旅
最后走一遍完整流程，你会发现写博客这件事已经被我自己"自动化"了：
① 双击「启动控制台.bat」→ 三件套服务就位
② 浏览器自动打开控制台 → 新建文章
③ Markdown 编辑器里写作，随手拖图上传
④ 保存草稿（可写一半睡觉去，不丢）
⑤ 点「发布」→ 点「同步」→ 文章进入博客目录
⑥ 双击「发布.bat」→ git 推送
⑦ Vercel 检测到推送 → 90 秒后全球上线 ✅
从按下"发布"到地球另一端能访问，只要一分半钟。这种"写完即上线"的爽感，堪比梯形图下载完、电机按照你写的逻辑稳稳转起来的那一瞬间。
尾声
博客这东西，八成会烂尾——网上这么说的人很多。但我想，烂尾的反义词不是坚持，而是把每一次想写的话都真的写下来。
如果这篇开篇文章有幸被你读到，欢迎在评论区留个脚印——用 GitHub 账号登录就能评论，你的留言会永久存在我的仓库里。
小站已上线，灯已点亮，信号已导通。
RUN 灯常绿，我们下篇文章见。 🚀