博客搭建教程(6)：二次元主题美化与部署上线

第一步：设计配色方案

统一的配色让网站看起来专业。我们选樱花粉作为主色调：

/* src/app/globals.css */
:root {
  --background: #fff5f7;  /* 淡粉背景 */
  --foreground: #2d1b2e;  /* 深紫文字 */
  --primary: #ff6b9d;     /* 樱花粉 */
  --secondary: #a78bfa;   /* 淡紫 */
  --accent: #7dd3fc;      /* 天蓝 */
}

/* 暗色模式 */
.dark {
  --background: #1a1025;
  --foreground: #f0e6f6;
  --primary: #ff85b3;
}

Tailwind CSS v4 支持 dark: 变体，配合 .dark 类自动切换。

第二步：暗色模式无闪烁

// 在 layout.tsx 的 <body> 最前面
<script
  dangerouslySetInnerHTML={{
    __html: `try {
      var t = localStorage.getItem('theme');
      if (t === 'dark' || (!t && matchMedia('(prefers-color-scheme: dark)').matches)) {
        document.documentElement.classList.add('dark');
      }
    } catch(e) {}`,
  }}
/>

这个脚本在页面渲染前执行，读到 "dark" 就立即给 <html> 加 .dark 类，完全不会闪白屏。

第三步：樱花飘落特效

纯 CSS 动画实现花瓣飘落：

@keyframes sakura-fall {
  0% {
    transform: translateY(-10%) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(110vh) rotate(360deg);
    opacity: 0;
  }
}

React 组件生成 40 个随机位置/大小/速度的粒子，position: fixed 覆盖全屏。

第四步：将 Markdown 渲染为 HTML

我们用 unified 管道处理 Markdown：

Markdown → remark-parse → remark-gfm → remark-math 
→ remark-rehype → rehype-katex → rehype-highlight → rehype-stringify → HTML

这个管道处理了：

基础 Markdown（标题、列表、链接）
GFM 扩展（表格、任务列表）
LaTeX 数学公式（ $E=mc^2$ ）
代码语法高亮（100+ 语言）

保存文章时调用渲染函数，把生成的 HTML 存到 contentHtml 字段。展示时直接输出 HTML，不需要每次都渲染。

第五步：部署到服务器

你需要的：

一台 Ubuntu 服务器（腾讯云/阿里云轻量服务器就行，最低配够用）
一个域名（可选，但建议有）

上传代码

# 在服务器上
git clone https://github.com/你的用户名/blog.git
cd blog
npm install
npx prisma generate
npx prisma db push

配置环境变量

创建 .env 文件：

DATABASE_URL="file:./dev.db"
JWT_SECRET="用 openssl rand -hex 32 生成的随机字符串"
SITE_URL="https://你的域名"

用 PM2 保持运行

npm install -g pm2
npm run build
pm2 start npm --name blog -- start
pm2 save
pm2 startup  # 开机自启

配置 Nginx 反向代理 + HTTPS

sudo apt install nginx certbot python3-certbot-nginx

# Nginx 配置
sudo nano /etc/nginx/sites-available/blog

server {
    server_name 你的域名;
    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

sudo ln -s /etc/nginx/sites-available/blog /etc/nginx/sites-enabled/
sudo nginx -t && sudo systemctl reload nginx

# 免费 SSL 证书
sudo certbot --nginx -d 你的域名

一键更新

在 package.json 的 scripts 里加：

"update": "git pull && npm install && npx prisma generate && npx prisma migrate deploy && npm run build && pm2 restart blog"

以后本地改了代码，git push 后服务器上跑 npm run update 就搞定。

完整项目结构

blog/
├── src/app/
│   ├── (public)/        # 公开页面
│   │   ├── page.tsx     # 首页
│   │   ├── articles/[slug]/page.tsx
│   │   └── tags/[tag]/page.tsx
│   ├── admin/           # 管理后台
│   │   ├── page.tsx
│   │   ├── login/
│   │   ├── articles/
│   │   ├── images/
│   │   ├── music/
│   │   └── settings/
│   └── api/             # 后端 API
├── src/components/
│   ├── public/  # 前端组件
│   ├── admin/   # 后台组件
│   └── ui/      # 基础 UI
├── src/lib/     # 工具函数
├── prisma/      # 数据库
└── package.json

总结

这 6 篇教程带你从一个完全的编程新手，到拥有一个功能完备的个人博客。

你学到了：

✅ 安装 Node.js 和创建 Next.js 项目
✅ 用 Prisma 设计和管理数据库
✅ 写服务端组件从数据库取数据显示
✅ 写 API 接口实现评论系统
✅ JWT 登录认证和管理后台
✅ CSS 主题美化、暗色模式、樱花特效
✅ 部署到服务器，HTTPS + 一键更新

完整项目源码在 GitHub 开源，遇到问题可以随时参考。

博客搭建教程(6)：主题与部署