从本地应用到公开网站只需几分钟

标题：几分钟内将本地应用部署为公开网站

URL 来源：https://towardsdatascience.com/from-local-app-to-public-website-in-minutes/

发布日期：2026-06-02T15:00:00+00:00

Markdown 内容： ，我将向你展示三种完全免费的方法，快速部署一个简单的网页应用，使其在互联网上公开可用。这里的“简单”指的是静态网页应用，即没有数据库后端、用户账户或服务器端逻辑的应用。

虽然这看起来有些限制，但仅使用 HTML、CSS 和 JavaScript 仍然可以实现很多功能。

由于重点在于不同的部署方式，我不会过多介绍网页应用本身。

我希望找一个小项目，既简单又足够真实，可以部署并分享。于是让 Codex 创建了一个浏览器游戏——一款类似《太空侵略者》的射击游戏，该代理将其命名为 Starline Defender。

这款游戏操作简单：用方向键左右移动飞船，用空格键射击来袭的外星人，躲在护盾后面，被击中会失去生命值，随着分数上升，波次也会加快。它支持桌面设备的键盘控制和移动端的触控操作。文章末尾我会提供我部署的三个应用链接，你可以亲自体验。

这是我使用的提示词：

创建一个包含 HTML、CSS 和 JavaScript 的简单网页应用，是一个类似太空侵略者的简单游戏

大约 16 分钟后，Codex 输出了以下内容：

工作时长：16分45秒

我将把这个应用构建为一个单一的自包含 HTML 文件，内嵌 CSS 和 JavaScript，并使用 canvas 实现，这样无需构建步骤即可在任何地方运行。我会保持现有的下载文件不变，并添加一个新的游戏页面。
我将把整个游戏放在一个文件中：canvas 渲染、外星人波次、护盾、计分、生命值、关卡、键盘控制以及触摸设备的屏幕控制。完成后，我会通过现有的 localhost 服务器本地打开它，并进行一次快速的视觉检查。
创建了 1 个文件

游戏文件已就位。我现在正通过 localhost 检查，以便在交付前发现空白画布、脚本错误或布局问题。
验证游戏页面

页面已在 localhost 上加载成功。浏览器的只读页面检查无法直接查看 canvas 像素，因此我切换到截图和控制台日志检查，这是针对这种以 canvas 为主的页面最合适的测试方式。
截图游戏

截图发现了一个布局小问题：在较短的视口下，游戏区域缩小但紧贴左侧，右侧留出空白空间。我将居中并限制游戏区域尺寸，使其在移动端和桌面端都显得合理。
编辑了 1 个文件

我已经修复了响应式尺寸问题。现在重新加载页面，并进行一次交互测试：启动游戏，确认 canvas 更新正常，检查控制台是否有错误。
验证更新后的游戏
完成。我已在此处创建了单文件 SPA：
starline-defenders.html
你可以在内置浏览器中游玩：
http://127.0.0.1:8765/starline-defenders.html

我还验证了它能正常加载、启动、渲染 canvas，并且浏览器控制台无错误。

我在本地测试了游戏，运行良好。现在，让我们将其部署到网络上，让全世界都能惊叹它的精彩！

我们将要探讨的部署系统包括：

1. GitHub Pages
2. here.now
3. Hugging Face Spaces

为了避免误解，除了作为这些系统的普通用户外，我与上述任何公司均无关联、隶属或合作关系。

通用前提条件

大多数静态托管服务期望首页名为 index.html，因此第一步是将我们的文件从 starline-defenders.html 重命名为 index.html。对于本项目而言，这一步就足够了，因为我们所有的资源和代码都在这个文件中。

在你的本地系统上创建一个空文件夹，例如 starline-defenders/，并将 index.html 文件复制进去。

方法一：使用 GitHub Pages 部署

GitHub Pages 是小型静态网站和网页应用的经典选择。如果你的项目已经托管在 GitHub 上，这通常是最快捷的永久部署方案。

GitHub Pages 可以直接从仓库中提供 HTML、CSS、JavaScript、图片和其他静态资源。对于像这样的单文件游戏，它提供了所需的所有基础设施。

所需准备

GitHub 部署的前提条件如下：

• 一个 GitHub 账户
• 本地安装 Git Bash
• 一个公共的 GitHub 仓库（免费部署必须为公开仓库）

第一步：创建 GitHub 账户

访问 https://github.com，点击屏幕右上角的“Sign up”按钮。

第二步：安装 Git Bash 应用

Git 通过其 Bash 命令行界面让你能够与 GitHub 交互，例如将文件推送到仓库。

点击以下链接获取安装包：

https://git-scm.com/book/en/v2/Getting-Started-Installing-Git

然后根据你的操作系统按照说明完成安装。

第三步：创建新仓库

登录你的 GitHub 账户，创建一个新仓库，例如命名为：

starline-defenders

请确保该仓库是公开的。

第四步：将 index.html 文件上传至公开仓库

通过打开 Git Bash 命令行终端，切换到包含 index.html 文件的本地文件夹，然后输入以下命令：

git init
git config --global user.email "you@example.com"
git config --global user.name "Your Name"
git add index.html
git commit -m "Add space invaders type game"
git branch -M main
git remote add origin https://github.com/YOUR_USERNAME/starline-defenders.git
git push -u origin main

将 YOUR_USERNAME 替换为你自己的 GitHub 用户名。

第五步：启用 GitHub Pages

打开 GitHub 上的新建仓库，然后：

1. 进入 Settings（设置）页面。

1. 在左侧边栏中打开 Pages。

1. 在“构建与部署”下，选择“从分支部署”。

1. 将源分支设置为 main。

1. 将文件夹设置为 /root。

1. 点击保存。

GitHub 将开始发布你的网站。通常需要一到两分钟，最终的 URL 会如下所示：

https://YOUR_USERNAME.github.io/starline-defenders/

顺便提一下，如果你将来需要修改网页应用，只需对本地的 index.html 文件进行必要的更改，提交并再次推送即可：

git add index.html
git commit -m "Update game"
git push

你的更新后的应用将自动重新部署。

方法 2：使用 here.now 部署

here.now 是一个专为快速发布静态网站和文件而设计的服务。它可以托管 HTML、CSS、JavaScript、图片、文档和其他静态文件，并提供实时的 `*.here.now` URL。尽管 here.now 主要面向代理访问设计，但你也可以手动与其交互，这正是我接下来要展示的内容。

你可以通过两种方式发布到 here.now，两者都是免费的。第一种称为匿名模式，无需注册或登录。在这种模式下，here.now 会在临时 URL 上托管你的应用，持续时间为 24 小时。

若要获得永久的 here.now URL（我们这里将使用这种方式），你需要使用 API 密钥进行发布。

流程如下：

1. 在 here.now 注册/登录
2. 获取 API 密钥
3. 本地保存密钥
4. 运行命令行脚本发布应用
5. 返回的 URL 将永久保留在你的账户中

here.now 部署的前提条件：

• 一个 here.now 账户
• 一个 here.now API 密钥

第一步：注册 here.now 账户

点击 here.now/dashboard，然后点击屏幕右上角的“Sign In”按钮。

你会收到一封邮件，其中包含一个链接，点击该链接即可成功登录 here.now。

第二步：获取 API 密钥

登录后，在左侧菜单栏中会有一个 API 链接。点击它，然后将生成的密钥复制到剪贴板。

第三步：发布你的网站

在像我使用的 Windows 电脑上，发布应用需要运行一些 PowerShell 命令。Linux 和其他操作系统用户也有类似的操作流程。

# 如果需要，创建一个用于存放 API 密钥的文件夹
#
New-Item -ItemType Directory -Force "$env:USERPROFILE\.herenow" | Out-Null

# 保存 API 密钥
#
Set-Content "$env:USERPROFILE\.herenow\starlinedefenders-credentials" "YOUR_API_KEY"

# 发布网页应用
#

cd "$env:USERPROFILE\projects\starlinedefenders"

$apiKey = Get-Content "$env:USERPROFILE\.herenow\starlinedefenders-credentials" -Raw
$file = Get-Item ".\index.html"

$body = @{
  files = @(
    @{
      path = "index.html"
      size = $file.Length
      contentType = "text/html; charset=utf-8"
    }
  )
  spaMode = $true
} | ConvertTo-Json -Depth 5

$create = Invoke-RestMethod `
  -Uri "https://here.now/api/v1/publish" `
  -Method Post `
  -Headers @{
    "Authorization" = "Bearer $apiKey"
    "X-HereNow-Client" = "manual/powershell"
  } `
  -ContentType "application/json" `
  -Body $body

$upload = $create.upload.uploads[0]

Invoke-WebRequest `
  -Uri $upload.url `
  -Method Put `
  -ContentType $upload.headers."Content-Type" `
  -InFile $file.FullName

$finalBody = @{
  versionId = $create.upload.versionId
} | ConvertTo-Json

$final = Invoke-RestMethod `
  -Uri $create.upload.finalizeUrl `
  -Method Post `
  -Headers @{
    "Authorization" = "Bearer $apiKey"
  } `
  -ContentType "application/json" `
  -Body $finalBody

"Permanent Site URL: $($create.siteUrl)"

运行上述脚本后，它将显示一个你可以用来访问网页应用的 URL。

更新你的应用也非常简单。只需按需修改 index.html 中的代码，然后重新运行上面的部署脚本即可。

方法 3：使用 Hugging Face Spaces 部署

Hugging Face（HF）Spaces 最初以机器学习演示闻名，但它也支持静态 HTML 应用。

所需准备

• 一个 Hugging Face 账户
• 一个新的 HF Space
• 你的 index.html 文件
• 包含 Space 元数据的 README.md 文件

第一步：创建 HF 账户

点击 https://huggingface.co/，然后使用页面右上角的“Sign Up”按钮注册。

第二步：创建新的 Space

登录后，点击顶部的 Spaces 按钮，然后点击“Create a new Space”，为你的空间命名，例如 starline-defenders-game。填写描述并选择你想要的许可证条款。

对于 Space SDK，选择 Static；对于模板，选择 blank。将应用可见性设为 Public，然后点击底部的“Create Space”按钮。

第三步：覆盖预创建的 index.html 文件

Space 创建完成后，点击页面顶部靠近 App 和 Community 链接之间的 Files 链接。你应该会看到一个类似于 GitHub 仓库的界面，其中包含 HF 为你预先创建的四个文件。我们唯一需要关注的是 index.html 文件。你需要将本地的 index.html 文件复制过去，覆盖现有的 HF 版本。可以使用 Git Bash 完成此操作，就像之前在 GitHub Pages 上所做的那样。

请注意，在执行下面显示的最终 git push 命令时，会弹出一个窗口，要求你输入 HF 用户名和访问令牌才能成功执行命令。你可以在以下设置页面获取访问令牌：

https://huggingface.co/settings/tokens

点击“Create Token”按钮。在“Token Type”下选择 Write，为你的令牌命名并创建它。请记下令牌值。现在在 Git Bash 中输入以下命令，并将 YOUR_USERNAME 和 YOUR_SPACE_NAME 替换为你自己的 HF 值。

# 进入存放 index.html 的文件夹
cd ~/projects/starlinedefenders

git clone https://huggingface.co/spaces/YOUR_USERNAME/YOUR_SPACE_NAME
cd YOUR_SPACE_NAME
cp ~/projects/starlinedefenders/index.html ./index.html
git add index.html
git commit -m "Replace index with a space invaders type game"
# 在执行以下推送命令后，你需要输入
# 你的 HF 用户名以及之前创建的访问令牌
# 命令才能成功
git push

Hugging Face 将在后台构建并发布你的 Space。大约一分钟之后，你的应用就可以运行了。要运行它，请搜索你的 HF 用户名，所有可用的 Spaces 都会显示出来。点击对应的 Space 链接，你的应用就会立即启动。

稍后更新应用时，只需编辑本地的 index.html 文件，然后再次推送：

git add index.html
git commit -m "Update game"
git push

对比部署方式

这三种方法对于这类项目都表现良好。它们之间的差异主要体现在工作流程和目标受众上。

GitHub Pages

如果你的项目已经在 GitHub 上，GitHub Pages 是最理想的默认选择。它稳定、文档齐全，且开发者普遍熟悉。

优点：

• 公共仓库免费使用
• 包含 HTTPS
• 使用 Git 更新非常简单
• 适合作品集和项目演示
• 除了 GitHub 外没有额外平台锁定

缺点：

• 免费发布通常意味着仓库必须公开
• 不适合作为高强度商业用途的托管服务
• 第一次配置部署设置可能会让初学者感到困惑
• 相比拖拽式发布工具，响应速度稍慢

here.now

here.now 是将本地应用快速转换为可访问 URL 的最快方式。特别适合通过智能代理或代码助手生成的小型静态应用。

优点：

• 发布流程极快
• 适合快速演示和预览
• 免费账户支持永久静态站点
• 可以托管纯 HTML、CSS、JavaScript 以及图片等资源文件

缺点：

• 永久托管需要注册账户或完成认领流程
• 相较于 GitHub Pages 更新且知名度较低
• 在用于高流量项目前应检查当前计划的限制

Hugging Face Spaces

Hugging Face Spaces 是最专业化的选项。如果你希望你的应用与 AI 演示、实验或其他人工智能相关项目一同展示，这是一个绝佳选择。

优点：

• 支持静态 HTML 类型的 Space
• 提供免费的 CPU 支持空间
• 如果你已在使用 Hugging Face，集成体验很好
• 可轻松扩展为 Gradio、Streamlit、Docker 或基于机器学习的应用

缺点：

• 部署步骤比前两种更复杂一些
• 除了 index.html 文件外，还需要一个 README.md 元数据块
• 公开 URL 是 Hugging Face Space 页面，而非通用静态网站地址
• 相比 GitHub Pages 更具平台特定性

总结

网页或应用的开发通常只完成了战斗的一半。当你希望与他人分享成果时，部署就成了最关键的部分。当然，市面上有许多付费服务可以让你快速上线，但对于一个极其简单的应用或演示来说，能够免费部署无疑是一种极大的便利。

我展示了三种免费部署静态应用到网络的方法。老实说，它们的部署流程和实现难度都差不多，选择其中任意一种都不会出错。

但请记住，这些方法并不是为应对成千上万并发用户而设计的——毕竟它们是免费的。如果你需要这样的性能，就需要寻找其他方案，并准备掏信用卡了。

作为参考，以下是我在 “Starline Defender” 项目中创建的三个免费链接：

GitHub Starline Defenders

here.now Starline Defenders

Hugging Face Spaces Starline Defenders