如何使用GitHub Pages部署前端应用

梦幻舞者 2021-08-06 ⋅ 16 阅读

GitHub Pages 是一个免费的静态网页托管服务,提供了一个简单方便的方法来展示和分享你的静态前端应用。本文将介绍如何使用 GitHub Pages 部署前端应用,并分享一些GitHub Pages的高级功能。

步骤一:创建 GitHub 仓库

首先,在 GitHub 上创建一个新的仓库,用于托管你的前端应用。仓库名称应该包含你的 GitHub 用户名,并以 .github.io 结尾,例如 username.github.io

步骤二:准备前端应用

接下来,将你的前端应用准备好,并将项目文件推送到你在步骤一中创建的 GitHub 仓库中。确保你的项目中包含一个 index.html 文件,作为你的网站主页。

步骤三:设置仓库的 GitHub Pages

  1. 在你的仓库页面上,点击 Settings(设置)选项卡。
  2. 在左侧导航栏中选择 Pages(页面)。
  3. 在 Source(源)部分选择 Branch: main(分支为你的主分支)。
  4. 点击 Save(保存)按钮。

现在,你的前端应用已经部署到了 GitHub Pages,并可以通过访问 username.github.io 来查看你的网站了!

高级功能:自定义域名

如果你想使用自己的域名来访问你的 GitHub Pages,可以按照以下步骤进行设置:

  1. Settings(设置)选项卡中,找到 Pages(页面)部分。
  2. Custom domain(自定义域名)输入框中输入你想要使用的域名。
  3. 在你的 DNS 服务商处,设置一个 CNAME 记录,将你的域名指向 username.github.io

请注意,DNS 的刷新可能需要一些时间,你可能需要等待几分钟或几个小时才能在你的自定义域名上看到变化。

绑定自定义域名的 HTTPS 支持

GitHub Pages 默认支持通过 https://username.github.io 访问你的网站,但如果你绑定了自定义域名,你可能需要额外的步骤来启用 HTTPS。

  1. 在你的仓库页面的 Settings(设置)选项卡中的 Pages(页面)部分,确保你已经设置了你的自定义域名。
  2. 在你的 DNS 服务商处,添加一个 A 记录,将你的域名指向 185.199.108.153
  3. 添加另外三个 A 记录,将你的域名指向以下三个 IP 地址:185.199.109.153185.199.110.153185.199.111.153

完成上述步骤后,你的 GitHub Pages 将支持通过 https://your-domain.com 访问,并获得 HTTPS 安全连接。

总结

使用 GitHub Pages 部署前端应用非常简单,并且提供了许多方便和强大的功能,如自定义域名、HTTPS 支持等。借助这些功能,你可以轻松展示和分享你的前端作品。祝你部署愉快!


全部评论: 0

    我有话说: