# 部署指南 · 把网站发布到 GitHub 与 Cloudflare

> 这份指南面向**不使用命令行**的读者,全程在 GitHub 网站和 Cloudflare 控制台里点击完成。整套流程大约 15 分钟。
>
> 思路:先把这个文件夹里的所有文件上传到一个 GitHub 仓库(代码托管),再让 Cloudflare Pages 连接这个仓库并自动发布成网站(对外访问)。连接好之后,**以后你每次更新 GitHub 上的文件,Cloudflare 都会自动重新发布**,无需再做任何操作。

---

## 准备工作

你需要两个免费账号,如果还没有,先注册:

- GitHub 账号 —— 注册地址 `https://github.com/signup`
- Cloudflare 账号 —— 注册地址 `https://dash.cloudflare.com/sign-up`

另外,确保你手上有这个网站文件夹(也就是包含 `index.html`、`app.html`、`assets/`、`docs/` 等的那个文件夹)。

---

## 第一步:把文件上传到 GitHub

### 1.1 创建一个新仓库

登录 GitHub 后,点击右上角的「+」号,选择「New repository」(新建仓库)。在创建页面里:

- **Repository name(仓库名)**:填一个名字,例如 `invesresearch-site`(只能用字母、数字、连字符)。
- **Description(描述)**:可选,例如「二级市场智能投研系统网站」。
- **Public / Private**:选 **Public(公开)**。Cloudflare Pages 连接公开仓库最简单;选 Private 也可以,但连接时需要多授权一步。
- 下方的「Add a README file」「Add .gitignore」「Choose a license」**都不要勾选**(因为我们的文件夹里已经自带了这些文件,重复会冲突)。

填好后点击绿色的「Create repository」(创建仓库)按钮。

### 1.2 上传文件

创建完成后,你会看到一个几乎空白的仓库页面。在页面中间找到一行小字链接「uploading an existing file」(上传已有文件),点击它。如果没看到这行字,可以点页面上的「Add file」→「Upload files」。

进入上传页面后:

- 打开你电脑上的网站文件夹,**全选里面的所有内容**(包括 `index.html`、`app.html`、`404.html`、`README.md`、`DEPLOY.md`、`LICENSE`、`_headers`,以及 `assets` 和 `docs` 两个文件夹)。
- 把它们**整体拖拽**到 GitHub 上传页面的虚线框里。GitHub 支持连同文件夹一起拖拽上传,它会自动保持目录结构。
- 等待页面下方所有文件显示上传完成(文件较多时稍等片刻)。

> 小提示:如果拖拽文件夹不生效,可以先拖最外层那几个单独的文件(`index.html` 等),上传成功后再回到仓库,用「Add file」→「Upload files」分别进入 `assets` 和 `docs` 上传里面的内容。但大多数浏览器直接拖整个文件夹即可。

### 1.3 提交

在上传页面最下方有一个「Commit changes」(提交更改)区域,直接点绿色的「Commit changes」按钮即可(上方的说明框留空也没关系)。

提交后回到仓库主页,你应该能看到 `index.html`、`app.html`、`assets`、`docs` 等都已经在列表里了。**第一步完成。**

---

## 第二步:用 Cloudflare Pages 发布网站

### 2.1 进入 Pages

登录 Cloudflare 控制台 `https://dash.cloudflare.com`。在左侧菜单里找到「**Workers & Pages**」(也可能显示为「Compute」下的「Workers 和 Pages」),点击进入。

在页面上点击「**Create**」(创建)按钮,然后切换到「**Pages**」标签页,选择「**Connect to Git**」(连接到 Git)。

### 2.2 授权并选择仓库

- 第一次使用时,Cloudflare 会让你授权访问 GitHub。点击「Connect GitHub」,在弹出的 GitHub 页面里允许 Cloudflare 访问。你可以选择授权全部仓库,或只授权刚才创建的那一个(更安全)。
- 授权完成后回到 Cloudflare,在仓库列表里找到并选中你刚创建的 `invesresearch-site`,点击「**Begin setup**」(开始设置)。

### 2.3 配置构建设置(关键,但很简单)

因为我们的网站是**纯静态文件、不需要构建**,所以这一步要把构建相关的设置留空:

- **Project name(项目名)**:会自动填好,这也将成为你网址的一部分,可以保留或修改。
- **Production branch(生产分支)**:保持默认的 `main`。
- **Framework preset(框架预设)**:选择「**None**」(无)。
- **Build command(构建命令)**:**留空**(什么都不填)。
- **Build output directory(构建输出目录)**:填一个「`/`」斜杠,或保持默认。因为我们的 `index.html` 就在仓库根目录,不在任何子文件夹里。

填好后点击「**Save and Deploy**」(保存并部署)。

### 2.4 等待发布完成

Cloudflare 会开始部署,屏幕上会滚动一些日志。因为是纯静态站点,通常**几十秒到一两分钟**就会完成。看到「**Success!**」或「Your site is live」之类的提示,就说明发布成功了。

页面上会给出一个网址,形如:

```
https://你的项目名.pages.dev
```

点击它,就能看到你的网站首页了。在首页点「进入投研工作台」,或直接访问 `https://你的项目名.pages.dev/app.html`,即可打开完整的投研应用。

**第二步完成,网站已上线。**

---

## 之后如何更新网站

连接建立后,更新非常简单:**只要 GitHub 仓库里的文件有变化,Cloudflare 就会自动重新发布**。

要修改内容,在 GitHub 仓库里找到对应文件,点击文件右上角的铅笔图标(Edit)直接在线编辑,或用「Add file」→「Upload files」上传新版本覆盖。提交后,回到 Cloudflare 的 Pages 项目页,会看到一次新的部署正在进行,完成后线上网站即自动更新。

---

## 可选:绑定你自己的域名

如果你有自己的域名(例如 `invesresearch.com`),可以在 Cloudflare Pages 项目页里点「**Custom domains**」(自定义域名)→「Set up a custom domain」,按提示输入域名即可。如果该域名本身就托管在 Cloudflare,绑定会自动完成;如果托管在别处,Cloudflare 会给你一条 CNAME 记录,你到域名服务商那里添加即可。

---

## 常见问题排查

**打开网址后页面空白或样式错乱。**
最常见原因是「Build output directory(构建输出目录)」设置错了。我们的 `index.html` 在仓库根目录,所以输出目录应填「`/`」。可到 Pages 项目的「Settings」→「Builds & deployments」里检查并修正,然后触发一次重新部署(Deployments 页右上角「Retry deployment」)。

**架构图显示不出来。**
检查 GitHub 仓库里 `assets/diagrams/` 文件夹是否完整上传了那几个 `.svg` 文件。如果上传文件夹时漏了,补传即可,Cloudflare 会自动重新发布。

**点「进入投研工作台」跳转 404。**
说明 `app.html` 没上传到仓库根目录。确认它和 `index.html` 在同一层(都在仓库最外层),而不是被放进了某个子文件夹。

**字体看起来和预期不一样。**
本站字体走 Google Fonts CDN。若你的网络环境访问 Google Fonts 较慢,首次加载字体可能略有延迟,属正常现象,不影响功能。

---

## 如果你更习惯用命令行

以上是全程点击的方式。如果你熟悉 `git`,也可以用命令行推送(把 `<你的用户名>` 和 `<仓库名>` 换成实际值):

```bash
cd 网站文件夹
git init
git add .
git commit -m "Initial commit: InvesResearch site"
git branch -M main
git remote add origin https://github.com/<你的用户名>/<仓库名>.git
git push -u origin main
```

推送完成后,Cloudflare Pages 的连接与发布步骤与上面第二步完全相同。

---

> 部署遇到问题时,Cloudflare Pages 的官方文档(`https://developers.cloudflare.com/pages/`)是最权威的参考。本指南基于截至 2026 年初的界面流程编写,Cloudflare 控制台偶有改版,但「连接 Git 仓库 → 选 None 预设 → 不填构建命令 → 部署」这条主线一直适用。