如何在 GitHub Pages 上托管静态网页
介绍
创建 Web 应用后，您需要某种方式让世界其他地方可以访问它。GitHub Pages 为静态内容提供免费托管；这对于托管图书馆的博客或文档站点非常有用。
本指南将引导您将静态网页部署到 GitHub Pages。我们将演示如何在 GitHub 存储库上启用 GitHub Pages、使用 Github Actions 设置持续部署以及最终测试页面。本指南始终使用SnapShot （一个简单的 React 应用程序）作为示例静态网站以供入门。本指南假定您对 Git 命令行和 GitHub 有基本的了解。如果您不熟悉这些工具，可以观看GitHub 入门指南。
GitHub 正在将其默认分支名称从master更改为main。本指南将使用术语master分支，因为它是撰写本文时的当前默认分支名称。您可以通过阅读GitHub 关于从 master 重命名默认分支的官方文档来了解有关此更改的更多信息。
在 GitHub 存储库上启用 GitHub Pages
在开始使用 GitHub Pages 之前，您需要两样东西：
- 您想要托管的静态 Web 内容
- GitHub 存储库，用于存储您想要共享的静态 Web 内容
如果您还没有静态 Web 内容，您可以按照本指南将SnapShot克隆到您创建的新 GitHub 存储库中。
将源代码提交到存储库后，您需要配置 GitHub 将在存储库中查找要提供的静态内容的位置。支持三种主要模式：
- 从特定分支的根文件夹提供静态内容。按照惯例，此分支通常命名为gh-pages 。
- 为特定分支（例如master）的/docs文件夹提供服务
- 为单独存储库的主分支的根文件夹提供服务。一个存储库保存源代码，另一个存储库存储要提供的构建工件。
由于您正在部署 React 应用程序，因此您需要使用第一种部署模式。此模式有几个优点：
- 通过将源代码和构建工件提交到同一个分支，您不会混淆关注点。
- 您不需要管理两个独立的 GitHub 存储库。
首先推送gh-pages分支。分支的初始内容无关紧要，因为它将被本指南下一步中的构建工件覆盖。
git checkout -b gh-pages
git push -u origin gh-pages
然后检查项目的配置。转到您的 GitHub 存储库，单击设置选项卡，然后向下滚动到 GitHub Pages 部分。分支应配置为gh-pages，文件夹应设置为/（根目录），如下图所示。
记下该网站的 URL，您将在本指南的后面使用它。
使用 GitHub Actions 设置持续部署
每次更新源代码时，你都希望 GitHub Pages 自动更新新内容。设置此设置的一个简单方法是使用GitHub Actions。
在/.github/workflows/publish.yaml的存储库内创建以下 yaml 定义。
name: Publish to gh-pages
on:
repository_dispatch:
push:
branches:
- master
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Use Node.js
uses: actions/setup-node@v1
with:
node-version: '12.x'
- run: yarn
- run: yarn run build
- name: Deploy
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./build
该文件指示 GitHub 在每次推送到主分支时执行以下操作序列：
- 安装您的依赖项。
- 构建生产包。在本指南中，它们位于/dist中。
- 将/dist的内容部署到同一个存储库的gh-pages分支中。
在上述位置提交 yaml 文件并推送到 master。该操作将自动出现在存储库的Actions选项卡中。
测试您的网站
GitHub Actions 执行完成后，可能需要几分钟时间才能将内容公开。等待几分钟，然后导航到本指南中前面保存的 URL：https://{username}.github.io/{repositoryname}。
修复基本 URL
{
"homepage": "https://chinwobble.github.io/pl-static-content"
}
请注意，您需要用之前提供的 URL 替换主页属性。
推送更新的package.json文件并等待 GitHub Action 完成后，您应该会看到您的网站这次正确加载。
结论
在本指南中，我们介绍了如何将 React 应用程序部署到 GitHub Pages，并使用 GitHub Actions 将所有内容整合在一起。共享您的 Web 内容既快速又简单。下一步，您可能需要向您的网站添加自定义域。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~