AI帮我造博客（一）：零设计基础，我做出了这个科幻风博客

TL;DR（太长不看版）

现在到处都是这种文章：

"我让 AI 5 分钟生成了一个博客！"
"零代码！10 分钟搭好个人网站！"

老实说，这些文章没骗你，只需要给AI一句话，就能做一个博客网页。

但"能打开"和"能用"之间，差了十万八千里。

但做了一个看似能用的博客网页之后呢？

• 怎么发新文章？
• 数据存在哪儿？本地 Markdown 还是云端数据库？
• 想加个评论功能怎么办？想改个样式又怎么办？
• 怎么让搜索引擎收录？怎么绑定域名上线？

这些问题，那些 5 分钟教程都不会告诉你。

我这个系列文章不太一样，这个系列叫《AI帮我造博客》。

先放出我的博客地址：https://www.geyonder.com↗

我花了大半年时间，断断续续，用 AI 辅助，从零搭建了这个博客，整体效果我自己还算满意吧。

重点来了：我几乎没有设计基础，前端也只会点皮毛。

大学时候学过一点 HTML/CSS，毕业后就再没碰过。平时写的代码都是算法、后端、数据处理等。让我画个界面？抱歉，配色都能把人逼疯。

但你看到的这个博客，科幻风、响应式、有后台管理，是我在 AI 辅助下一点点磨出来的。

这个系列记录的是整个过程——不是"跑起来"，而是"用起来"。

从技术选型到前端实现，从后台 CMS 到服务器部署，从发布第一篇文章到让搜索引擎能找到它。

如果你只想"能打开"，那些 5 分钟教程足够了。

如果你想搭完之后知道发生了什么，这个系列适合你。

整个系列大概会这样走：

• 先看成果：本篇带你逛一圈，建立全局感
• 再讲为什么：为什么不用现成方案？架构怎么选？
• 然后讲怎么做：前端、后端、一步步拆解
• 最后讲上线：部署、域名、SEO，让博客真正跑起来

前几篇零门槛，谁都能看；后面逐渐深入，适合想动手的人。

但在讲"怎么做"之前，先带你看看"做出来了什么"。

这是「舸扬号」的首页。

它长得像一艘星际飞船的驾驶舱。

不只是博客，是一艘船

我叫舸扬，我给这个博客起名叫"舸扬号"（Geyonder），舷号 NCC-1701-D。

没错，就是向《星际迷航》致敬。

整个博客采用深色科技风设计，以全息蓝为主色调，配以霓虹金和警告橙作为点缀。背景是科技感网格和舰桥控制台界面，各处散落着 HUD（平显）装饰元素。

为什么要做成这样？

首先，是和我的名字呼应。

其次，是和我想要表达的理念呼应。博客不只是一个"放文章的地方"。它是我在信息洪流中的一艘船，每一篇文章都是航行日志，每一次更新都是一段新的航程。

说实话，这种风格以前我根本不敢想。

让一个配色恐惧症患者来设计科幻 UI？开什么玩笑。

但 AI 改变了游戏规则。

这不是简单的"让 AI 写代码"。我逐渐摸索出一套和 AI 协作的方法：

• 配色方案：我描述想要的"深空科幻感"，Claude 给我生成了色板，我再微调
• 动画效果：我用 Cursor 边写边问，AI 给建议、我来审
• 响应式布局：遇到问题截图给 AI，它帮我定位 CSS 哪里写错了

这种"人机协作"的模式，和那种"AI 一键生成然后就完事了"的路子完全不同。后者做出来的东西，你自己都改不动。

具体怎么做的？这个系列后面会详细讲——不只是技术，还有和 AI 协作的方法论。

现在先看看最终效果。

首页长什么样

首页不是传统博客那种"标题 + 文章列表"的简洁布局，而是一个沉浸式的舰桥界面。

顶部状态栏

页面最顶部是一条状态栏，显示：

• SYS.STATUS: ONLINE — 系统在线状态
• COORDS — 当前"坐标"（其实是装饰性的）
• VELOCITY: WARP 1.2 — 曲速速度

这些数据没有实际意义，纯粹是为了营造仪式感。

左侧：舰船状态面板

左侧边栏是一个"舰船状态面板"，展示核心数据：

右侧还有一个"分类分布"的统计模块，用可视化方式展示各分类的文章占比。

这个面板的设计灵感来自飞船驾驶舱的仪表盘——一眼扫过去，就能知道"船"的状态。

中间：任务简报（文章列表）

中间核心区域是"任务简报"，其实就是文章列表。

每篇文章以半透明卡片形式展示：

• 分类标签：左上角的彩色标签
• 发布日期：以"星历"格式展示
• 文章标题：主标题
• 字数统计：和预计阅读时间
• 内容简述：文章摘要

卡片边缘有微妙的发光效果，悬停时会有交互反馈。

右侧：声呐雷达与快速入口

右侧边栏有几个有趣的组件：

声呐雷达：一个动态旋转的雷达扫描 UI。纯装饰。

正在播放：显示当前背景音乐，想法是放我自己写的歌。（这个博客设计有背景音乐系统，不过本篇成文时还没做好...）

快速入口：

• PERSONNEL_FILE — 作者档案（关于我）
• PRIME_DIRECTIVE — 最高指令（博客宣言）

"最高指令"这个名字也来自《星际迷航》。在星舰联邦，最高指令是"不得干涉其他文明的发展"。在这个博客，最高指令是...额...你可以点进去看看。

底部：交互式分类控制台

页面最下方是一个拟物化的操作控制台。

五个分类按钮排列成控制台面板的样子：

这些按钮不只是导航，点击的手感设计得像在操作真正的物理按钮。

鼠标悬停时会有全息投影般的光效，点击时有触发反馈。

文章列表页长什么样

点击底部控制台的分类按钮，就会进入文章列表页。

如果说首页是舰桥，负责总览全局，那么这里就是飞船档案库。

• 头部设计：顶部是当前分类的巨大标题，带有扫描线扫描过的动态效果，背景隐约显示着该分类的编码。
• 卡片布局：文章卡片按时间轴垂直排列，去掉了首页那些复杂的仪表盘干扰，让视线更聚焦于标题和摘要。
• 标签筛选：左边有一个标签筛选器，用户可以根据标签快速筛选文章。

文章页长什么样

点击任意一篇文章，进入文章页。

整体阅读体验

文章页延续了舰桥风格，但更注重阅读体验：

• 超大标题区：背景带有模糊的舰桥透视感
• 阅读信息：明确标注字数（如 6373 字）和预计阅读时间（如 16 分钟）
• 科技风排版：段落、引用块、代码块都经过深色主题定制

代码高亮

作为技术博客，代码展示是刚需：

• 终端主题：代码块的显示模拟了终端的样式
• 语法高亮：与整体暗色主题融合
• 一键复制：代码块右上角有复制按钮
• 发光边框：代码块外围有微妙的光晕效果

代码块的配色也是反复调过的。第一版太刺眼，第二版对比度不够，第三版才勉强满意。这种细节调整，没有 AI 帮忙真的会疯。

侧边目录

文章页右侧有一个悬浮目录：

• 自动根据标题生成目录树
• 当前阅读位置自动高亮
• 点击可以跳转到对应位置

这个目录会跟随滚动，始终保持在视野范围内。

对于超过 5000 字的长文，这个功能非常实用。

图片与引用

文章中的图片带有发光边框，延续科技感。

引用块也做了定制样式，不是简单的灰色竖线，而是带有 HUD 装饰的引用框。

为什么没有亮色模式？

这个博客没有亮色/暗色模式切换按钮。

因为它只有暗色模式。

这是刻意的设计决策。

舰桥控制台就应该是暗色的。如果在深夜驾驶飞船穿越星域，驾驶舱突然变成刺眼的白色，那画面太违和了。

移动端长什么样

手机端首页

手机上的首页做了响应式适配：

• 左右边栏变成可折叠面板
• 文章卡片变成单列瀑布流
• 底部控制台变成更紧凑的按钮组
• 雷达等装饰元素适当简化

核心原则是保持氛围感的同时，不牺牲可用性。

移动端适配是我踩坑最多的地方之一。PC 上好看的布局，到手机上全乱套。这个后面大概率会出一篇专门讲踩坑经历。

手机端文章页

手机上阅读文章：

• 排版自动适配小屏幕
• 目录变成右下角的浮动按钮，点击展开
• 代码块支持横向滑动
• 阅读体验尽量接近桌面端

后台管理系统揭秘

写博客最怕的是什么？写完之后发布流程太复杂。

我用的是 Strapi 作为后台管理系统（CMS），让发文章变得像发微博一样简单。

Strapi 后台长什么样

Strapi 是一个开源的 Headless CMS，后台界面就是一个功能强大的内容管理系统：

• 左侧是内容类型列表（文章、分类、标签、系列……）
• 右侧是内容管理区域
• 支持富文本编辑、媒体管理、权限控制

后台不需要花哨，够用就行。

怎么新建一篇文章

创建新文章非常直观：

1. 点击左侧的"文章"
2. 点击右上角"Create new entry"
3. 填写标题、正文（支持 Markdown）
4. 选择分类、标签
5. 上传封面图
6. 点击"Publish"

就OK啦。

怎么上传封面图

Strapi 有内置媒体库：

• 拖拽上传图片
• 自动生成多种尺寸
• 统一管理所有媒体文件

上传后在文章里关联封面图字段就行。

发布流程

写完点发布，前台自动更新。

如果发现错误，随时可以修改，保存后自动同步。

用了什么技术

简单列一下这个博客的技术栈：

这套技术栈为什么这么选？每一个都有故事：

• 为什么不用 WordPress？
• 为什么选 Next.js 而不是 Vue？
• 为什么要自己搭服务器而不是用 Vercel？
• 前端那些科幻风 UI 是怎么实现的？

更重要的是，每个环节我是怎么和 AI 协作的：

• 技术选型时，AI 帮我做信息搜索和对比整理
• 写代码时，我和 AI "结对编程"，各司其职
• 遇到坑时，我学会了怎么给 AI 提供足够的上下文

这些问题的答案，都藏在这个系列接下来的文章里。

💡 系列定位：这不只是"教你搭博客"，更是"教你怎么和 AI 高效协作做项目"。每篇技术文章都会穿插我的 AI 协作经验。

下一篇预告

你可能会问：市面上有那么多现成的博客方案，WordPress、Notion、Hexo……为什么要花这么多时间自己从头造？

这是个好问题。

是因为省钱吗？不是，自己造反而更费时间。
是因为技术追求吗？有一点，但不只是。
是因为想要这种科幻风格吗？这只是结果，不是原因。

下一篇，我来聊聊我的"造轮子"理由。

航海日志

系列导航：

这是「AI帮我造博客」系列的第 1 篇。

• → 下一篇：为什么不用 WordPress？一个程序员的"造轮子"理由