介绍

下一步是决定如何向网络发布。 发布您网站的一种方法是通过DigitalOceanApp Platform作为应用程序部署,该平台提供[三个静态站点的免费托管(https://www.digitalocean.com/docs/app-platform/# free-and-professional-tiers). 部署应用程序往往需要建立基本的服务器基础设施。 App Platface 自动化此工作, 允许您从 GitHub 寄存器将您的静态网站部署到云中 .

此教程将引导您通过使用 App 平台、 GitHub( 软件开发平台) 和 GitHub 桌面应用程序向云部署静态网站的所有步骤 。 这里的指示应该为您在本地环境中所建的任何静态网站工作, 包括用我们的教程系列创建的网站[如何用 HTML (https://www.digitalocean.com/community/tutorial_series/how-to-build-a-website-with-html ) 。 如果你没有准备部署的网站, 或只想测试App平台, 到本教程结束时,您应该有一个已公布的网站,并了解如何从一个带有 App 平台的 GitHub 寄存器向云部署网站.

注意:如果您已经为您的网站项目拥有一个 GitHub 帐户和 GitHub 存储库,您可以跳过 步骤 6以了解如何开始使用 App 平台。

前提条件

• 用于静态网站的文件,例如在教程系列中创建的文件 How To Build A Website With HTML或自行创建的文件. 确保您的网站文件在本教程进行之前在本地工作。 * 电子邮件地址注册免费的GitHub帐户。 * 信用卡或Paypal帐户注册DigitalOcean的云服务。

第1步:创建一个GitHub帐户

如果你还没有GitHub帐户,你需要注册一个,这样你就可以为你的项目创建一个GitHub存储库。GitHub是一个软件开发平台,允许开发人员托管,共享和协作编码项目。

一旦你确认了你的帐户,你已经准备好进入下一步. 记住你的登录凭证,因为你需要他们在步骤3。

第2步:下载并安装GitHub桌面应用程序

许多开发人员使用命令行接口(CLI)工具Git与GitHub互动,但如果你不熟悉使用计算机终端,你也可以使用GitHub桌面应用程序。

下载 GitHub 桌面应用程序,按照 GitHub 桌面主页的指示下载,然后打开下载的应用程序文件并按照指示完成安装过程。

安装完成后,您已经准备好进入下一步。

第3步:为您的网站项目创建一个GitHub存储库

在此步骤中,我们将使用GitHub桌面应用程序在您的计算机上创建一个本地存储库,用于您的网站项目。

首先,打开 GitHub 桌面应用程序. 点击登录 GitHub.com蓝色按钮 :

按照提示,将 GitHub 桌面应用连接到您的 GitHub 帐户。一旦桌面应用连接到您的帐户,应该出现一个窗口,提供开始选项。点击在您的硬盘上创建一个新的存储库按钮(从顶部的第三大按钮):

接下来,您将被要求填写您的新存储库的详细信息:

在此窗口中,输入以下信息:

• 您的存储库的名称. 对于本教程,我们将称之为我的静态网站 * 您的存储库的描述以参考。

您可以将自动生成的本地路径留在原地,GitHub Desktop 将您的项目存储在本地机器上。

如果您想添加一个文件来存储您的网站的文档,您可以检查使用 README初始化库的选项。

Git Ignore 选项允许您选择模板来忽略某些文件。许可证选项允许您为您的作品选择开源许可证. 要了解更多关于不同的开源许可证选项,您可以访问 Open Source Initiative 的 许可证和标准列表。

点击创建存储库。桌面应用程序现在应该显示您新创建的存储库的详细信息。

一旦你的存储库被创建,你应该准备好继续到下一步。

步骤4:将网站文件复制到GitHub存储库

在此步骤中,我们将复制您的网站项目的文件,并将其放置在新创建的GitHub存储文件夹中。

注:如果您想使用我们的样本网站来探索应用平台,请从 GitHub 存储库下载 zip 文件,点击右上角的绿色代码按钮并选择下载 ZIP选项:

一旦 ZIP 文件已完成下载,卸载该文件以访问包含网站文件的文件夹. 此文件夹将在下面的步骤中作为您的网站项目的工作文件夹。

首先,在桌面上,打开网站项目的 working folder,或当前存储网站项目的所有文件和文件夹的文件夹。

接下来,查找并打开您在步骤 3 中命名的新创建的存储文件夹,在本示例中,存储文件夹被称为我的静态网站。

将文件从您的工作文件夹复制到您的存储文件夹. 要复制文件,您可以选择您的网站的所有文件,同时点击右键 (在 Windows 上) 或CTRL + 左键 (在 Mac 上),然后选择复制 X 项目。 然后,将文件的副本粘贴到存储文件夹中,点击存储文件夹,点击右键 (在 Windows 上) 或CTRL + 左键 (在 Mac 上),然后选择粘贴 X 项目:

将文件粘贴到您的存储文件夹后,GitHub 桌面应用程序应该在应用程序窗口左侧的更改面板中显示文件:

如果您使用的是 macOS 操作系统,请不要担心在更改面板中添加了.DS_STORE 文件,这是一个自动生成的文件,存储了有关文件夹的信息,不应该影响您的项目。

一旦您的文件夹在本地存储文件夹中,您就可以将更改保存到存储中。在GitHub上,所保存的更改被称为委托。

要进行更改,请在字段中添加一个评论,上面写着总结(需要)以及您希望在桌面应用程序左下角的描述字段中包含的任何额外信息:

然后单击文本字段下方的蓝色按钮承诺掌握, 此动作将保存您对项目 主要 分支的更改 。 请注意,GitHub以前使用 " master " 一词,而不是 " Main " 一词作为用户储存库的主要分支。 请见它们关于这些公约更名的信息,并参考GitHub关于它们推出这些变化的时间表。 在"GitHub"上,主或主分支是工程的确定分支,可以被复制来同时研究同一寄存器的不同版本. 欲了解更多分支,您可以访问我们的教程[如何使用 Git 分支 (https://andsky.com/tech/tutorials/how-to-use-git-branches) 或 GitHub 的 [文档] (https://guides.github.com/activities/hello-world/# branch) .

一旦您对主分支进行了更改,左侧面板上的文件将消失,因为该面板只显示包含未承诺更改的文件。

步骤5 - 将承诺的文件推向GitHub

在最后一步中,您已经对您的 local 机器的存储库进行了更改,但是,此存储库尚未被推到您的 GitHub 帐户中,在此步骤中,我们将将此承诺推到您的 GitHub 存储库中,该存储库将添加您的网站文件到您的 GitHub 存储库中。

要将您的本地存储库发布到您的 GitHub 存储库,请点击蓝色发布存储库按钮:

一旦你点击按钮,会出现一个模式,要求你填写你的存储库的名称和描述. 填写你的详细信息. 如果你愿意,你可以把存储库保密。

填写您的详细信息后,点击蓝色发布存储库按钮. 完成上传后,您的存储库应该在您的 GitHub 帐户中可用。

1https://github.com/your_github_account_name/your_repository_name

请确保用您的帐户名称和存储库名称替换突出的文本,您应该收到显示存储库文件的网页:

现在你的网站文件在GitHub上托管,我们可以与App平台一起使用它们,但首先,我们需要创建一个DigitalOcean帐户。

第6步:创建您的DigitalOcean帐户

若要创建 DigitalOcean 帐户,请访问 登录页面并选择以下选项:

• 输入电子邮件地址和密码 * 使用 Google 单一登录 * 使用 GitHub 单一登录

如果您选择使用电子邮件地址和密码,则需要使用自动发送给您的电子邮件来验证您的电子邮件地址。

请注意,您需要输入付款方式来验证您的身份,并将垃圾邮件发送者排除在外。 **您将不会被收取费用。

一旦您验证了您的帐户,您应该能够访问 应用平台。 有关注册 DigitalOcean帐户的完整文档,请访问我们的指南 注册 DigitalOcean帐户

现在你已经准备好迈向下一步了。

第7步:使用DigitalOcean应用平台部署您的网站

在此步骤中,我们将部署我们的静态网站与App平台。

首先,请访问 DigitalOcean App Platform 门户,然后点击蓝色启动您的应用程序按钮:

在下一页,您将被提示选择您的 GitHub 存储库. 由于您尚未将您的 App Platform 帐户连接到您的 GitHub 帐户,您将需要点击链接您的 GitHub 帐户按钮:

然后,您将被要求登录您的 GitHub 帐户(如果您尚未登录),并选择您想要连接到 App Platform 的帐户。一旦选择,您将被引导到一个页面,您可以选择哪些存储库允许 App Platform 访问。

当你完成时,点击网页底部的保存按钮.你现在将被引导回 App 平台,在那里你现在应该能够从下滑菜单中选择你的存储库:

选择您的存储库后,点击下一步。您将被提示选择 Autodeploy 的名称、分支和选项。如果检查 Autodeploy 框,您对存储库文件的任何未来更改将立即推到您的现场网站。

接下来,您将被带到一个可以配置应用程序的页面,该页面将自动检测您的组件类型为静态网站:

您不应该在这个页面上做出任何更改。 滚向下,点击页面底部的蓝色下一步按钮。 您将被引导到一个新的窗口中,如果您想将这个网站部署为您的三个免费静态网站之一,您可以选择开始计划:

选择您想要的计划,然后点击启动您的初始应用程序按钮。您将被引导到您的应用程序的管理页面。当您的应用程序完成部署时,您将看到成功部署!消息:

.

您还会在页面顶部看到您的应用程序名称下的链接。 点击链接以确保您的网站正常工作。 您应该被引导到与您发布的网站的新网页。

您的静态网站现在应该通过 App Platform 发布到网络上。任何具有应用链接的人都可以访问您的网站。如果您想为您的网站添加自定义域名,请参阅 App Platform 产品文档中的 如何管理自定义域名指南。

结论

在本教程中,您已了解如何使用 App Platform 部署静态网站,使用 GitHub 帐户和 GitHub 桌面应用程序. 如果您想对您的网站进行更改,请在本地机器上编辑文件,并按照步骤 4 和 5 所指示对您的 GitHub 存储进行更改。

有关 App Platform 的更多信息,请访问官方 App Platform 产品文档。 请记住,您可以托管多达三个免费的静态网站。