page

基于 YYsuni/2025-blog-public 改造、由 duanxiaosheng/2025-blog-public-docker Docker 化的个人主页项目，经二次开发形成 ooliver0221/page。

项目背景

原项目是一个精美的个人博客系统，但依赖 GitHub App / .pem 密钥进行内容编辑。本项目将其改造为：

• Docker 自托管：一键部署，无需 GitHub 配置
• 本地密码管理：自定义管理员密码，不依赖第三方认证
• 本地文件存储：内容、图片、配置全部持久化在本地数据目录
• 个人主页化：去除博客文章系统，聚焦个人展示

功能特性

核心页面

页面	路由	说明
首页	/	个人信息卡片、时钟、日历、音乐播放器、社交按钮、Live2D 等可拖拽布局
关于我	/about	Markdown 编辑的个人介绍页
我的网站	/sites	友情链接/博客列表管理
我的项目	/projects	项目展示卡片
推荐分享	/share	推荐内容分享
图片集	/pictures	图片上传与随机布局展示
Live2D	/live2d	Live2D 模型展示

特色功能

• 可拖拽首页布局：首页所有卡片支持拖拽调整位置
• 色彩主题配置：可视化调整品牌色、背景色、卡片色等
• Live2D 模型：支持自定义 Live2D 模型展示
• 背景音乐：支持 MP3/FLAC 格式背景音乐播放
• 响应式设计：适配桌面端和移动端
• 资源管理：内置资源清理器，管理上传的图片资源
• 数据备份迁移：所有数据存储在 data/ 目录，打包即可迁移

安装指南

前置要求

• Docker & Docker Compose
• 服务器开放 3000 端口（或自定义端口）

快速部署

git clone https://github.com/ooliver0221/page.git
cd page
docker compose up -d --build

自定义端口

创建 .env 文件：

PORT=8080

访问

http://服务器IP:3000

使用说明

首次初始化

1. 访问网站，点击任意编辑按钮
2. 系统提示初始化管理员密码
3. 设置密码后即可进入后台编辑

忘记密码

删除 data/config/admin-auth.json 文件，重启容器后重新初始化。

内容编辑

• 首页设置：按 Ctrl+, 打开配置面板，可修改网站标题、描述、色彩、布局
• 关于页面：按 Ctrl+, 进入编辑模式，支持 Markdown
• 其他页面：点击右上角「编辑」按钮进入管理模式

数据备份

# 备份
tar -czf page-data-backup.tar.gz data/

# 恢复
tar -xzf page-data-backup.tar.gz

更换音乐

1. 将 MP3/FLAC 文件放入 public/music/ 目录
2. 修改 src/components/music-card.tsx 第 15 行和第 161 行
3. 重新构建：docker compose up -d --build

更换 Live2D 模型

1. 将模型文件放入 public/mashiro/ 目录
2. 修改 src/app/live2d/live2d-viewer.tsx 中的 MODEL_URL

目录结构

page/
├── src/                          # 源代码
│   ├── app/                      # Next.js App Router 页面
│   │   ├── (home)/               # 首页组件
│   │   ├── about/                # 关于页面
│   │   ├── sites/                # 我的网站
│   │   ├── projects/             # 我的项目
│   │   ├── share/                # 推荐分享
│   │   ├── pictures/             # 图片集
│   │   ├── snippets/             # 代码片段
│   │   ├── live2d/               # Live2D 模型
│   │   ├── api/                  # API 路由
│   │   └── layout.tsx            # 根布局
│   ├── components/               # 通用组件
│   ├── config/                   # 默认配置模板
│   ├── hooks/                    # 自定义 Hooks
│   ├── layout/                   # 布局与背景组件
│   └── lib/                      # 工具库
│       └── local-admin/          # 本地管理核心逻辑
├── public/                       # 静态资源
│   ├── music/                    # 音乐文件
│   ├── mashiro/                  # Live2D 模型
│   └── images/                   # 默认图片
├── data/                         # 运行时数据（Docker volume 挂载）
│   ├── config/                   # 站点配置
│   ├── content/                  # 页面内容
│   └── public/                   # 上传的图片资源
├── docker-compose.yml            # Docker Compose 配置
├── Dockerfile                    # Docker 构建文件
└── package.json                  # 项目依赖

技术栈

• 框架: Next.js 16 (App Router)
• UI: React 19 + Tailwind CSS 4 + Motion
• 状态管理: Zustand
• Markdown: marked + shiki (代码高亮)
• 部署: Docker + Next.js Standalone

贡献指南

1. Fork 本仓库
2. 创建特性分支：git checkout -b feature/xxx
3. 提交更改：git commit -m 'feat: xxx'
4. 推送到分支：git push origin feature/xxx
5. 提交 Pull Request

修改代码后请运行 npm run build 确保构建通过。

License

MIT