一个使用原生 HTML、CSS、JavaScript 构建的个人主页项目,无需任何框架依赖,轻量高效。包含前端展示页面和后台管理系统,让你轻松定制属于自己的个人主页。
- 🎨 简洁美观 - 现代化设计风格,清爽的主页展示界面
- 🔧 后台管理 - 便捷的数据管理系统,无需修改代码
- 📱 响应式设计 - 完美适配手机、平板、桌面等各种设备
- ⚡ 极速加载 - 原生代码构建,零依赖,性能优异
- 🌐 免费部署 - 基于 Cloudflare 免费服务,无需服务器成本
在开始之前,你需要:
- 一个 Cloudflare 账户(免费)
- 一个 GitHub 账户
- 登录 Cloudflare Dashboard
- 点击左侧菜单 "Workers 和 Pages"
- 点击 "创建应用程序" → "创建 Worker"
- 为你的 Worker 起一个名称(建议:
your-name-homepage) - 点击 "部署"
- 部署完成后,点击 "编辑代码"
- 将项目中
worker.js文件的完整代码复制到左侧编辑器 - 点击 "保存并部署"
- 记录下你的 Worker 域名:
https://your-worker-name.your-subdomain.workers.dev
- 在 Cloudflare Dashboard 中,点击 "Workers 和 Pages" → "KV"
- 点击 "创建命名空间"
- 输入命名空间名称:
home_kv - 点击 "添加"
- 返回到你的 Worker 页面
- 点击 "设置" → "变量"
- 在 "KV 命名空间绑定" 部分,点击 "添加绑定"
- 配置绑定:
- 变量名:
MY_HOME_KV - KV 命名空间: 选择刚创建的
home_kv
- 变量名:
- 点击 "保存并部署"
- 访问本项目的 GitHub 仓库
- 点击右上角 "Fork" 按钮,将项目复制到你的账户
- 在你 Fork 的仓库中,编辑
static/script.js文件 - 找到以下代码行:
const API_BASE = 'https://your-worker-domain.workers.dev';
- 将
your-worker-domain.workers.dev替换为你在第一步中获得的 Worker 域名
- 在 Cloudflare Dashboard 中,点击 "Workers 和 Pages"
- 点击 "创建应用程序" → "Pages" → "连接到 Git"
- 选择你 Fork 的仓库
- 配置构建设置:
- 框架预设: 无(或静态站点)
- 构建命令: 留空
- 构建输出目录:
/或留空
- 点击 "保存并部署"
- 在浏览器中访问:
https://your-worker-domain.workers.dev/manage - 使用默认登录信息:
- 用户名:
admin - 密码:
admin123
- 用户名:
⚠️ 立即修改默认密码 - 这很重要!- 更新个人信息、项目展示等数据
- 保存所有更改
- 访问你的 Pages 域名,查看个人主页效果
- 确认数据能正常从后台加载
- 测试后台管理功能是否正常
- 🔐 安全第一:部署完成后立即修改默认管理员密码
- 🔗 域名配置:确保 Worker 域名在前端配置中正确设置
- 📱 移动适配:项目已内置响应式设计,无需额外配置
- 🌐 自定义域名:可在 Cloudflare 中配置自定义域名
本项目采用开源许可证,修改时请保留原作者信息。
🎉 恭喜!你的个人主页已经部署完成!
如果在部署过程中遇到任何问题,欢迎提交 Issue 或寻求帮助。