🤔不会搭建技术博客，Trae+vitepress，😎3s搞定

🎨 写在前头

随着AI的普及和进化，

会技术的不用吭哧吭哧干太简单的业务功能、脏活累活、AI辅助我们码农去做项目，去除掉了重复的劳动力，更多地自动化流程的sop；

不会技术的也能快速上手做一些智能的工具，大大地降低技术门槛，每个人都能轻松创建和维护自己的技术博客。

那么接下来我们运用Trae的Builder模式快速搭建VitePress技术博客，并且最后部署到GitHub pages上。

VitePress 是基于 Vite 和 Vue.js 的静态站点生成器，相比 VuePress 具有更快的构建速度和更现代化的开发体验。它完美适合搭建技术文档和博客。

🔴 准备工作

安装 Node.js (建议 v16+)
注册 GitHub 账号
安装 Trae IDE

🔴 初始化项目

在 Trae 中打开 Builder 模式，输入以下指令：

js 复制代码

创建一个基于 VitePress 的技术博客项目，包含以下功能：
- 响应式布局
- 暗黑/明亮主题切换
- 文章分类和标签系统
- 全文搜索功能
- 代码高亮支持
- GitHub 风格的评论系统
- 自动生成 RSS 订阅

Trae 会自动生成项目结构如下：

js 复制代码

my-tech-blog/
├── .github/
│   └── workflows/
│       └── deploy.yml
├── docs/
│   ├── .vitepress/
│   │   ├── config.js
│   │   ├── theme/
│   │   │   ├── index.js
│   │   │   └── style.css
│   │   └── public/
│   ├── articles/
│   │   ├── getting-started.md
│   │   └── advanced-usage.md
│   ├── index.md
│   └── config.js
├── package.json
└── README.md

配置博客

Trae 会自动生成基本的 VitePress 配置，我们可以在 docs/.vitepress/config.mts 中进一步定制：

javascript 复制代码

import { defineConfig } from 'vitepress'
export default defineConfig({
  title: "《开发文档指南》",
  description: "简单、易懂、易用",
  head: [
    ['link', { rel: 'icon', href: '/logo.png' }],
  ],
  themeConfig: {
    logo: '/logo.png',
    search: {
      provider: 'local'
    },
    nav: [
      { text: 'Home', link: '/' },
      { text: 'Examples', link: '/markdown-examples' }
    ],

    sidebar: [
      {
        text: 'Examples',
        items: [
          { text: 'Markdown Examples', link: '/markdown-examples' },
          { text: 'Runtime API Examples', link: '/api-examples' }
        ]
      },
      {
        text: 'Vue',
        items: [
          { text: '双向绑定', link: '/vue/双向绑定' },
          { text: 'NextTick', link: '/vue/NextTick' },
          { text: 'mixin', link: '/vue/mixin' },
          { text: 'slot', link: '/vue/slot' },
          { text: 'Observable', link: '/vue/Observable' },
          { text: 'key', link: '/vue/key' },
          { text: 'keep-alive', link: '/vue/keep-alive' },
          { text: '修饰符', link: '/vue/修饰符' },
          { text: '自定义指令', link: '/vue/自定义指令' },
          { text: '过滤器', link: '/vue/过滤器' },
        ]
      }
    ],

    socialLinks: [
      { icon: 'github', link: 'https://github.com/vuejs/vitepress' }
    ]
  }
})

添加博客功能

1、主题切换

Trae 会自动集成主题切换功能：

javascript 复制代码

// docs/.vitepress/theme/index.js
import DefaultTheme from 'vitepress/theme'
import './style.css'

export default {
  extends: DefaultTheme,
  enhanceApp({ app }) {
    // 注册主题切换组件
    app.component('ThemeToggle', {
      template: `
        <button @click="toggleTheme" class="theme-toggle">
          {{ isDark ? '🌞' : '🌙' }}
        </button>
      `,
      data() {
        return { isDark: false }
      },
      methods: {
        toggleTheme() {
          this.isDark = !this.isDark
          document.documentElement.classList.toggle('dark', this.isDark)
          localStorage.setItem('vitepress-theme-appearance', this.isDark ? 'dark' : 'light')
        }
      },
      mounted() {
        this.isDark = document.documentElement.classList.contains('dark')
      }
    })
  }
}

2、文章分类和标签

Trae 会生成文章分类和标签系统：

javascript 复制代码

// 在 config.js 中添加
themeConfig: {
  sidebar: {
    '/articles/': [
      {
        text: '文章',
        items: [
          { text: '入门指南', link: '/articles/getting-started' },
          { text: '高级用法', link: '/articles/advanced-usage' }
        ]
      }
    ]
  }
}

3、搜索功能

Trae 会自动集成本地搜索：

javascript 复制代码

import { defineConfig } from 'vitepress'
import { SearchPlugin } from 'vitepress-plugin-search'

export default defineConfig({
  vite: {
    plugins: [
      SearchPlugin({
        placeholder: '搜索文章...',
        buttonLabel: '搜索'
      })
    ]
  }
})

4、编写博客内容

在 docs/articles/ 目录下创建 Markdown 文件，例如 getting-started.md:

js 复制代码

---
title: VitePress 入门指南
date: 2023-06-15
tags: ['VitePress', '教程']
---

# VitePress 入门指南

## 介绍

VitePress 是一个基于 Vite 的静态站点生成器...

## 安装

```bash
npm install -D vitepress

🔴 配置

创建 docs/.vitepress/config.js 文件...

perl 复制代码

## 本地开发

运行以下命令启动开发服务器：

```bash
npm run docs:dev

访问 http://localhost:5173 查看效果。

🔴 部署到 GitHub Pages

1、创建 GitHub 仓库

在 GitHub 上创建一个新仓库，名为 yourusername.github.io（使用你的 GitHub 用户名）。

2、配置部署脚本

Trae 已经生成了 GitHub Actions 配置文件 .github/workflows/deploy.yml:

yaml 复制代码

name: Deploy to GitHub Pages

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 16
      - run: npm ci
      - run: npm run docs:build
      - uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: docs/.vitepress/dist

3、推送代码并部署

bash 复制代码

git init
git add .
git commit -m "initial commit"
git branch -M main
git remote add origin https://github.com/yourusername/yourusername.github.io.git
git push -u origin main

GitHub Actions 会自动构建并部署你的博客。

部署完成后，地址可用：https://yourusername.github.io

🎨 写在后面

通过 Trae 的 Builder 模式，我们快速搭建了一个功能齐全的 VitePress 技术博客，包含了主题切换、搜索功能、文章分类等特性，并成功部署到 GitHub Pages。Trae 的 AI 能力大大简化了配置过程，让开发者可以更专注于内容创作而非环境搭建。