零代码基础，我用 DeepSeek 和豆包手搓了一个全栈博客

nelsonzbs

243人浏览 · 2026-07-16 11:26:01

nelsonzbs · 2026-07-16 11:26:01 发布

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

提需求：用最直白的大白话，告诉它们我想要什么。
挑毛病：测试它们交付的东西，哪里不对，哪里不舒服，立刻指出来。
定方案：在它们给出的几个方案中，做最终决策。

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

我的“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>

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