Nuxt Content 博客系统

这是一个使用 Nuxt 3 和 Nuxt Content 构建的现代化个人博客系统，支持 Markdown 内容管理，具有清新的设计风格和丰富的功能特性。

✨ 功能特点

📝 内容管理

• 基于 Markdown 的内容创作
• 支持文章封面图
• 文章标签系统
• 自动生成文章目录
• 代码块语法高亮
• 代码块一键复制功能
• 按日期自动排序文章

🎨 界面设计

• 响应式布局，适配多种设备
• 清新现代的设计风格
• 平滑过渡动画效果
• 暗色模式支持（开发中）

🚀 核心页面

• 个性化首页展示
• 文章列表页
• 友情链接页
• 关于我页面

🛠 技术特性

• 基于 Nuxt 3 的快速渲染
• TailwindCSS 的原子化 CSS
• 支持 Vue 组件在 Markdown 中使用
• TypeScript 支持

🚀 快速开始

安装依赖

pnpm install

启动开发服务器

pnpm dev

访问 http://localhost:3000 查看博客。

构建生产版本

pnpm build

📝 创建文章

在 content 目录下创建新的 .md 文件。文件需要包含以下格式的头部信息：

---
title: 文章标题
description: 文章描述
date: YYYY-MM-DD
tags: ['标签1', '标签2']
cover: '封面图片URL'  # 可选
---

# 文章内容

📁 项目结构

├── content/        # Markdown 文章
│   └── posts/     # 博客文章
├── components/     # Vue 组件
├── layouts/       # 页面布局
├── pages/         # 页面路由
│   ├── index.vue  # 首页
│   ├── articles.vue  # 文章列表
│   ├── friends.vue   # 友链页面
│   └── about.vue     # 关于页面
├── public/        # 静态资源
└── assets/        # 样式和资源文件

🔧 自定义配置

修改个人信息

1. 替换 public/avatar.jpg 更换头像
2. 编辑 pages/about.vue 更新个人介绍
3. 在 pages/friends.vue 中修改友链信息

自定义主题

• 在 tailwind.config.js 中修改主题配置
• 编辑 layouts/default.vue 调整全局样式

🔮 即将推出的功能

• 文章评论系统
• 全文搜索功能
• 文章目录导航
• 暗色模式
• SEO 优化
• RSS 订阅

<EFBFBD> 部署指南

nodejs version: 22.17.1

静态部署 (推荐)

1. 构建静态文件：

# 生成静态文件
pnpm generate

生成的静态文件将位于 .output/public 目录中。

2. 将生成的文件部署到任意静态托管服务：

• GitHub Pages
• Netlify
• Vercel
• 自有服务器

Nginx配置示例

server {
    listen 80;
    server_name yourdomain.com;
    root /path/to/your/blog/.output/public;
    index index.html;

    # 启用 gzip 压缩
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

    location / {
        try_files $uri $uri/ /index.html;
    }

    # 缓存静态资源
    location /assets {
        expires 7d;
        add_header Cache-Control "public, no-transform";
    }
}

Node.js 服务器部署

1. 构建项目：

pnpm build

2. 在服务器上启动：

# 使用 PM2 启动（推荐）
pm2 start .output/server/index.mjs --name "blog"

# 或直接启动
node .output/server/index.mjs

PM2 配置示例 (ecosystem.config.js)

module.exports = {
  apps: [{
    name: 'blog',
    script: '.output/server/index.mjs',
    instances: 'max',
    exec_mode: 'cluster',
    env: {
      PORT: 3000,
      NODE_ENV: 'production'
    }
  }]
}

Docker 部署

1. 创建 Dockerfile：

FROM node:18-alpine

WORKDIR /app

# 安装 pnpm
RUN npm install -g pnpm

# 复制项目文件
COPY . .

# 安装依赖并构建
RUN pnpm install
RUN pnpm build

# 暴露端口
EXPOSE 3000

# 启动服务
CMD ["node", ".output/server/index.mjs"]

2. 构建并运行容器：

# 构建镜像
docker build -t nuxt-blog .

# 运行容器
docker run -d -p 3000:3000 nuxt-blog

Docker Compose 部署

创建 docker-compose.yml：

version: '3'

services:
  blog:
    build: .
    ports:
      - "3000:3000"
    restart: always
    environment:
      - NODE_ENV=production

启动服务：

docker-compose up -d

<EFBFBD>🛠 技术栈

• Nuxt 3
• Nuxt Content
• TailwindCSS
• Vue 3
• TypeScript

📝 许可证

MIT

🤝 贡献

欢迎提交 Issue 和 Pull Request！

1. Fork 本项目
2. 创建您的特性分支 (git checkout -b feature/AmazingFeature)
3. 提交您的修改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 打开一个 Pull Request