全栈开发个人博客：Vue3与Nest.js实战指南-代码聚汇网

全栈开发个人博客：Vue3与Nest.js实战指南

苏黎世贝勒爷

1. 为什么选择全栈开发个人博客？

三年前我刚入行时，总听前辈说"全栈工程师就是样样通样样松"，直到自己真正从零开始搭建博客系统，才发现全栈开发的独特价值。不同于单纯使用WordPress等现成方案，全栈开发能让你真正掌握从数据库设计到前端交互的完整技术链条。我的技术栈选择是Vue3 + Nest.js的组合，这个搭配在2023年的GitHub技术趋势报告中显示使用量同比增长了47%。

特别提醒：新手常犯的错误是过早纠结技术选型。实际上，任何主流技术栈都能实现博客功能，关键是要先明确自己的核心需求。

我最初的需求清单很简单：

支持Markdown写作和代码高亮
实现标签分类和全文搜索
具备基础的访问统计功能
部署成本控制在每月$5以内

这些需求决定了我不需要复杂的企业级框架，但需要足够灵活的技术组合。Vue3的Composition API让前端状态管理更清晰，而Nest.js的模块化设计则完美匹配后端服务的分层需求。

2. 技术架构设计与核心实现

2.1 前端工程化实践

使用Vite初始化Vue3项目时，我特别推荐这些配置：

bash复制npm create vite@latest my-blog --template vue-ts

关键依赖选择：

json复制{
  "dependencies": {
    "@vueuse/core": "^9.0.0",  // 必备工具库
    "highlight.js": "^11.0.0", // 代码高亮
    "markdown-it": "^13.0.0"   // Markdown解析
  }
}

踩坑记录：直接使用markdown-it解析大文件会导致首屏加载卡顿。最终解决方案是：

服务端预解析Markdown为HTML片段
前端只渲染处理后的内容
动态加载highlight.js的语言包

2.2 后端API开发要点

Nest.js的模块划分建议：

code复制src/
├── articles/              // 文章模块
│   ├── dto/               // 数据传输对象
│   ├── entities/          // 数据库实体  
│   └── articles.module.ts
├── auth/                  // 认证模块
└── shared/                // 公共模块

数据库选用PostgreSQL而非MongoDB的原因：

文章数据关系明确（标签-文章多对多）
需要事务支持（如点赞+计数同步更新）
全文搜索可以用PG自带的TSVector

2.3 前后端联调技巧

开发环境配置建议：

javascript复制// vite.config.js
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true
      }
    }
  }
})

这样前端开发时直接访问/api路由就会被代理到Nest.js服务，避免CORS问题。生产环境则通过Nginx统一转发：

nginx复制location /api {
  proxy_pass http://127.0.0.1:3000;
}

3. 内容管理系统实现细节

3.1 Markdown编辑器优化

放弃传统textarea，改用CodeMirror6实现：

typescript复制import { basicSetup } from 'codemirror'
import { EditorView } from '@codemirror/view'
import { markdown } from '@codemirror/lang-markdown'

new EditorView({
  doc: '# Hello World',
  extensions: [
    basicSetup,
    markdown(),
    EditorView.theme({
      "&": { height: "500px" }
    })
  ],
  parent: document.getElementById('editor')
})

添加的实用功能：

实时预览（使用Debounce防抖）
图片粘贴自动上传
自定义快捷键插入Markdown语法

3.2 标签系统的数据库设计

采用多对多关系模型：

sql复制CREATE TABLE tags (
  id SERIAL PRIMARY KEY,
  name VARCHAR(255) UNIQUE
);

CREATE TABLE articles_tags (
  article_id INTEGER REFERENCES articles(id),
  tag_id INTEGER REFERENCES tags(id),
  PRIMARY KEY (article_id, tag_id)
);

Nest.js中通过TypeORM实现：

typescript复制@Entity()
export class Article {
  @ManyToMany(() => Tag)
  @JoinTable()
  tags: Tag[];
}

性能优化点：热门标签的缓存策略

redis复制SET tag:popular '{["id":1,"name":"JavaScript","count":42]}' EX 3600

4. 部署与持续集成方案

4.1 服务器配置清单

我的DigitalOcean配置（$5/月套餐）：

1GB内存
25GB SSD
1000GB流量

系统优化命令：

bash复制# 增加SWAP空间
fallocate -l 1G /swapfile
chmod 600 /swapfile
mkswap /swapfile
swapon /swapfile

# 限制Node.js内存使用
export NODE_OPTIONS=--max_old_space_size=768

4.2 Docker化部署

前端Dockerfile示例：

dockerfile复制FROM node:16-alpine as builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf

后端Docker-compose配置：

yaml复制services:
  db:
    image: postgres:13
    volumes:
      - pg_data:/var/lib/postgresql/data
    environment:
      POSTGRES_PASSWORD: ${DB_PASSWORD}
  
  app:
    build: .
    ports:
      - "3000:3000"
    depends_on:
      - db

4.3 自动化部署流程

GitHub Actions配置要点：

yaml复制name: Deploy
on:
  push:
    branches: [ main ]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - run: ssh user@server "cd ~/blog && git pull"
      - run: ssh user@server "docker-compose up -d --build"

5. 技术博客的SEO优化实践

5.1 元标签动态管理

Vue3中使用useHead组合式API：

typescript复制useHead({
  title: `${article.title} - 我的技术博客`,
  meta: [
    { 
      name: 'description', 
      content: article.summary 
    },
    {
      property: 'og:image',
      content: article.coverImage
    }
  ]
})

5.2 生成Sitemap的自动化脚本

使用nest-sitemap库：

typescript复制import { Builder } from 'nest-sitemap'

async function generate() {
  const builder = new Builder({
    baseUrl: 'https://myblog.com',
    paths: await getArticlePaths() // 从数据库获取所有文章路由
  })
  await builder.build()
}

5.3 性能监控方案

使用Lighthouse CI监控关键指标：

bash复制npm install -g @lhci/cli
lhci autorun --collect.url="https://myblog.com" \
             --collect.settings.preset="desktop" \
             --upload.target="temporary-public-storage"

实测数据对比：

优化前	优化后
FCP: 2.1s	FCP: 0.8s
LCP: 3.4s	LCP: 1.2s
CLS: 0.25	CLS: 0.02

6. 内容创作与维护心得

技术博客最难的不是搭建，而是持续输出。我摸索出的内容工作流：

每周固定2小时选题（看GitHub趋势/解决工作问题）
用Obsidian管理选题库和写作片段
先写代码示例再补充文字说明
发布后收集读者反馈迭代内容

流量分析工具组合：

Umami（自托管统计）
Google Search Console
Hotjar（用户行为记录）

最受欢迎的三类文章：

具体技术问题的深度解决方案（如"Vue3递归组件实现树形菜单"）
完整项目实战教程（如"用Rust写一个简易Redis"）
技术对比分析（如"Next.js vs Remix路由机制剖析"）

维护过程中发现一个反直觉现象：技术深度与阅读量往往成反比。那些深入讲解底层原理的文章，其平均阅读完成率只有23%，而实用技巧类文章能达到65%。但这不妨碍我继续写深度内容——因为正是这些文章带来了最有价值的读者交流。