如何使用 Github 页面建立一个简单的免费网站

网站每天都变得更容易托管，许多服务提供的套餐起价不到 5 美元。但是，如果您只想要一个不会看到大量流量的简单网站，您可以免费在 Github 上托管，即使使用您自己的域也是如此。

什么是 Github 页面？

Github 是一个代码托管服务，通过. 虽然它通常被程序员使用，但他们的一个常见用例是运行简单的 wiki、简历或文档站点，这些站点没有看到大量的日常流量，只需要一个免费建立网站的地方。

git

为此，创建了 Github Pages，它允许您免费托管 HTML 文件和其他资产。这与 Github 的普通文件托管没有太大区别——您可以完全免费在存储库中托管文件，托管静态站点就像托管文件一样。

您可以为您的用户名设置页面，或为每个存储库设置页面。默认情况下，Github 会为您分配一个子域 url，例如 或。这可以更改为任何自定义 URL。

username.github.io

username.github.io/repository

什么是静态网站？

需要注意的重要一点是 Github Pages 仅适用于 静态网站。这并不一定意味着您的网站不能是交互式的，它只是意味着您的网站是直接从 HTML、JS 和 CSS 文件托管的。

静态网站的主要限制是它不能依赖服务器来更改每个请求的内容，就像 PHP 这样的语言。例如，如果您想让用户登录并查看个人资料，或托管 WordPress（连接到数据库服务器），您必须在其他地方托管。

但是，如果您为 React 等客户端 JavaScript 框架提供服务，您实际上可以从 Github Pages 或任何其他静态网站托管服务提供商托管整个 Web 应用程序。这是因为所有内容都是在客户端设备上生成的，而您提供的唯一内容是 包含所有代码的文件。

bundle.js

Github 页面限制 - 非商业用途

当然，这有一些限制。本质上，您不应该将 Github Pages 主要用于商业用途。具体来说，他们说它被禁止用作“免费的网络托管服务来运行您的在线业务、电子商务网站或任何其他主要旨在促进商业交易的网站。”。

因此，如果您计划在 Github Pages 上运营您的业务，您可能需要考虑其他替代方案。两种非常相似的“免费托管”方法是使用AWS Simple Storage Service 存储桶来托管静态网站，或者使用Google 的 Firebase 静态托管。两者都适用于业余和专业静态站点部署，并且具有免费层级，可以节省您每月支付 10 美元来托管自己的服务器的费用。

Github Pages 也有大小限制和软带宽限制，尽管它们相当合理。您的站点不能超过 1 GB（无论如何，您可能会在为这种大小的站点提供服务时遇到问题），如果您每月的带宽超过 100GB，Github 可能无法为您的站点提供服务。作为参考，这些数据量在 AWS 上每月将花费您大约 10 美元。

设置页面

Github Pages 设置起来非常简单，如果您熟悉 Github，它应该会更容易。

基本上，存储库有两种选择——用户页面或项目页面。如果您使用的是自定义域，那应该没多大关系，但如果您想要一个漂亮的 URL，您将需要使用一个用户页面，它会为您提供一个格式为 . 如果您使用项目页面，您可以设置多个页面，但每个页面都位于

username.github.io

username.github.io/repository.

无论哪种情况，您都必须创建一个新的存储库。如果您正在制作用户页面，请将其设置为您的用户名加。确保它也是公开的。

.github.io

viversgames.github.io

在此之后，您将需要一个 Git 客户端来连接到 Github 并推送您的网站。你可以使用终端，或者像Github Desktop这样的 GUI 客户端。使用快速设置中提供给您的 URL：

或者，如果您使用的是 Github 桌面应用程序，您可以简单地按名称搜索它：

然后，您需要添加内容。如果您有一个想要使用的现有模板，请将所有资产（HTML、CSS、JS 文件、图像）复制到此目录，该目录本质上是托管所有内容的“webroot”。最重要的是，这是您网站的主页。

index.html

一旦一切都在本地运行，您需要提交更改，并将它们发布到 Github。

您很快就会在您的存储库中看到新文件，但您必须启用 Github Pages 才能使其完全工作。在存储库页面中，单击“设置”并向下滚动到“页面”。选择 为您的网站提供服务的分支，然后单击“保存”。

main

全部更新可能需要几分钟，而且每小时只会更新 10 次，所以不要太快进行更改。

您还需要在 Github 页面设置中启用“Enforce HTTPS”。

添加自定义域

添加自定义域非常简单。您首先需要购买一个，您可以从许多不同的注册商处购买。一些很好的例子是Google Domains、Namecheap或GoDaddy。

注册后，您需要将您的域指向您的 Github 页面。但是，您不能只将 URL 粘贴到此处；您需要创建一个指向. 如果您打算使用，请将 Host 值设置为。如果要单独使用基域，请将 Host 值设置为。

username.github.io

www

www

@

在等待 DNS 记录在互联网上同步几分钟后，您应该能够在您的自定义 URL 上看到新创建的 Github Pages 站点，并且设置菜单应该将其显示为已连接。