如何使用DigitalOcean应用平台将静态网站部署到云端
介绍
如果您已经在本地环境中构建了静态网站，那么下一步就是决定如何将其发布到网络上。 发布站点的一种方法是通过 DigitalOcean App Platform 将其部署为应用程序，该平台为三个静态站点 提供 免费托管。 部署应用程序通常需要设置底层服务器基础架构。 App Platform 使这项工作自动化，允许您将静态网站从 GitHub 存储库部署到云中。
本教程将指导您完成使用 App Platform、GitHub（软件开发平台）和 GitHub 的桌面应用程序将静态网站部署到云的所有步骤。 此处的说明适用于您在本地环境中构建的任何静态网站，包括使用我们的教程系列 如何使用 HTML 构建网站创建的网站。 如果您没有准备好部署的网站，或者只是想测试 App Platform，我们还将向您介绍如何在本教程中使用我们的示例 HTML 网站。 在本教程结束时，您应该拥有一个已发布的网站，并了解如何使用 App Platform 从 GitHub 存储库将网站部署到云中。
注意：如果你已经有一个GitHub账号和你的网站项目的GitHub仓库，你可以跳到步骤6开始使用App Platform的说明。
先决条件
- 用于静态网站的文件，例如在教程系列 如何使用 HTML 构建网站或您自己创建的网站。 在继续本教程之前，请确保您的网站文件在本地工作。
- 用于注册免费 GitHub 帐户的电子邮件地址。
- 用于注册 DigitalOcean 的云服务的信用卡或 Paypal 帐户。 您不会为前三个站点付费。
第 1 步 - 创建一个 GitHub 帐户
如果您还没有 GitHub 帐户，则需要注册一个，以便为您的项目创建一个 GitHub 存储库。 GitHub 是一个软件开发平台，允许开发人员托管、共享和协作编码项目。 要创建免费帐户，请在 GitHub 主页 上注册。
确认帐户后，您就可以进行下一步了。 记住您的登录凭据，因为您将在第 3 步中需要它们。
第 2 步 — 下载并安装 GitHub 桌面应用程序
许多开发人员使用命令行界面 (CLI) 工具 Git 与 GitHub 进行交互，但如果您不熟悉使用计算机终端，也可以使用 GitHub Desktop 应用程序。 （如果您想了解有关使用 CLI 工具 Git 的更多信息，可以访问我们的指南 如何为开源做出贡献：Git 入门 。 本教程将继续使用 GitHub Desktop 应用程序的说明。
按照 GitHub Desktop 主页 上的说明下载 GitHub Desktop 应用程序。 接下来，打开下载的应用程序文件并按照说明完成安装过程。
安装完成后，您就可以进行下一步了。
第 3 步 — 为您的网站项目创建一个 GitHub 存储库
在这一步中，我们将使用 GitHub Desktop 应用程序在您的计算机上为您的网站项目创建一个本地存储库。
首先，打开 GitHub 桌面应用程序。 点击“登录 GitHub.com”蓝色按钮：
按照提示将 GitHub Desktop 应用程序连接到您的 GitHub 帐户。 桌面应用程序与您的帐户连接后，应该会出现一个窗口，其中包含入门选项。 单击“在硬盘驱动器上创建新存储库”按钮（从顶部开始的第三个大按钮）：
接下来，系统将提示您填写新存储库的详细信息：
在此窗口中，输入以下信息：
- 您的存储库的名称。 对于本教程，我们将其称为“my-static-site”。
- 您的存储库的描述以供参考。
您可以保留自动生成的本地路径。 这是 GitHub Desktop 将您的项目存储在本地计算机上的位置。
如果您想添加一个文件来存储您网站的文档，您可以选中使用 README 初始化存储库的选项。 通常，为您的存储库创建一个 README 是一种很好的做法，但您也可以不选中此选项以用于本教程。
Git Ignore 选项允许您选择一个模板来忽略某些文件。 “许可证”选项允许您为您的工作选择一个开源许可证。 要了解有关不同开源许可证选项的更多信息，您可以访问开源计划的 许可证和标准 列表。 如果您不知道为这些选项选择什么，则可以出于本教程的目的为这两个选项选择“无”。
单击“创建存储库”。 桌面应用程序现在应该显示新创建的存储库的详细信息。 我们将在下一步中介绍这些不同面板显示的内容。
创建存储库后，您应该准备好继续下一步。
第 4 步 — 将网站文件复制到 GitHub 存储库
在这一步中，我们将复制您网站项目的文件并将它们放在新创建的 GitHub 存储库文件夹中。
注意：如果您想使用我们的示例网站探索App Platform，请从GitHub存储库下载zip文件，点击右上角的绿色“代码”按钮并选择“下载 ZIP”选项：
ZIP 文件下载完成后，解压缩文件以访问包含网站文件的文件夹。 在以下步骤中，此文件夹将用作您的网站项目的工作文件夹。
首先，在您的桌面上，打开您网站项目的 工作文件夹，或当前存储您网站项目的所有文件和文件夹的文件夹。 在此示例中，工作文件夹称为“html-site”。
接下来，找到并打开您在步骤 3 中命名的新创建的存储库文件夹。 在此示例中，存储库文件夹称为“my-static-site”。
将文件从工作文件夹复制到存储库文件夹。 要复制文件，您可以选择所有网站文件，同时单击 Right Click（在 Windows 上）或 CTRL + Left Click（在 Mac 上）并选择“复制 X 项”。 然后，要将文件的副本粘贴到存储库文件夹中，单击存储库文件夹，单击 Right Click（在 Windows 上）或 CTRL + Left Click（在 Mac 上），然后选择“粘贴 X 项”：
将文件粘贴到存储库文件夹后，GitHub 桌面应用程序应在应用程序窗口左侧的“更改”面板中显示文件：
如果您使用的是 macOS 操作系统，如果您在“更改”面板中看到添加了 .DS_STORE 文件，请不要惊慌。 这是一个自动生成的文件，用于存储有关文件夹的信息，不会影响您的项目。
一旦您的文件夹位于本地存储库文件夹中，您就可以将更改保存到存储库。 在 GitHub 上，保存的更改称为提交。 每次提交更改时，您都必须发表评论来描述您的更改。
要提交您的更改，请在“摘要（必填）”字段中添加注释，并在桌面应用程序左下角的“说明”字段中添加您想要包含的任何其他信息：
然后单击位于文本字段下方的蓝色按钮“Commit to master”，此操作会将您的更改保存到项目的“主”分支。 请注意，GitHub 以前使用单词“master”而不是“main”来表示用户存储库的主要分支。 请参阅他们的 重命名这些约定 的信息，并参考 GitHub 在他们的时间表上推出这些更改。 在 GitHub 上，主分支或主分支是项目的最终分支，可以将其复制以同时处理同一存储库的不同版本。 要了解有关分支的更多信息，您可以访问我们的教程 如何使用 Git 分支 或 GitHub 的 文档 。
将更改提交到主分支后，左侧面板中的文件将消失，因为此面板仅显示包含未提交更改的文件。 您应该会在左下角收到一条消息，指出您的提交已成功。
第 5 步 — 将提交的文件推送到 GitHub
在最后一步中，您将更改提交到 local 机器上的存储库。 但是，此存储库尚未推送到您的 GitHub 帐户。 在这一步中，我们会将此提交推送到您在 GitHub 上的存储库，这会将您的网站文件添加到您的 GitHub 存储库。
要将本地存储库发布到 GitHub 存储库，请单击蓝色的“发布存储库”按钮：
单击按钮后，将出现一个模式，要求您填写存储库的名称和描述。 填写您的详细信息。 如果您愿意，可以将存储库保密。
填写您的详细信息后，单击蓝色的“发布存储库”按钮。 文件上传完成后，您的存储库应该在您的 GitHub 帐户上可用。 要检查，请访问相关 URL，其格式如下：
https://github.com/your_github_account_name/your_repository_name
请务必将突出显示的文本替换为您的帐户名称和存储库名称。 您应该会收到一个显示您的存储库文件的网页：
现在您的网站文件托管在 GitHub 上，我们可以将它们与 App Platform 一起使用。 但是，首先，我们需要创建一个 DigitalOcean 帐户。
第 6 步 — 创建您的 DigitalOcean 帐户
要创建 DigitalOcean 帐户，请访问 注册页面 并在以下选项中进行选择：
- 输入电子邮件地址和密码
- 使用 Google 单点登录
- 使用 GitHub 单点登录
如果您选择使用电子邮件地址和密码，则需要使用自动发送给您的电子邮件来验证您的电子邮件地址。
请注意，您需要输入付款方式来验证您的身份并阻止垃圾邮件发送者。 不会向您收费。您可能会看到临时预授权费用以验证卡，该费用将在一周内撤销。
一旦您验证了您的帐户，您应该可以访问App Platform。 有关注册 DigitalOcean 帐户的完整文档，请访问我们的指南 注册 DigitalOcean 帐户
您现在已准备好进行下一步。
第 7 步 — 使用 DigitalOcean 应用平台部署您的网站
在这一步中，我们将使用 App Platform 部署我们的静态网站。
首先，访问 DigitalOcean App Platform 门户并点击蓝色的“Launch Your App”按钮：
在下一页上，系统将提示您选择 GitHub 存储库。 由于您尚未将您的应用平台帐户连接到您的 GitHub 帐户，因此您需要单击“链接您的 GitHub 帐户”按钮：
然后将提示您登录您的 GitHub 帐户（如果您尚未登录）并选择您要连接到 App Platform 的帐户。 选择后，您将被定向到一个页面，您可以在其中选择允许 App Platform 访问的存储库。 单击“仅选择存储库”按钮并选择您在第 5 步中推送到 GitHub 帐户的存储库：
完成后，单击网页底部的“保存”按钮。 您现在将被引导回 App Platform，您现在应该能够在下拉菜单中选择您的存储库：
选择您的存储库后，单击“下一步”。 然后将提示您选择 Autodeploy 的名称、分支和选项。 如果选中 Autodeploy 框，您对存储库文件所做的任何未来更改都将立即推送到您的实时站点。 进行选择，然后单击“下一步”：
接下来，您将被带到一个页面，您可以在其中配置您的应用程序。 此页面应自动将您的组件类型检测为“静态站点”：
您无需在此页面上进行任何更改。 向下滚动并单击页面底部的蓝色按钮“下一步”。 如果您想将此站点部署为免费的三个静态站点之一，您将被引导到一个新窗口，您可以在其中选择“初学者”计划：
选择您想要的计划，然后单击“启动您的入门应用程序”按钮。 您将被定向到应用的管理页面。 当您的应用程序完成部署后，您将看到“已成功部署！” 信息：
.
您还将在页面顶部的应用名称下方看到一个链接。 单击链接以确保您的网站正常运行。 您应该被引导到包含您已发布网站的新网页。 如果您的网站没有出现，请返回并检查错误。
您的静态网站现在应该通过 App Platform 发布到网络上。 任何知道应用链接的人都可以访问您的网站。 如果您想将自定义域添加到您的站点，请访问我们的应用平台产品文档中的 如何管理自定义域 指南。
结论
在本教程中，您学习了如何使用 App Platform、GitHub 帐户和 GitHub Desktop 应用程序部署静态站点。 如果您希望对您的网站进行更改，请在您的本地计算机上编辑您的文件，然后按照第 4 步和第 5 步中的说明将更改提交并推送到您的 GitHub 存储库。 一旦您的更改被推送到您的 GitHub 存储库，如果您在步骤 7 中选择了“推送时自动部署”选项，它们应该会在您的站点上自动更新。
更多关于App Platform的信息，请访问官方App Platform产品文档。 请记住，您最多可以托管三个免费的静态站点。 如果您想删除您的应用程序，请按照产品文档中销毁应用程序一节中的说明进行操作。
