|
| 1 | +# 部署指南 |
| 2 | + |
| 3 | +本指南介绍如何将这个静态网页部署到GitHub Pages或其他服务器。 |
| 4 | + |
| 5 | +## 方法一:GitHub Pages(推荐) |
| 6 | + |
| 7 | +### 步骤1:初始化Git仓库 |
| 8 | + |
| 9 | +在项目根目录执行: |
| 10 | + |
| 11 | +```bash |
| 12 | +# 初始化git仓库 |
| 13 | +git init |
| 14 | + |
| 15 | +# 添加所有文件 |
| 16 | +git add . |
| 17 | + |
| 18 | +# 提交 |
| 19 | +git commit -m "Initial commit" |
| 20 | +``` |
| 21 | + |
| 22 | +### 步骤2:创建GitHub仓库并推送 |
| 23 | + |
| 24 | +1. 在GitHub上创建一个新仓库(例如:`nexus` 或 `nexus.github.io`) |
| 25 | +2. 如果仓库名是 `username.github.io`,网站会自动部署到 `https://username.github.io` |
| 26 | +3. 如果是其他名称,需要手动启用GitHub Pages |
| 27 | + |
| 28 | +```bash |
| 29 | +# 添加远程仓库(替换为你的仓库地址) |
| 30 | +git remote add origin https://github.com/你的用户名/仓库名.git |
| 31 | + |
| 32 | +# 推送到GitHub |
| 33 | +git branch -M main |
| 34 | +git push -u origin main |
| 35 | +``` |
| 36 | + |
| 37 | +### 步骤3:启用GitHub Pages |
| 38 | + |
| 39 | +1. 进入GitHub仓库页面 |
| 40 | +2. 点击 **Settings**(设置) |
| 41 | +3. 在左侧菜单找到 **Pages** |
| 42 | +4. 在 **Source** 下选择分支(通常是 `main`)和文件夹(选择 `/ (root)`) |
| 43 | +5. 点击 **Save**(保存) |
| 44 | +6. 等待几分钟,网站将在 `https://你的用户名.github.io/仓库名` 可用 |
| 45 | + |
| 46 | +### 注意事项 |
| 47 | + |
| 48 | +- 如果仓库名是 `username.github.io`,网站地址是 `https://username.github.io` |
| 49 | +- 如果仓库名是其他名称,网站地址是 `https://username.github.io/仓库名` |
| 50 | +- 确保 `index.html` 在根目录 |
| 51 | +- 所有资源路径使用相对路径(你的代码已经使用了相对路径,如 `./static/css/`) |
| 52 | + |
| 53 | +## 方法二:使用Netlify(更简单) |
| 54 | + |
| 55 | +1. 访问 [netlify.com](https://www.netlify.com) |
| 56 | +2. 注册/登录账号 |
| 57 | +3. 点击 **Add new site** → **Deploy manually** |
| 58 | +4. 将整个项目文件夹拖拽到上传区域 |
| 59 | +5. 网站会自动部署,获得一个 `xxx.netlify.app` 的域名 |
| 60 | + |
| 61 | +## 方法三:使用Vercel |
| 62 | + |
| 63 | +1. 访问 [vercel.com](https://vercel.com) |
| 64 | +2. 注册/登录账号 |
| 65 | +3. 点击 **Add New Project** |
| 66 | +4. 导入GitHub仓库或直接上传文件夹 |
| 67 | +5. 点击 **Deploy** |
| 68 | + |
| 69 | +## 方法四:部署到自己的服务器 |
| 70 | + |
| 71 | +### 使用Nginx |
| 72 | + |
| 73 | +1. 将项目文件上传到服务器(使用FTP、SCP或Git) |
| 74 | +2. 配置Nginx: |
| 75 | + |
| 76 | +```nginx |
| 77 | +server { |
| 78 | + listen 80; |
| 79 | + server_name your-domain.com; |
| 80 | + root /path/to/Nexus; |
| 81 | + index index.html; |
| 82 | +
|
| 83 | + location / { |
| 84 | + try_files $uri $uri/ /index.html; |
| 85 | + } |
| 86 | +} |
| 87 | +``` |
| 88 | + |
| 89 | +3. 重启Nginx:`sudo systemctl restart nginx` |
| 90 | + |
| 91 | +### 使用Apache |
| 92 | + |
| 93 | +1. 将项目文件上传到服务器的 `public_html` 或 `www` 目录 |
| 94 | +2. 确保 `.htaccess` 文件存在(如果需要): |
| 95 | + |
| 96 | +```apache |
| 97 | +RewriteEngine On |
| 98 | +RewriteBase / |
| 99 | +RewriteRule ^index\.html$ - [L] |
| 100 | +RewriteCond %{REQUEST_FILENAME} !-f |
| 101 | +RewriteCond %{REQUEST_FILENAME} !-d |
| 102 | +RewriteRule . /index.html [L] |
| 103 | +``` |
| 104 | + |
| 105 | +## 常见问题 |
| 106 | + |
| 107 | +### 资源加载失败 |
| 108 | + |
| 109 | +- 检查所有资源路径是否为相对路径 |
| 110 | +- 确保CSS、JS、图片等文件路径正确 |
| 111 | +- 检查浏览器控制台的错误信息 |
| 112 | + |
| 113 | +### 视频文件太大 |
| 114 | + |
| 115 | +- GitHub Pages对文件大小有限制(建议单个文件<100MB) |
| 116 | +- 考虑使用CDN或外部存储服务托管视频 |
| 117 | +- 或使用Git LFS(Large File Storage) |
| 118 | + |
| 119 | +### 自定义域名 |
| 120 | + |
| 121 | +**GitHub Pages:** |
| 122 | +1. 在仓库Settings → Pages中添加自定义域名 |
| 123 | +2. 在域名DNS中添加CNAME记录指向 `username.github.io` |
| 124 | + |
| 125 | +**Netlify/Vercel:** |
| 126 | +1. 在项目设置中添加自定义域名 |
| 127 | +2. 按照提示配置DNS记录 |
| 128 | + |
| 129 | +## 快速部署命令(GitHub Pages) |
| 130 | + |
| 131 | +```bash |
| 132 | +# 1. 初始化仓库 |
| 133 | +git init |
| 134 | +git add . |
| 135 | +git commit -m "Initial commit" |
| 136 | + |
| 137 | +# 2. 添加远程仓库(替换为你的仓库地址) |
| 138 | +git remote add origin https://github.com/你的用户名/nexus.git |
| 139 | + |
| 140 | +# 3. 推送代码 |
| 141 | +git branch -M main |
| 142 | +git push -u origin main |
| 143 | + |
| 144 | +# 4. 在GitHub上启用Pages(通过网页操作) |
| 145 | +``` |
| 146 | + |
| 147 | +部署完成后,你的网站就可以通过浏览器访问了! |
0 commit comments