一个代码零基础的中年人，想从零搭建一个全栈博客，需要多久？

我的答案是：两个 AI，无数个深夜，和一杯接一杯的咖啡。

我是谁？年轻时创业过，打工打到中年的普通男人。我的简历上没有“软件工程师”这几个字，我的电脑里只有一个编辑器还几乎没用过的——VSCode 编辑器。但我有一个挥之不去的念头：我想要一个完全属于自己的博客。

不是那种在第三方平台注册一个账号，套个模板就完事的那种。而是从域名到服务器，从前端界面到后端数据库，从每一行代码到每一张图片，都由我说了算的那种。

我要它的颜色是咖啡和茶泡出来的温暖，我要它的语气是一个中年人在深夜键盘前最真实的自言自语。它的名字我都想好了——《盏间小记》，Cups Note。

想法很丰满，现实很骨感。前端 Vue 3、TypeScript、后端 Express、MySQL、JWT 鉴权、Nginx 配置……每个概念对我来说都像天书。

但最后，我真的做出来了。

不是因为我突然学会了编程，而是因为我找到了两个搭档：DeepSeek 和豆包。 豆包是我的私人助理；DeepSeek 是我的全栈设计工程师。

这篇文章，就是我这个零基础小白，用 AI 手搓全栈博客的全过程。没有高深的理论，只有真实的踩坑、沟通、纠错，和最终那个令人欣慰的“小锁”亮起的时刻。

如果你也想拥有一个属于自己的网站，却卡在了“我不会写代码”这一步，那么，这个故事就是为你准备的。

我的“AI 开发团队”，是如何组建的

你可能好奇，一个零基础的人，怎么指挥两个AI干活？它们到底做了什么，我又做了什么？

其实没那么玄乎。我把整个博客开发想象成装修一套房子。我是业主，负责提需求、做决策、把控最终效果。而我的两个AI搭档，就是我的助理和开发工程师。

豆包，是我的“私人助理”

它会把我想要做的事情，通过我的大白话进行系统解读，并生成专业的术语，让我直接能复制给DeepSeek我的全栈设计工程师。

DeepSeek，是我的“全栈工程师”

 它负责将我助理给出的命令逐步的完成数据库的创建以及前后端的开发所有的详细步骤。

而我呢？我成了世界上最挑剔的“甲方”——产品经理。我的工作只有三件事：

1. 提需求：用最直白的大白话，告诉它们我想要什么。

2. 挑毛病：测试它们交付的东西，哪里不对，哪里不舒服，立刻指出来。

3. 定方案：在它们给出的几个方案中，做最终决策。

这个“铁三角”组合一旦形成，神奇的事情就开始发生了。

我的“AI开发团队”，正式开始工作

在正式开始开发之前，我做了一件所有“甲方”都会做的事——列需求清单。虽然我不懂代码，但我很清楚自己要什么。

我把所有想法都告诉了豆包，要求它帮我整理成一份专业的、可以直接发给DeepSeek的技术指令。这份清单包含三件事：

第一件事：硬性技术指标

我把我要用的工具和技术栈一条条列了出来：

• 前端：Vue3 + TypeScript + Vite 脚手架，样式统一使用 SCSS

• 后端：Express + TypeScript，样式统一使用 SCSS

• 数据库：MySQL 8.0，使用 MySQL Workbench 进行数据库的创建与管理

• 编辑器：VSCode

我不懂这些技术细节，但我知道我需要一个前后端分离的现代化博客。这些硬指标，是后面所有开发工作的地基。

第二件事：博客的类型

我明确告诉豆包，我要的不是一个简单的展示页面，而是一个完整的博客系统。它必须包含两部分：一个负责后端 API 的 Server (Express+TS) 服务器端，和一个负责前端界面的 Project (Vue3+TS+Vite) 项目端。

第三件事：产品经理的详细需求

这是我花时间最多的地方。我用最直白的大白话，给豆包列了一份“甲方需求书”：

• 后台需要文章管理、相册管理、关于页管理、友链管理等功能。

• 前台需要文章列表、文章详情、相册展示、关于页。

• 整个博客的视觉风格，后台要复古杂志风，前台要茶咖烟火气——温暖、松弛、有烟火气。

• 还有一个我非常坚持的点：不依赖任何第三方 UI 插件，所有组件全部自研。 这是我的倔强，也是我作为“甲方”的品味。

我把这些全部告诉豆包后，对它说了最关键的一句话：

请帮我对 DeepSeek 专家模式逐步下达详细清晰的指令，来完成该博客的开发工作。我希望整体开发顺序如下：数据库创建 - 服务端开发 - 项目端开发 - 调试 - 完善优化 - SEO 调整 - 部署上线准备 - 使用宝塔面板部署。请一次性输出完整指令手册。

几分钟后，豆包给我生成了一个让我惊掉下巴的东西——《零基础全栈博客开发 · DeepSeek 专家模式完整指令手册》。这份手册，就是我接下来所有开发工作的“施工图纸”。如图所示：

然后将手册里面的内容直接复制给到你的全栈工程师DeepSeek（模式一定是专家模式-点亮深度思考）。你的全栈工程师就正式开始工作了。如图所示：

两个经典战役：从“搭架子”到“堵漏洞”，AI 如何帮我搞定一切

光说不练假把式。下面我就用两个真实的开发案例，来展示我们这个“铁三角”到底是怎么工作的。

案例一：从零开始，搭一个“前后端分离”的骨架

我向豆包提需求（大白话）：

我是谁，我想给自己开发一款博客网站。需要你教我使用DeepSeek专家模式，将博客开发出来。前提是我不会开发。但是对开发还是有一些基础要求。

豆包帮我生成了《零基础全栈博客开发 · DeepSeek 专家模式完整指令手册》，我直接复制给DeepSeek。因为涉及我博客的具体内容，这里仅截屏部分内容，请谅解。

DeepSeek 给出了一个极其详细的步骤清单，包括：

• 如何用Vite创建Vue3 + TS前端项目

• 如何初始化Express + TS后端项目

• 前后端项目的标准目录结构

• 如何配置代理解决跨域问题

我的“甲方”反馈：

我看不懂这些目录是干啥的，但看起来很专业。就按这个来吧。

结果：半小时后，我的VSCode里有了两个完整的项目文件夹，前端能跑出一个默认页面，后端也能启动监听3000端口。虽然页面上还什么都没有，但骨架已经搭好了。

这个案例的关键：对于一个零基础的人，最难的不是写代码，而是不知道从哪里开始。AI帮你解决了“第一步”的迷茫，用结构化的指令手册，让你知道下一步该做什么。

案例二：一个头疼的 Bug，和一次“盲人摸象”式的修复

我向豆包描述问题（大白话）：

我发现个问题。我在网站首页浏览，什么都没做，只是刷新了一下页面，结果它就自动跳到后台登录页去了！这是为什么？我又没点登录按钮。

豆包帮我翻译后的指令（技术排查）：

请排查并修复一个登录鉴权相关的Bug。问题描述：用户在前台首页（非管理页面）刷新浏览器时，页面会自动重定向到后台登录页。预期行为：前台页面刷新后应停留在当前页，不应触发登录跳转。请检查请求拦截器中的401响应处理逻辑，判断是否对公开页面（如首页、文章页）的API请求也错误地执行了登录跳转。

DeepSeek 的回复（给出了具体的代码修改）：

DeepSeek 迅速定位了问题：是前端Axios请求拦截器中，对401状态码的处理逻辑有漏洞。它没有判断用户是否已经登录，只要遇到401就跳转到登录页。修复方案是：增加一个判断，只有当用户已经登录且token过期时，才执行跳转；公开页面的正常401请求（如无token访客浏览），应静默忽略。

// 响应拦截器：根治 401 误跳问题
instance.interceptors.response.use(
  (response) => {
    // 正常处理...
  },
  (error) => {
    if (error.response?.status === 401) {
      // 关键判断：只有当前浏览器中存在 token 时，才认为“登录已过期”
      const token = getItem("token");
      if (token) {
        clearAll();
        window.location.href = "/cupsnote_nelsonzbs?redirect=...";
      }
      // 如果不存在 token，说明用户根本没登录，401 是预期内的，静默忽略
    }
    return Promise.reject(error);
  }
);

我的“甲方”反馈：

原来是这样！按你说的改完，真的不会乱跳了！这感觉就像我头疼，你告诉我不是脑袋有问题，是帽子戴歪了，扶正就好。

结果：Bug 被完美修复，前台刷新不再乱跳登录页。

这个案例的关键：零基础开发者最怕的就是 Bug。以前你可能需要花一整天去百度、看文档、问人，但现在你只需要把现象描述清楚，AI 就能帮你定位根因并给出修复方案。你不是在修 Bug，你是在给AI描述一个谜题。

这两个案例，一个是从0到1的创造，一个是从1到10的优化。但它们都遵循同一个模式：我负责发现问题，豆包负责翻译问题，DeepSeek负责解决问题。 我写的代码量为0，但我做的决策、挑的毛病、定的方案，决定了这个博客的最终模样。

最惊险的一跃：备案之路，AI 陪我踩过的那些坑

代码写完了，页面好看了，功能也跑通了。但这一切，都只是在我自己的电脑上。

要让全世界看到“盏间小记”，我必须把它部署到服务器上，并且完成备案。对于我这种零基础的人来说，域名、DNS、Nginx、SSL证书、安全组、备案号……每一个名词都像一座山。

HTTPS与小锁——“我得有个安全认证”

域名能访问了，但浏览器地址栏显示的是“不安全”。这不行，我的博客必须有那个小锁。

我的大白话需求：

我的网站访问时，浏览器说不安全，我想要那个小锁标志。听说要申请SSL证书，怎么搞？免费的那种就行。

豆包翻译后的指令：

请指导我为域名申请免费的SSL证书并配置HTTPS。当前环境：宝塔面板，Nginx。目标：全站启用HTTPS，HTTP自动跳转HTTPS。请给出具体步骤。

DeepSeek的回复（给出了完整流程）：

• 在宝塔面板“网站”设置中，点击SSL，选择Let's Encrypt，一键申请。

• 申请成功后，开启“强制HTTPS”。

• 确认Nginx配置中443端口已监听。

但我遇到了真正的困难：

我点了申请，但一直失败。后来发现宝塔面板的‘网站’页面根本打不开，怎么办？

DeepSeek立刻切换方案：

既然宝塔UI不可用，我们通过命令行申请。请SSH连接到服务器，执行以下命令安装acme.sh并申请证书……

在AI的指导下，我一步步执行命令行，终于看到了那个小锁。下面这段Nginx配置，就是DeepSeek帮我写出来的——我看不懂每一行的意思，但我知道，有了它，HTTP才会自动跳转到HTTPS，小锁才会亮起来。

# Nginx 配置：HTTP 自动跳转 HTTPS
server {
    listen 80;
    server_name cupsnote.com www.cupsnote.com;
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl http2;
    server_name cupsnote.com www.cupsnote.com;
    ssl_certificate /path/to/fullchain.pem;
    ssl_certificate_key /path/to/privkey.pem;
    # ... 其他配置
}

备案号——“我得合法经营”

有了小锁，还差最后一样东西：备案号。

我的大白话需求：

ICP备案通过了，我有备案号了。但怎么把它挂到网站上？还有公安联网备案怎么搞？

DeepSeek的回复：

• 给出了修改页脚组件的具体代码，添加带链接的ICP备案号。

• 给出了公安联网备案的详细申请步骤。

<!-- 页脚备案号展示（WebLayout.vue） -->
<div class="tc-footer-links">
  <router-link to="/about">本站声明</router-link>
  <span class="tc-separator">|</span>
  <router-link to="/sitemap">网站地图</router-link>
  <span v-if="beian" class="tc-separator">|</span>
  <a v-if="beian" href="https://beian.miit.gov.cn/" target="_blank">
    {{ beian }}
  </a>
</div>

结果：页脚出现了备案号，点进去能跳转到工信部网站。公安备案也提交了，等待审核。“盏间小记”终于成了一个合法合规的个人博客。

授人以渔，也授人以鱼

写到这里，我想停下来，和你分享一些真正重要的东西。

这篇文章不是一篇炫耀贴。我写它，是因为我真心觉得，这个世界上应该多一些人，拥有属于自己的角落。

如果你也动心了，想把“我想有一个博客”这个念头变成现实，那么在出发之前，我想把我这几个月来，和AI协作最核心的四条心法送给你。

第一条铁律：把需求说人话，别装懂

你不需要去背什么技术术语。你想让导航栏是暖棕色的，你就说“像早上刚冲好的咖啡那种暖棕色”。你想让页面有呼吸感，你就说“别太挤，像杂志排版一样留点白”。

你的大白话，就是最好的需求文档。 AI是翻译官，但你是那个知道自己想要什么的人。

第二条铁律：把报错当谜题，别慌

红色报错出现的时候，我知道那种心慌。但请相信我，你不需要看懂它。你只需要做一件事：截图，复制，粘贴给AI。

然后告诉AI：“我在点这个按钮的时候，弹出了这段红字，帮我看看怎么回事。”

你把谜题丢给它，它来解。你的角色是侦探，不是法医。

第三条铁律：一次只解决一个问题

不要一口气说“帮我做一个完整的博客”，你会被它返回的海量信息淹没。你应该说：“先帮我搭一个能跑起来的空白页面。”搞定后再说：“在导航栏里加上首页、关于两个链接。”

一次一个问题，解决一个再继续。这就是我在前面提到的——渐进式开发。它不酷，但它有用。

第四条铁律：你永远拥有最终决定权

AI 给出了方案，选择权在你。AI 写好了代码，测试权在你。它说“这个颜色是最优解”，你可以说“我不喜欢，换一个”。

工具永远不能替你做决定。 博客的灵魂，是你一句一句挑出来的，不是它一行一行写出来的。

最后，我想讲一个瞬间

说了这么多技术、方法、指令，其实整个过程中，最让我难忘的不是某个Bug被解决，也不是那个小锁终于亮起来。

是一个深夜。

我记得很清楚，那天我把“建站日期”那个功能调通了。我在后台填了一个日期，然后刷了一下首页，滑到最底部——那里多了一行字：

“自 2026.07.03 起，盏间小记开门迎客，茶和咖啡都有。”

就那一行小字，我盯着看了很久。

不是因为技术有多难，而是因为，我突然意识到，这个角落真的存在了。它不是某个平台上的一个账号，不是某个模板套出来的页面。它是我，一个字一个字，一个按钮一个按钮，亲手搭建出来的。

是我自己的地方。

所以，如果你也有那么一个挥之不去的念头——想记录点什么，想表达点什么，想在这个喧嚣的互联网上有一块自己的角落——我想对你说：

现在就可以开始了。

你不需要懂代码。你只需要知道自己想要什么，然后找到你的“老伙计”。剩下的，就是一次一次地提需求、挑毛病、定方案，直到那个深夜来临，你滑到页脚，看到那行属于你自己的字。

关于作者

中年老登，大学毕业后创业失败，目前打工，女儿的父亲。喜欢咖啡和茶，有一肚子话想说，但不想发在朋友圈。于是，自己手搓了一个博客。

如果你想看看这个博客长什么样，或者想找个角落坐坐，欢迎来「盏间小记」：
https://cupsnote.com

茶和咖啡都有，故事慢慢讲。