零代码基础,我用 DeepSeek 和豆包手搓了一个全栈博客
一个代码零基础的中年人想从零搭建一个全栈博客需要多久我的答案是两个 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 (ExpressTS) 服务器端和一个负责前端界面的 Project (Vue3TSVite) 项目端。第三件事产品经理的详细需求这是我花时间最多的地方。我用最直白的大白话给豆包列了一份“甲方需求书”后台需要文章管理、相册管理、关于页管理、友链管理等功能。前台需要文章列表、文章详情、相册展示、关于页。整个博客的视觉风格后台要复古杂志风前台要茶咖烟火气——温暖、松弛、有烟火气。还有一个我非常坚持的点不依赖任何第三方 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。目标全站启用HTTPSHTTP自动跳转HTTPS。请给出具体步骤。DeepSeek的回复给出了完整流程在宝塔面板“网站”设置中点击SSL选择Lets 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 classtc-footer-links router-link to/about本站声明/router-link span classtc-separator|/span router-link to/sitemap网站地图/router-link span v-ifbeian classtc-separator|/span a v-ifbeian hrefhttps://beian.miit.gov.cn/ target_blank {{ beian }} /a /div结果页脚出现了备案号点进去能跳转到工信部网站。公安备案也提交了等待审核。“盏间小记”终于成了一个合法合规的个人博客。授人以渔也授人以鱼写到这里我想停下来和你分享一些真正重要的东西。这篇文章不是一篇炫耀贴。我写它是因为我真心觉得这个世界上应该多一些人拥有属于自己的角落。如果你也动心了想把“我想有一个博客”这个念头变成现实那么在出发之前我想把我这几个月来和AI协作最核心的四条心法送给你。第一条铁律把需求说人话别装懂你不需要去背什么技术术语。你想让导航栏是暖棕色的你就说“像早上刚冲好的咖啡那种暖棕色”。你想让页面有呼吸感你就说“别太挤像杂志排版一样留点白”。你的大白话就是最好的需求文档。AI是翻译官但你是那个知道自己想要什么的人。第二条铁律把报错当谜题别慌红色报错出现的时候我知道那种心慌。但请相信我你不需要看懂它。你只需要做一件事截图复制粘贴给AI。然后告诉AI“我在点这个按钮的时候弹出了这段红字帮我看看怎么回事。”你把谜题丢给它它来解。你的角色是侦探不是法医。第三条铁律一次只解决一个问题不要一口气说“帮我做一个完整的博客”你会被它返回的海量信息淹没。你应该说“先帮我搭一个能跑起来的空白页面。”搞定后再说“在导航栏里加上首页、关于两个链接。”一次一个问题解决一个再继续。这就是我在前面提到的——渐进式开发。它不酷但它有用。第四条铁律你永远拥有最终决定权AI 给出了方案选择权在你。AI 写好了代码测试权在你。它说“这个颜色是最优解”你可以说“我不喜欢换一个”。工具永远不能替你做决定。博客的灵魂是你一句一句挑出来的不是它一行一行写出来的。最后我想讲一个瞬间说了这么多技术、方法、指令其实整个过程中最让我难忘的不是某个Bug被解决也不是那个小锁终于亮起来。是一个深夜。我记得很清楚那天我把“建站日期”那个功能调通了。我在后台填了一个日期然后刷了一下首页滑到最底部——那里多了一行字“自 2026.07.03 起盏间小记开门迎客茶和咖啡都有。”就那一行小字我盯着看了很久。不是因为技术有多难而是因为我突然意识到这个角落真的存在了。它不是某个平台上的一个账号不是某个模板套出来的页面。它是我一个字一个字一个按钮一个按钮亲手搭建出来的。是我自己的地方。所以如果你也有那么一个挥之不去的念头——想记录点什么想表达点什么想在这个喧嚣的互联网上有一块自己的角落——我想对你说现在就可以开始了。你不需要懂代码。你只需要知道自己想要什么然后找到你的“老伙计”。剩下的就是一次一次地提需求、挑毛病、定方案直到那个深夜来临你滑到页脚看到那行属于你自己的字。关于作者中年老登大学毕业后创业失败目前打工女儿的父亲。喜欢咖啡和茶有一肚子话想说但不想发在朋友圈。于是自己手搓了一个博客。如果你想看看这个博客长什么样或者想找个角落坐坐欢迎来「盏间小记」https://cupsnote.com茶和咖啡都有故事慢慢讲。