契机

查阅资料时,发现一些优秀的个人博客(https://blog.codingnow.com/、https://www.lfzxb.top/、https://imzlp.com/),这让我想起自己之前也做过一个网站。不过那是很早之前的事了,技术上只用了纯 HTML 和一些 jQuery,相对简陋。随着 AI 不断升级,我看到有人用 AI 做出了很多厉害的东西。于是我决定用 AI 来重构我的网站,尽可能减少代码量。接下来记录整个过程。

重构

1. 确定方向

使用ai分析旧代码框架，总结优缺点，ai也总结了一些不足的地方

同时也能够方便知道为什么有些技术过时了，比如jQuery

同时也能够给予个人情况，提供建议与理由

2. 确定仓库管理

项目本身肯定是需要接入版本管理的，因为我本身就有一台Nas部署了Gitlab服务了（如果感兴趣后续单独再出一个部署教程），所以就可以直接使用，问题在于是否需要前后端分离管理，这个与ai交流后，结合我自身情况，决定使用一个仓库进行管理。

3. 确定目录结构

通过与ai交流，大致确定了目录结构（大致结构，后续可以根据需求再优化）

website/                           # 项目根目录
│
├── frontend/                      # 前端项目（Vue 3）
│   ├── src/
│   │   ├── assets/                # 编译时处理的资源
│   │   │   ├── images/            # 小图标、Logo
│   │   │   └── styles/            # 全局样式
│   │   │       └── main.css
│   │   │
│   │   ├── components/            # 公共组件
│   │   │   ├── Header.vue
│   │   │   ├── Footer.vue
│   │   │   ├── GameCard.vue
│   │   │   └── ArticleCard.vue
│   │   │
│   │   ├── views/                 # 页面组件
│   │   │   ├── Home.vue
│   │   │   ├── Articles.vue
│   │   │   ├── ArticleDetail.vue
│   │   │   ├── Games.vue
│   │   │   ├── GameDetail.vue
│   │   │   └── About.vue
│   │   │
│   │   ├── router/                # 路由配置
│   │   │   └── index.ts
│   │   │
│   │   ├── composables/           # 组合式函数
│   │   │   ├── useArticles.ts
│   │   │   └── useGames.ts
│   │   │
│   │   ├── types/                 # TypeScript 类型定义
│   │   │   └── index.ts
│   │   │
│   │   ├── config/                # 配置文件
│   │   │   └── api.ts
│   │   │
│   │   ├── utils/                 # 工具函数
│   │   │   └── markdown.ts
│   │   │
│   │   ├── App.vue                # 根组件
│   │   └── main.ts                # 入口文件
│   │
│   ├── public/                    # 静态资源（直接复制）
│   │   └── favicon.ico
│   │
│   ├── index.html                 # HTML 模板
│   ├── package.json               # 前端依赖
│   ├── tsconfig.json              # TypeScript 配置
│   ├── tsconfig.node.json
│   ├── vite.config.ts             # Vite 配置
│   └── README.md                  # 前端说明
│
├── backend/                        # 后端项目（Node.js + Express）
│   ├── src/
│   │   ├── routes/                # API 路由
│   │   │   ├── articles.js
│   │   │   └── games.js
│   │   │
│   │   ├── utils/                 # 工具函数
│   │   │   └── scanner.js         # Markdown 扫描器
│   │   │
│   │   ├── middleware/            # 中间件
│   │   │   └── errorHandler.js
│   │   │
│   │   └── server.js              # 服务器入口
│   │
│   ├── articles/                  # Markdown 文章存放
│   │   ├── 2024/
│   │   │   ├── unity-shader.md
│   │   │   └── cpp-features.md
│   │   └── 2025/
│   │
│   ├── uploads/                   # 上传的文件
│   │   └── .gitkeep
│   │
│   ├── package.json               # 后端依赖
│   ├── .env.example               # 环境变量示例
│   └── README.md                  # 后端说明
│
├── public_resources/              # 公共资源（独立存放）
│   └─── imgs/                     # 图片资源
│
├── scripts/                       # 构建和部署脚本
│   ├── deploy.sh                  # 部署脚本
│   ├── build-all.sh               # 一键构建
│   └── sync-resources.sh          # 资源同步
│
├── docs/                          # 文档
│   ├── API.md                     # API 文档
│   ├── DEPLOY.md                  # 部署文档
│   └── DEVELOPMENT.md             # 开发指南
│
├── .gitignore                     # Git 忽略配置
├── .env.example                   # 环境变量示例
├── package.json                   # 根目录脚本（可选）
└── README.md                      # 项目总说明

可以看出这里ai的考虑还是很清楚的，我个人暂时也不知道这套框架是如何运作的，所以可以先按照这一套看起来没有问题的结构来实现。