Skip to content

deploy-guide.md

Latest commit

 

History

History
127 lines (95 loc) · 2.65 KB

deploy-guide.md

File metadata and controls

127 lines (95 loc) · 2.65 KB

🚀 Kin 个人网页部署指南

📁 项目结构

kin/
├── index.html      # 主网页文件
├── kin.bgm.MP3    # 背景音乐
└── README.md      # 项目说明

🎯 部署方案

1. Vercel 部署 (最推荐) ⭐⭐⭐⭐⭐

步骤：

  1. 访问 vercel.com
  2. 使用 GitHub 账号登录
  3. 创建新项目，选择 "Import from Git"
  4. 将代码推送到 GitHub 仓库
  5. 在 Vercel 中导入该仓库
  6. 自动部署完成！

优点:

  • ✅ 完全免费
  • ✅ 自动 HTTPS
  • ✅ 全球 CDN 加速
  • ✅ 自动部署（代码更新自动重新部署）
  • ✅ 自定义域名支持

2. Netlify 部署 ⭐⭐⭐⭐

步骤：

  1. 访问 netlify.com
  2. 注册账号
  3. 拖拽整个文件夹到 Netlify 部署区域
  4. 获得部署链接

优点:

  • ✅ 免费
  • ✅ 拖拽部署，无需 Git
  • ✅ 自动 HTTPS
  • ✅ 表单处理功能

3. GitHub Pages ⭐⭐⭐

步骤：

  1. 创建 GitHub 仓库
  2. 上传所有文件
  3. 在仓库设置中启用 GitHub Pages
  4. 选择 main 分支
  5. 获得 https://用户名.github.io/仓库名 链接

4. 阿里云OSS/腾讯云COS (国内用户) ⭐⭐⭐⭐

适合国内访问，速度更快

阿里云OSS：

  1. 开通阿里云OSS服务
  2. 创建存储桶
  3. 上传文件
  4. 配置静态网站托管
  5. 绑定自定义域名

🔧 快速部署命令

Git 初始化和推送

# 初始化 Git 仓库
git init

# 添加所有文件
git add .

# 提交
git commit -m "Initial commit: Kin personal website"

# 添加远程仓库（替换为你的仓库地址）
git remote add origin https://github.com/你的用户名/kin-website.git

# 推送到 GitHub
git push -u origin main

本地预览

# 如果有 Python 3
python -m http.server 8000

# 如果有 Node.js
npx serve .

# 然后访问 http://localhost:8000

🌐 域名配置

自定义域名 (可选)

  1. 购买域名（如：kin.com）
  2. 在部署平台添加自定义域名
  3. 配置DNS记录：
    • Vercel: 添加 CNAME 记录指向 cname.vercel-dns.com
    • Netlify: 添加 CNAME 记录指向 netlify的分配域名

📱 移动端优化检查

部署后记得测试：

  • ✅ 移动端响应式
  • ✅ BGM 自动播放
  • ✅ 粒子动画性能
  • ✅ 所有链接正常跳转

🔒 安全注意事项

  • ✅ 音乐文件版权确认
  • ✅ 个人信息隐私保护
  • ✅ 邮箱地址防爬虫

💡 部署后优化建议

  1. SEO优化: 添加meta标签
  2. 加载优化: 压缩音频文件
  3. 监控: 添加Google Analytics
  4. 备份: 定期备份项目文件

🎉 推荐选择 Vercel，3分钟内即可完成部署！