鲁达 使用 GitHub Pages，您可以免费创建和发布网站。这适合炫耀您一直在从事的项目、您的作品集（用于您的个人网站）或您的组织/公司。
常规的静态网页可以轻松部署，也可以只显示存储库的README.md.
默认显示 README.md
那么我们如何才能将我们制作的单页应用程序（使用 React、Svelte 等）部署到我们的 GitHub Pages 中呢？这很简单。
请记住，如果您的网站使用后端，它可能必须托管在其他地方。
第 1 步：您的项目存储库！
如果您正在制作个人网站，请确保将您的存储库命名为youru. 显然，这是 GitHub 的另一个“秘密”，这样网站就不会在路径下/，而只是youru.
项目存储库
如果您的存储库名称与上述不同，您的网站可以在youru/repository-name.
此外，除非您拥有Pro GitHub 帐户，否则您的私有存储库无法启用 GitHub Pages。因此，如果您的存储库包含任何敏感信息，请记住这一点。
升级通知
第 2 步：安装 gh-pages 包
npm 包对于将您的应用程序部署到 GitHub Pagesgh-pages是必需的。因此，只需将其安装在您的项目中：devDependencies
npm i -D gh-pages第 3 步：您的脚本
转到并添加以下脚本：
“预部署”：“npm 运行构建”，“部署”：“gh-pages -d 构建”"predeploy"必须指向构建应用程序的生产就绪、优化版本的脚本。至于"deploy"脚本，-d标志后面的文件夹名称gh-pages就是要部署的。就我而言，它被称为build.
总而言之，"predeploy"将获取您的代码并将优化版本构建到构建文件夹中。该"deploy"脚本将获取该文件夹的内容并将其部署到 GitHub Pages。所以请确保指向正确的脚本和文件夹！
第 4 步：构建和部署
只需在终端中运行"deploy"脚本即可。在将构建发送到 GitHub 之前，将首先调用npm run deploy该脚本。"predeploy"
当您看到终端说Published时，您可以继续检查您的存储库的分支。您将看到另一个名为gh-pages. 此分支包含您的应用程序的生产版本。
分支机构
要更改您的应用程序部署到的分支，您可以将-b标志添加到您的脚本，后跟您选择的分支名称：
“部署”：“gh-pages -d build -b 分支名称”第 5 步：启用 GitHub 页面
如果您的存储库名称类似youru，您的 GitHub Pages 将自动启用。当您进入页面时，它只会显示您的存储库README.md，如上所示。但是，我们希望它显示我们刚刚部署的应用程序。现在让我们这样做：
转到您的存储库设置，然后单击Pages：
页面设置
在此页面中，您可以选择要部署的任何分支和文件夹。确保选择脚本刚刚部署到的分支，在我的情况下，它将是gh-pages. 单击保存，GitHub Actions 将开始部署应用程序。
部署到 GitHub 页面的 GitHub 操作
完成后，当您转到您的 URL 时，将显示您的应用程序。
我用 React 制作的个人网站部署在 GitHub Pages 中
我们去吧！您的应用程序现已部署并公开。任何输入您的URL的人都可以访问它。
提示：路由
对于多个页面之间的路由，应该使用哈希路由器。是的，您的 URL 之间会有一个#，但如果不使用，则无法直接访问其他页面。
对于 React，你可以导入HashRouterfrom react-router-dom，而对于 Svelte，你可以只导入Routerfrom svelte-spa-router。
GitHub Pages 错误页面
提示：网站图标
我在我的网站上添加了一个图标。但是当发布在 GitHub Pages 上时，它却无处可寻。
当应用程序在 GitHub Pages 上发布时，网站图标的链接方式会有所不同。这是一个对我有用的：
<link rel="快捷图标" type="image/x-icon" href="; />最后的问号 (?)是网站图标能够显示所需要的。另外，请确保开头没有斜线。/
结论
这就是您可以使用 GitHub Pages 发布自己的单页应用程序的方式。老实说，这很简单。感谢您的阅读，我希望这可以帮助您建立自己的网站，或者展示您的项目的网站。