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

TL;DR 文章速览

这是《AI帮我造博客》系列的第一篇。如果你也想搭个博客，又被那些"5分钟速成"教程坑过，比如能打开不等于能用，发文、上线一问三不知，那这个系列或许合你胃口。我会从技术选型讲到部署上线，每一步都交代清楚，也会讲一个零设计基础的人怎么靠 AI 辅助做出科幻风 UI。本篇不讲代码，先带你看成品，你再决定要不要往下读。

"我让 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 分钟）
• 科技风排版：段落、引用块、代码块都按深色主题做了定制

代码高亮

/// 代码块效果截图 ///

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

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

代码块的配色也是反复调过的。

侧边目录

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

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

目录会跟随滚动，始终留在视野内。超过 5000 字的长文，这个功能很实用。

图片与引用

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

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

为什么没有亮色模式？

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

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

移动端长什么样

手机端首页

/// 手机端截图 ///

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

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

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

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

手机端文章页

手机上阅读文章：

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

后台管理系统揭秘

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

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

Strapi 后台长什么样

/// Strapi 后台截图 ///

Strapi 是一个开源的 Headless CMS，后台就是一个功能齐全的内容管理系统：

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

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

怎么新建一篇文章

/// 文章编辑界面截图 ///

创建新文章很直观：

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

就好了。

怎么上传封面图

Strapi 有内置媒体库：

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

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

发布流程

写完点发布，前台自动更新。发现错误随时改，保存后自动同步。

自动化工作流

除了 Strapi 后台，我后来还搭了一套自动化工作流。现在我只需要在本地写 Markdown 文章，一条命令就能发布到远程服务器。

这套工作流做了这些事：

• 图片优化：自动检测待上传的图片，压缩并转成 WebP 格式，省带宽
• Lint 检查：检查文章的 Frontmatter、UUID、图片命名规范、死链、字数统计等
• 自动修复：发现问题后一键修复（图片重命名、更新引用、同步字数等）
• 同步上传：算出本地与远程的差异，自动批量上传新文章和图片

整个流程只要一条命令：

然后按提示操作即可。执行时的输出大概长这样：

这套工作流的具体实现可能会单独开一个系列来讲，因为涉及的东西比较多：本地文件扫描、元数据管理、API 对接、错误处理等等。本系列主要聚焦博客本身的搭建，这里就先提一嘴，感兴趣的可以持续关注博客更新。

用了什么技术

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

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

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

还有一条贯穿始终的线：每个环节我是怎么和 AI 协作的。

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

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

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

下一篇预告

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

这是个好问题。

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

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