如何使用 GitHub Pages 托管你的网站（即使有多个仓库）

你有没有试过托管一个网站，但却不知道在哪里发布，或者怎么发布？现在有很多托管网站，GitHub 就是其中之一。

GitHub Pages是一项功能，允许你直接从你的仓库托管你的网站。让我们看看如何操作。

步骤 1. 确保你的代码在 GitHub 上

由于 GitHub Pages 从 GitHub 存储库中的 *​​.html 文件运行，因此您需要确保您的代码确实在 GitHub 上。

如果您尚未上传代码，请按照以下步骤操作：

1. 转到您的个人资料：github.com/YOUR_USERNAME
2. 点击“存储库”选项卡
3. 点击“新建”
4. 给你的存储库（repo）命名
5. 如果您不想让别人看到您的代码，请点击“私人”。即使您的代码库是私人的，上线的网站也会被所有人看到。
6. 添加您喜欢的任何选项
7. 点击“创建存储库”

现在您应该有一个 repo，您​​可以通过单击“代码”选项卡，然后单击“添加文件”来上传您的 *.html 文件。

步骤 2. 启用 GitHub Pages

现在你的 *.html 文件已在你的 GitHub 仓库中，你可以启用 GitHub Pages 了。确保你的 *.html 文件位于仓库中，然后按照以下步骤操作：

1. 转到“设置”选项卡（请注意，这是显示在您的仓库上的“Insights”选项卡旁边的设置选项卡。这不是您的个人 GitHub 设置
2. 向下滚动直到在左侧找到“页面”
3. 点击“页面”
4. 单击“源”下拉菜单并选择从哪个分支绘制 *.html 文件
5. 点击“保存”

现在你的网站上线了！访问地址如下：
YOUR_USERNAME.github.io

如果您想“取消发布”您的 GitHub 页面，请点击上面步骤 4 中的“来源”下拉菜单，然后选择“无”。现在您的页面已取消发布。

步骤 3. 自定义您的网站

现在您的网站（或 GitHub 页面）已上线，您可以进行一些自定义。如果您有多个代码库想要用作 GitHub 页面，请继续阅读。也就是说，两个网站不能使用相同的网址。

网站主题

完成上述第 2 步后，您将在“页面”设置下看到更多选项。您可以点击“选择主题”来为您的网站添加精美的外观（CSS）。

这会将您带到一个网站，您可以在其中选择一个模板来美化您的网站。如果您只有一个 *.html 文件，那么使用模板会让您的网站看起来更棒。否则，您可以为您的网站编写一些 CSS。我们这里就不赘述了。

自定义域

您的网站可以通过 GitHub 提供的 URL 访问，但您也可以选择自定义域名。这是您拥有的域名，必须通过域名提供商（例如Namecheap ）购买。

购买域名后，请在“Pages”设置下添加您的域名，例如https://YOUR_NAME.info。这会将 GitHub Pages 链接指向此自定义域名，您的网站将出现在您指定的地址上。

为了使其正常工作，您需要在域名提供商端进行一些设置。有关如何设置这些设置的信息，请阅读 GitHub 文档。

TL;DR 是您需要添加这些 A 记录：

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

您还需要添加一个 CNAME 记录，其值为您原始 GitHub 页面的 URL，例如：

我的域名在Namecheap上显示如下。根据域名提供商的不同，您的域名可能略有不同。

如果您为网站添加了自定义域名，则可以选择关闭“强制使用 HTTPS”。通常情况下，您需要勾选此选项以确保网站的安全。仅当您使用其他方法保护网站安全时，才需要取消勾选此选项。

如果您有多个存储库怎么办？

GitHub Pages 发布在以下 URL：YOUR_USERNAME.github.io。如果此链接使用了你的用户名，并且你的 GitHub 用户名下有多个仓库，会发生什么情况？这些仓库会不会发生冲突？GitHub 通过在以下 URL 发布后续仓库来解决这个问题：

YOUR_USERNAME.github.io/YOUR_REPO_NAME

您只需确保每个自定义域名的 CNAME 指向正确的地址，YOUR_USERNAME.github.io并且您已添加上述 A 记录即可。GitHub 会为您完成剩下的工作。添加自定义域名后，您可能需要等待一段时间才能让自定义 URL 生效。请耐心等待 DNS 刷新完成。我可能吃过不少苦头才明白这一点！

享受你闪亮的新网站✨

一旦您的域名正确路由，您的新网站将在您指定的域名或默认github.io地址上可用。

这是托管网站最简单的方法之一。在 GitHub Pages网站上了解更多关于 GitHub Pages 的信息。如果您想了解更多关于此主题的信息，或者想查看其他教程，请告诉我。