POEMON-BLOG

Vue 3 + Go 全栈个人博客系统

一个功能丰富、界面美观的现代化博客，前后端分离，开箱即用。

在线演示 · 功能介绍 · 快速开始 · 部署指南 · API 文档

预览

首页	文章详情

后台管理	移动端适配

版本历史

技术栈

功能特性

项目结构

POEMON-BLOG/
├── My-Blog-Vue3/          # 前端项目
│   ├── src/
│   │   ├── views/         # 页面组件
│   │   ├── utils/         # 工具函数 & 常量配置
│   │   ├── stores/        # Pinia 状态管理
│   │   ├── router/        # 路由配置
│   │   ├── assets/        # 静态资源
│   │   └── types/         # TypeScript 类型
│   ├── .env.production    # 生产环境变量
│   └── vite.config.ts     # Vite 配置
│
├── My-Blog-Go/            # 后端项目
│   ├── config/            # 配置（数据库、应用配置）
│   ├── handlers/          # API 接口处理
│   ├── middleware/        # 中间件（认证、CORS、限流）
│   ├── models/            # 数据模型
│   ├── routes/            # 路由注册
│   ├── utils/             # 工具函数
│   ├── database/          # 数据库初始化脚本
│   ├── static/            # 上传文件存储
│   ├── API.md             # API 接口文档
│   └── main.go            # 入口文件
│
├── .env.example           # 环境变量模板
└── README.md

快速开始

环境要求

• Node.js >= 20
• Go >= 1.24
• MySQL >= 5.7

1. 克隆项目

git clone https://github.com/monkey-papa/POEMON-BLOG.git
cd POEMON-BLOG
git checkout Vue3-Go

2. 初始化数据库

mysql -u root -p -e "CREATE DATABASE myblog CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;"
mysql -u root -p myblog < My-Blog-Go/database/schema.sql

初始管理员账号：admin / admin123（登录后请及时修改密码）

3. 配置后端

cd My-Blog-Go

# 复制环境变量模板
cp ../.env.example .env

# 编辑 .env，至少修改以下配置：
# - DB_PASSWORD: 你的数据库密码
# - JWT_SECRET: 改为一个随机字符串（openssl rand -base64 32）

4. 启动后端

cd My-Blog-Go
go mod download
go run main.go

后端启动后监听 http://localhost:8000

go install github.com/air-verse/air@latest
air

5. 启动前端

cd My-Blog-Vue3
npm install
npm run dev

前端启动后访问 http://localhost:81

6. 开始使用

个性化配置

部署前，修改以下文件定制你自己的博客：

前端配置

My-Blog-Vue3/src/utils/constant.ts：

My-Blog-Vue3/index.html — 修改 <title> 和加载动画文字

My-Blog-Vue3/src/views/about.vue — 替换关于页背景图

My-Blog-Vue3/src/views/common/footer.vue / myAside.vue — 修改 GitHub 链接

后端配置

通过 .env 文件配置，参见上方环境变量说明。

生产环境部署

方式一：直接部署

1. 构建前端

cd My-Blog-Vue3

# 先修改 .env.production 中的域名
# VITE_API_BASE_URL=https://your-domain.com/api
# VITE_WEB_URL=https://your-domain.com
# VITE_SITE_URL=https://your-domain.com

npm run build

构建产物在 dist/ 目录。

2. 编译后端

cd My-Blog-Go
CGO_ENABLED=0 GOOS=linux GOARCH=amd64 go build -ldflags="-s -w" -o server .

3. 上传到服务器

scp -r My-Blog-Vue3/dist/* user@your-server:/var/www/blog/
scp My-Blog-Go/server user@your-server:/opt/blog/
scp .env.example user@your-server:/opt/blog/.env
# 登录服务器后编辑 /opt/blog/.env 填入生产环境配置

4. 服务器配置

sudo cat > /etc/systemd/system/my-blog.service << 'EOF'
[Unit]
Description=My Blog Go Backend
After=network.target

[Service]
Type=simple
WorkingDirectory=/opt/blog
ExecStart=/opt/blog/server
Restart=on-failure
RestartSec=5

[Install]
WantedBy=multi-user.target
EOF

sudo systemctl daemon-reload
sudo systemctl enable my-blog
sudo systemctl start my-blog

server {
    listen 80;
    server_name your-domain.com;

    root /var/www/blog;
    index index.html;

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

    location /api {
        proxy_pass http://127.0.0.1:8000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_read_timeout 300s;
    }
}

方式二：Docker 部署

cd My-Blog-Go

docker build -t poemon-blog-backend .

docker run -d \
  --name blog-backend \
  --env-file .env \
  -p 8000:8000 \
  --restart unless-stopped \
  poemon-blog-backend

前端构建后作为静态文件由 Nginx 提供服务。

HTTPS 配置

# Let's Encrypt 自动申请
sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d your-domain.com

或通过宝塔面板一键申请 SSL 证书。

常用命令

# 后端服务管理
sudo systemctl status my-blog      # 查看状态
sudo systemctl restart my-blog     # 重启
sudo journalctl -u my-blog -f      # 实时日志

# 前端开发
cd My-Blog-Vue3 && npm run dev     # 开发服务器
cd My-Blog-Vue3 && npm run build   # 生产构建

# 后端开发
cd My-Blog-Go && go run main.go    # 直接启动
cd My-Blog-Go && air               # 热重载

API 文档

详见 My-Blog-Go/API.md 和 My-Blog-Go/README.md。

Star 趋势

许可证

MIT License - 免费使用，欢迎贡献代码。

致谢

如果这个项目对你有帮助，请点一个 Star 支持一下！