如何复刻本网站?

king3.me 是一个基于 Next.js 16 + React 19 的高性能全栈个人博客模板，帮你从零搭建属于自己的线上名片。

这个模板包含了：

博客系统 — 基于 MDX 的文章管理，支持封面图、标签
项目展示 — 展示你的开源项目和作品
留言板 — 让用户给你留言互动
相册 & 诗集 — 展示照片和个人创作
音乐播放器 — 分享你喜欢的歌曲
管理后台 — 完整 CRUD，用户、内容、评论一键管理
OAuth 登录 — GitHub / Google 一键登录，首次登录自动授予管理员权限
中英文双语 — next-intl 支持，开箱即用
暗色模式 — Tailwind CSS + shadcn/ui，现代极简设计

功能特性一览

功能	技术实现	说明
用户鉴权	better-auth	支持 GitHub / Google OAuth 登录
数据库	Neon (PostgreSQL) + Drizzle	Serverless PostgreSQL，按量计费
部署平台	Vercel	零配置部署，全球 CDN
博客系统	MDX + next-mdx-remote-client	支持 React 组件的 Markdown
国际化	next-intl	中英文双语支持
UI 组件	shadcn/ui + Tailwind CSS	现代极简设计，暗色模式
代码高亮	Shiki + @shikijs/rehype	精美的代码块样式

项目克隆与本地配置

1. 克隆项目

bash

# Fork 方式（推荐）：先 Fork 到自己的仓库，然后 clone
git clone https://github.com/你的用户名/king3.me.git
cd king3.me

# 或直接 Clone（会保留原仓库的 .git，建议删除后重新初始化）
git clone https://github.com/coderking3/king3.me.git
cd king3.me
rm -rf .git && git init

2. 安装依赖

本项目使用 pnpm 作为包管理器。pnpm 比 npm/yarn 更快且节省磁盘空间：

bash

# 安装 pnpm（如果还没有）
npm install -g pnpm

# 安装项目依赖
pnpm install

3. 数据库配置（Neon）

Neon 是一个 Serverless PostgreSQL 数据库，按量计费，个人博客完全够用。

步骤 1：创建 Neon 项目

访问 neon.tech 注册账号
创建新项目，命名为 king3-me 或任意名称
创建完成后，在 Project Dashboard → Connection String 区域获取连接字符串

步骤 2：配置环境变量

复制 .env.example 为 .env：

bash

cp .env.example .env

编辑 .env，填入数据库连接字符串：

dotenv

# Neon 数据库连接
DATABASE_URL="postgresql://username:password@ep-xxx.us-east-1.aws.neon.tech/neondb?sslmode=require"

步骤 3：同步数据库 Schema

bash

# 从 schema 生成迁移文件
pnpm db:generate

# 推送 Schema 到数据库
pnpm db:push

4. 认证配置（better-auth）

步骤 1：生成密钥

bash

# 生成 BETTER_AUTH_SECRET
openssl rand -base64 32

步骤 2：配置 GitHub OAuth

访问 GitHub Developer Settings
点击「New OAuth App」
填写信息：
- Application name：你的博客名
- Homepage URL：https://your-domain.com
- Authorization callback URL：https://your-domain.com/api/auth/callback/github
获取 Client ID 和 Client Secret

步骤 3：（可选）配置 Google OAuth

如果需要 Google 登录，访问 Google Cloud Console 创建 OAuth 凭据。

步骤 4：完善 .env 环境变量

.env.local

# better-auth 核心配置
BETTER_AUTH_API_KEY="your-api-key"           # better-auth api 密钥 用于事件跟踪和平台功能。
BETTER_AUTH_SECRET="生成的随机密钥"           # 运行 openssl rand -base64 32
BETTER_AUTH_URL="https://your-domain.com"

# GitHub OAuth
GITHUB_CLIENT_ID="your-client-id"
GITHUB_CLIENT_SECRET="your-client-secret"

# Google OAuth
GOOGLE_CLIENT_ID="your-google-client-id"
GOOGLE_CLIENT_SECRET="your-google-client-secret"

# 站点 URL
SITE_URL="https://your-domain.com"

提示：本地开发时 BETTER_AUTH_URL 填 http://localhost:3060，部署后改为正式域名。

5. 本地开发与运行

启动开发服务器

bash

pnpm dev

访问 http://localhost:3060 即可看到博客首页。

首次登录

先点击右上角登录，使用 GitHub 或 Google 账号授权
better-auth 的 admin 插件会将第一个通过 OAuth 登录的用户自动提升为管理员（role: 'admin'）
访问 /admin 进入管理后台，你可以看到用户、项目、留言板、相册、音乐等管理模块

注意：首次运行 pnpm dev 前请确保已完成 pnpm db:push，否则会报数据库连接错误。

内容配置与定制化

修改基本信息

编辑 src/constants/index.ts：

typescript

// 社交链接（支持任意 key）
export const SOCIAL_URLS = {
  github: 'https://github.com/你的用户名',
  x: 'https://x.com/你的用户名',
  bilibili: 'https://space.bilibili.com/你的ID'
}

// 个人资料（作者信息 AUTHOR 由 PROFILE 派生：name / email / link）
export const PROFILE = {
  name: '你的名字',
  email: 'your@email.com',
  github: {
    name: '你的用户名',
    link: SOCIAL_URLS.github
  },
  twitter: {
    name: '@你的用户名',
    link: SOCIAL_URLS.x
  }
} as const

export const AUTHOR: AuthorInfo = {
  name: PROFILE.name,
  email: PROFILE.email,
  link: PROFILE.github.link
} as const

// 导航栏（首页不需要在此处配置，它是默认路由）
export const NAVIGATION_ITEMS = [
  { key: 'blog', href: '/blog' },
  { key: 'project', href: '/project' },
  { key: 'message', href: '/message' },
  { key: 'about', href: '/about' }
]

添加博客文章

在 content/posts/ 目录下创建 .mdx 文件，文件名即是 URL slug（例如 hello-world.mdx → 访问路径 /blog/hello-world）：

mdx

---
title: '我的第一篇文章'
description: '文章简介'
date: '2025-01-01'
published: true
image: /images/cover.png # 封面图（必填，否则封面显示异常）
lang: 中文  {/* 可选，EN 或 中文 */}
tags:
  - React
  - 教程
---

这里是文章正文...

## 第一章

内容...

## 第二章

内容...

Front matter 字段说明：

字段	说明	必填
title	文章标题	是
description	文章描述（用于 SEO 摘要）	是
date	发布日期（YYYY-MM-DD 格式）	是
published	是否发布（设为 `false` 为草稿，不展示）	否
image	封面图路径（不填会导致封面图显示异常）	是
lang	语言（`中文` 或 `EN`）	否
tags	标签数组	否

添加 Use 页面

编辑 content/use.mdx（英文）或 content/use_zh.mdx（中文），展示你使用的工具、软件、设备等。

部署上线（Vercel）

步骤 1：推送代码到 GitHub

bash

git add .
git commit -m "feat: 初始化博客"

# Fork 方式直接推送
git push origin main

# 直接 clone 方式需要先添加远程地址
# git remote add origin https://github.com/你的用户名/你的仓库名.git
# git branch -M main
# git push -u origin main

步骤 2：Vercel 导入项目

访问 Vercel 并登录
点击「Add New...」→「Project」
选择刚刚推送的 GitHub 仓库
在「Environment Variables」中填入所有 .env 变量（键名与本地 .env 完全一致，直接复制即可）
点击「Deploy」等待部署完成

步骤 3：配置域名（可选）

在 Vercel 项目设置中添加自定义域名
在域名服务商处配置 CNAME 记录
等待 DNS 生效（通常几分钟到几小时）
重要：部署后更新 .env 中的 BETTER_AUTH_URL 和 SITE_URL 为你的正式域名，并同步更新 GitHub OAuth App 的 callback URL

后续维护

管理后台功能

访问 /admin 可以管理：

用户列表 — 查看和管理用户
项目展示 — 在 Project 页面展示的项目
留言板 — 查看和删除用户留言
照片墙 — 管理相册图片
诗集 — 管理诗词内容
播放器 — 管理喜欢的音乐

版本更新

bash

# 拉取最新代码
git pull origin main

# 更新依赖
pnpm install

# 重新生成 Drizzle 迁移（如有 Schema 变更）
pnpm db:generate
pnpm db:push

常见问题

Q: `pnpm db:push` 报错连接失败？

检查 .env 中的 DATABASE_URL 是否已正确填入，并确保 Neon 项目的 IP 白名单允许访问（Neon 默认允许所有 IP）。

Q: 本地能登录、部署后 OAuth 白屏？

BETTER_AUTH_URL 和 SITE_URL 必须和你部署后的域名一致。比如部署在 https://myblog.vercel.app，则：

dotenv

BETTER_AUTH_URL="https://myblog.vercel.app"
SITE_URL="https://myblog.vercel.app"

Q: 如何修改字体和主题颜色？

主题颜色变量定义在 src/styles/variables.css，修改 :root（亮色）和 .dark（暗色）块中的 CSS 变量：

css

:root {
  --primary: oklch(21.03% 0.0059 285.89deg);
  /* 修改亮色主题的颜色变量... */
}

.dark {
  --primary: oklch(90% 0.005 248.19deg);
  /* 修改暗色主题的颜色变量... */
}

字体在 src/styles/global.css 中以 @font-face 定义；字体与颜色的全局映射统一在 src/styles/variables.css 的 @theme inline 块中配置。

结语

如果你在搭建过程中遇到困难，欢迎在 GitHub Issues 提问，或者在 king3.me 留言。

祝你搭建顺利！

Search