Vibe Coding 实践：博客开发部署流程小记

用 AI 边写边改搭了个 Nuxt3 博客，踩了点坑，顺便聊聊部署和 Copilot MCP 搜文档的想法。

前言

Vibe Coding 是个 2025 年的新词，指的是与 AI 即时互动的编程方式，AI 生成代码，用户再用自然语言提供反馈，如此循环直至项目完成¹。

这个博客的开发过程就是 Vibe Coding 的一个实践。本博客基于 Nuxt3 构建，由于我是个后端er，对前端的了解仅限于对 Vue 的入门使用，因此本博客的样式原型、绝大部分代码都由 AI 生成。

当然，在微调 CSS 样式这方面，打字和 AI 反复沟通还不如自己改来得快……

开发过程

因为一开始也不知道自己想要什么样子的博客，于是打开 Claude 丢个提示词让它给原型页面，效果如下 ↓。最终在配色上基本沿用了原型方案，就是改了改首页、重新设计了导航栏。

再然后，Nuxt 3 启动！项目启动和 Vue 一样简单，装个 NPM 再敲个命令就完事了² 。

然后把 HTML 文件丢给 copilot 让它开始照着写。copilot 能搜索整个工作区，并联动编辑多个文件，过程中暂时没出现写新组件新样式时漏掉哪个文件的岔子。

当然，这里我只给了个首页，很多需求都是在过程中才逐渐想到的。例如我想分成博客、项目、个人简历几个页面，又需要一个导航栏，页面之间可以跳转等等……因此到最终成型之前也经历了若干次迭代补充：

定向搜索文档？

在文章内容获取这一块出了问题，Copilot 给的 JS 代码有问题，导致文章死活不显示。把报错贴给它反复要求修改，依然未解决。最后是自己翻了 Nuxt Content 和 Nuxt 3 的文档才改对了。

实际问题就是框架文档太新，Copilot 知识有时限性，用了错误的 API。

显然，只要 Copilot 能对 Nuxt 3 文档定向搜索就不会出这种问题。

但查了一下也只找到一个官方提供的 Web Search for Copilot 扩展，试用之后发现搜索效果也不好，搜不到 Nuxt 3 文档，还是无法正确使用 API（即使搜到了，也可能会被其他信息干扰）。

不过 Copilot 前段时间开始支持 MCP³，接下来尝试自己写个定向文档搜索工具试试。

部署

想法很简单：npm run generate，然后把构建产物丢上 GitHub，用 GitHub Page 部署就完事了。静态页面图的就是这点好处，不用自己买服务器捣鼓域名。

但有流水线还是多用流水线，期望是把文档 push 上去之后由 GitHub Action 自动触发构建流程，不用自己本地执行命令。

结果这部分踩了不少坑，简要来说两点：

1. Nuxt 的路径配置，由于我有用一个全局 CSS 文件，但路径没写对，部署上去之后由于找不到 CSS 文件，样式全丢了。正确写法是：

// nuxt.config.ts
export default defineNuxtConfig({
  compatibilityDate: '2025-05-15',
  devtools: { enabled: true },
  css: [
    '@/assets/css/main.css' // 实际位于 ../../assets/images/css/mian.css
  ],

2. 构建产物里有名称以 _ 开头的资源文件，结果 GitHub 提供的不知道哪个流程会忽略这种文件，导致部署上去之后资源文件找不到，文章无法加载。最后参考文章 Nuxt3 通过 Github Action 部署 Github Pages 的最佳实践，Page 设置改为从 GitHub Action 部署，工作流文件如下：

name: Deploy Nuxt site to Pages

on:
  push:
    branches: ["main"]

  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Detect package manager
        id: detect-package-manager
        run: |
          if [ -f "${{ github.workspace }}/yarn.lock" ]; then
            echo "manager=yarn" >> $GITHUB_OUTPUT
            echo "command=install" >> $GITHUB_OUTPUT
            exit 0
          elif [ -f "${{ github.workspace }}/package.json" ]; then
            echo "manager=npm" >> $GITHUB_OUTPUT
            echo "command=ci" >> $GITHUB_OUTPUT
            exit 0
          else
            echo "Unable to determine package manager"
            exit 1
          fi
      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: '18'
          cache: ${{ steps.detect-package-manager.outputs.manager }}
      - name: Install dependencies
        run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
      - name: Static HTML export with Nuxt
        run: ${{ steps.detect-package-manager.outputs.manager }} run generate
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: .output/public

  deploy:
    environment: # 部署环境
      name: github-pages # 部署到 GitHub Pages
      url: ${{ steps.deployment.outputs.page_url }} # 部署后的 URL
    needs: build
    runs-on: ubuntu-latest # 运行环境
    name: Deploy # 工作名称
    steps: # 步骤
      - name: Deploy to GitHub Pages # 部署到 GitHub Pages
        id: deployment # 步骤 ID
        uses: actions/deploy-pages@v4 # 使用的 action

总结

之前也用过各种博客框架，什么 Hexo/Halo/Typecho/WordPress 全用了一遍，但本人是个外观党，找不到满意的主题就都没坚持用下去，也不想改别人的主题……

这次在 AI 的帮助下从零开始搓代码和样式，对博客的掌控感还是很强的自己堆屎山还是比改别人的屎山爽。

接下来可能会接个API，加一些大模型相关的小功能，比如摘要自动生成、博客 Chat bot 之类的。但这样的话光静态页面可能就不够了，还是得上后端……

参考资料