当前位置: 首页 > news >正文

我用AI博客搭了个后台,运维人的 Dashboard 比公司那套还精致

大家好,我是老张。

半个月前写了篇《1.8GB 内存的 VPS,被扫了 600 次后,我给它装了套全自动反导系统》,讲我怎么给博客做安全防护——Nginx 堵门、Prometheus 盯梢、Alertmanager 自动封禁。

那篇写完有读者问:安全搞这么重,那博客本身的统计和管理呢?

问得好。其实搞完安全那套之后我就发现:光有"盾"不行,还得有"眼"——访客从哪来、用什么设备看、哪篇文章受欢迎、评论有没有人留——这些数据全得看 Nginx 日志,太麻烦了。

而且运维干久了有个职业病:什么东西都想有个 Dashboard。服务器要监控面板,数据库要慢查询看板,连家里的路由器都得装个 Grafana 看看流量。

所以当我用 AI 搭完博客之后,第一件事不是写文章,是给它写了个后台管理系统

不夸张地说,这个后台的统计维度,比某些 SaaS 产品还全。


📊 统计看板:运维人的"监控大屏"

打开后台第一眼就是仪表盘,8 个核心指标卡片一字排开:

  • 文章总数、已发布、草稿
  • 总浏览量、总独立访客
  • 今日访问量、今日访客
  • 评论总量 / 待审核

每个指标配上对应图标——火焰代表今日访问、眼睛代表浏览量、地球代表独立访客——一目了然。

下面是地区排行 Top10,横向条形图,四川访问量 290 一骑绝尘(毕竟服务器就在四川),河南、浙江、吉林紧随其后。

右侧是访问趋势折线图,PV 和 UV 双线对比,支持 7 天/30 天切换。哪天发了新文章、哪天被搜索引擎收录了,流量波动一眼能看出来。

image

 

再往下翻,统计维度越来越细:

访问来源分析——直接访问、搜索引擎、外部链接、站内跳转,4 条彩色进度条。还能看到外链来源 Top 排行,哪些站点给你导了流量,清清楚楚。

image

 

设备与浏览器分布——手机 vs 电脑占比、Chrome vs 微信 vs Safari 分布。我的博客 60% 是手机访问,知道这个数据之后,移动端适配的优先级直接拉满。

image

 

小时级访问分布——24 小时柱状图,告诉你读者什么时候在线。标题里还专门标注了"可参考选择发文时间",这就是产品思维。

发布日历——GitHub 贡献图风格,按月展示发文频率。哪天偷懒了,一眼就能看出来(目前还是空的,刚上线)。

分类统计——每个分类下多少篇文章、总阅读量多少。AI 工具 9 篇是绝对主力,故障案例 7 篇紧随其后。

标签统计 Top8——AI、Linux 云计算、Agent 智能体、Codex、Nginx、ChatGPT、DeepSeek……一眼就能看出这个博客在写什么。

还有热门文章榜,Top 3 用橙色序号高亮,配上阅读量;右侧是最近文章列表,绿色"已发布"标签清晰标注状态。

以上就不一一发图说明了


📝 内容管理:不只是 CRUD

左侧导航第二栏是"内容管理",展开 5 个子菜单:

  • 文章管理——列表 + 搜索 + 编辑,所见即所得
  • 分类管理——AI 工具、故障案例、国学经典
  • 标签管理——灵活打标,一篇文章可以跨多个标签
  • 评论管理——审核、回复、删除,邮箱选填降低评论门槛
  • 国学管理——专门给国学经典板块做的后台,书籍管理、章节编辑

这里有个细节:评论邮箱改成了选填,和国学板块保持一致。降低门槛之后,方便大家来评论观摩了


🔧 站点管理:不用改代码了

以前改个友情链接、换个页脚版权信息,得 SSH 上去改代码、重启服务。现在全部后台可视化配置

  • 站点配置——博客名称、博主简介、页脚版权号、备案号,改完前台实时生效
  • 友链管理——增删改查,前台自动渲染
  • 文件管理——上传图片、附件,不用再手动 scp

博客底部的备案号、博主简介侧边栏,都是从后台配置读的。代码里留了静态兜底——后台挂了也不影响前台展示。


🛡️ 系统管理:运维人的"安全三件套"

最底下是"系统管理",三个子菜单:

操作日志

每次访问都记一条日志:IP 地址、设备类型(手机/电脑 + 具体型号)、地理位置、访问页面、来源渠道、精确到秒的时间戳

设备识别不是简单的"移动端/PC 端"二分——能解析出 iPhone (iOS 26)AndroidMac 这种粒度。来源能区分"直接访问""站内跳转""www.google.com"。手机用绿色标签、电脑用蓝色标签,一眼区分。

这就是运维人的审计日志思维——谁、什么时候、从哪来、看了什么、用什么设备,一条记录讲清楚。

image

 

安全设置

MFA 二次验证(TOTP + 恢复码)。后台登录不光要密码,还得扫 6 位动态码。丢了手机?恢复码兜底。

微信 access_token 也做了加固——改用 stable_token 接口,彻底解决 40001 间歇性失效的问题。

订阅管理

邮件订阅列表,谁订了、什么时候订的、有没有退订,一清二楚。


💡 老张的评价

✅ 做得好的

  1. 统计维度完整——来源/设备/浏览器/小时/地区/趋势/日历/分类/标签/热门文章,10+ 维度,比 GA 还好理解
  2. 设计语言统一——深蓝渐变底、圆角卡片、线性图标、低饱和配色、斑马纹表格,整体风格克制且专业
  3. 运维思维贯穿——操作日志就是审计日志,安全监控就是堡垒机思维,Dashboard 就是监控面板
  4. 纯 AI 开发——全部用 DeepSeek + Codex/Trae 完成,0 手写 CSS

⚠️ 还差什么

  1. 搜索——文章多了之后,后台没有全局搜索,找文章靠翻页
  2. 数据导出——访问统计不能导出 CSV,想自己做二次分析没法弄

🤖 关于 AI 开发,我想说句题外话

这个后台,从后端接口到前端页面,从数据统计到 UI 样式,全程用 DeepSeek + Codex/Trae 开发,我一行 CSS 都没写

上次写过一篇《不用 cc-switch 了,DeepSeek 原生支持 Codex》,很多人问"原生支持到底能干啥?"——这就是答案。AI 现在能做的事,比你想象的多得多。


🎯 适合谁参考?

 

看到这里,我想问问:你的博客有后台吗?用什么搭的? 评论区聊聊。


🔗 技术参考

  • 开发工具:DeepSeek + Codex/Trae

📢 插播:上次的飞书告警,我已经填上了

上篇写完有读者问"什么时候接飞书通知?"——现在已经上线了。

就是这张图里的效果:

image

 

每次自动封禁,飞书机器人会第一时间推告警卡片到群里,包含:封禁 IP、告警级别、触发时间、详细说明。

写技术文章的好处就在这——说出去的话,相当于给自己立了个 TODO。读者会帮你记着,催你把坑填上 🙂


🚀 博客真站演示

说了这么多,这个后台现在已经在我的博客上跑着了: 👉 https://www.shanwaiyun.top/

有几个点我想特别说一下:

  • 前端也是 AI 写的——博客前台(你现在看到的这个网站)+ 后台管理系统,全部是 AI 生成的,我没写一行 CSS
  • 运维从 0 全栈——我是纯运维出身,以前只会写shell +Python脚本,不会写前端,更不会写全栈项目。这个项目从 idea 到代码,从部署到公网上线,全程 AI 辅助完成
  • 真的能用——不是 demo,是生产环境。现在我写文章、发评论、改配置,全在这个后台里操作

技术发展到今天,"不会前端就做不了全栈"这件事,已经不存在了。

对了,想看上篇《全自动反导系统》的,公众号就能看。两篇连起来读更有感觉:先装盾,再装眼,一个运维人的博客进化史 🙂


💬 再聊三个小问题

  1. 统计看板里你最看重哪个指标?我是"设备分布",知道读者用什么设备,移动端适配优先级就清晰了
  2. 操作日志你会保留多久?我设了 90 天自动清理,你们呢?
  3. 你觉得 AI 全栈开发的下一个突破点在哪?

 

http://www.jsqmd.com/news/1336106/

相关文章:

  • C++获取字符串最后一个单词长度的多种方法
  • ABAP屏幕设计:从SE51布局到流逻辑的完整开发指南
  • 楼盘漫游动画:让客户在5-20分钟里“走进”未来的家
  • 佛山管道疏通公司口碑**:2026年本地正规品牌综合对比与推荐 - 园子一号
  • Unity DOTS ECS架构实战:万鱼同屏性能优化与数据导向设计
  • 2026 上海房产分割律师收费标准,高性价比律师 / 团队怎么选推荐君澜孙青联系电话13681945561 - 孙青律师13681945561
  • 2026深圳家庭搬家全流程**指南:打包分类、楼层吊装、新家还原、预算测算完整手册 - 禧燕搬家
  • 小白程序员必看:收藏这份Data Agent进阶指南,轻松玩转大模型数据分析
  • GetQzonehistory:5分钟快速找回你的QQ空间青春记忆
  • 5个技巧掌握Buzz音频转录工具,工作效率提升300%
  • Windows 10登录失败:从紧急抢救到系统级修复的完整指南
  • 【制造业AI部署黄金72小时】:从PLC数据接入到MOM系统联动,一份经17家工厂验证的标准化实施Checklist
  • 高并发架构、AI硬件配置与智能系统开发实战解析
  • GlobeLand30全球地表覆盖数据:从下载到城市扩张分析的完整指南
  • 2026年近期地下室远红外防潮防霉系统实力企业推荐与选型指南 - 企业深度能力测评
  • AI Agent实战:从Agent Plan到Seedance 2.0的工程化探索
  • 2026 上海房产确权律师收费标准,高性价比律师 / 团队怎么选推荐君澜孙青联系电话13681945561 - 孙青律师13681945561
  • 网站建设确认单到底该怎么签才不吃亏?深度解析网站建设确认单的每一个细节与坑位
  • HC-06蓝牙模块从入门到实战:硬件连接、AT命令配置与Arduino编程全解析
  • 揭秘厦门市建设与管理局网站:查询办事指南与项目审批的全景指南
  • AI微博运营不是替代人,而是淘汰不会用AI的人——2024Q2行业人才能力图谱首发,你卡在第几层?
  • Congruence (Modular Congruence) – Basic Exercises with Answers
  • 夸克网盘自动化助手:智能转存与媒体库管理的终极解决方案
  • 2026深圳搬家避坑**合集:低价套路、隐形增项、黑搬家识别、定金退还完整实操方案 - 禧燕搬家
  • 2026年国内攀岩墙厂家行业权威评测:头部厂商实力榜单与选型指南
  • Unity粒子系统三步打造节日烟花特效:从基础爆炸到完整烟花秀
  • STM32-S266-TDS水质检测+红外感应+水量监测+保温常温+温度+灯光指示+定时提醒+定时开关+加热+防干烧+参数+OLED屏+声光提醒+(无线方式选择)-21(设计源文件+万字报告+讲解)(
  • DLMS/COSEM协议深度解析:从对象模型到安全实践
  • mcp-helm MCP 服务说明文档
  • DDS技术解析:从原理到实战,掌握现代信号源核心