🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

如何使用GitHub Pages免费发布网站（静态网站入门）

在本Git/GitHub入门系列的前几篇文章中，我们已经学习了从创建账户开始，到基本命令操作，再到使用分支进行团队开发的基本流程。

作为本系列的收官之作，本次我们将介绍一个名为GitHub Pages的强大功能，它能让您将自己托管在GitHub上的项目，作为网站免费向全世界发布。这是发布个人作品集网站、所制作Web应用的演示页面等的最佳方式。让我们掌握这最后一步，向世界展示您的作品吧！

GitHub Pages是什么？它有何过人之处？

GitHub Pages是GitHub提供的一项静态网站托管服务。所谓静态网站，是指仅由HTML、CSS、JavaScript等无需服务器端处理的文件构成的网站。虽然它无法与PHP或数据库进行交互，但对于个人作品集、博客、项目文档网站等多种用途来说，其功能已绰绰有余。

GitHub Pages的主要优点如下：

两种发布方式！用户站点与项目站点

GitHub Pages根据用途提供了两种发布方式。

  1. 用户站点（或组织站点）
    • URL: `你的用户名.github.io`
    • 特点: 每个账户只能创建一个。仓库名必须为“`用户名.github.io`”。最适合用作个人作品集或博客的首页。
  2. 项目站点
    • URL: `你的用户名.github.io/仓库名/`
    • 特点: 每个普通仓库都可以创建一个。创建数量没有限制。适合用作单个项目的演示页面或文档站点。

本次，我们将解说无论哪个仓库都能轻松尝试的“项目站点”的发布方法。

实践！发布项目站点的步骤

让我们来尝试将之前文章中创建的`my-first-repo`仓库作为网站发布吧。

第一步：进入希望发布的仓库的“Settings”

首先，在GitHub上打开希望发布的仓库页面，然后从标签页中点击“Settings”。

[图片：GitHub仓库标签页列表中，“Settings”被高亮显示]

第二步：在“Pages”部分选择发布源

在Settings页面的左侧菜单中点击“Pages”。请注意“Build and deployment”项目下的“Source”设置。

[图片：在GitHub Pages的源选择中，“Deploy from a branch”被选中]

请确认已选择“Deploy from a branch”。这是最基本的方法，即“根据特定分支来发布网站”。

第三步：选择要发布的分支并保存

在“Branch”项目中，设置要发布哪个分支。由于我们希望发布`main`分支的代码，请进行如下设置：

设置完成后，点击“Save”按钮。

[图片：分支选择为`main`，文件夹选择为`/(root)`，并按下“Save”按钮的示意图]

第四步：确认已发布的URL

按下Save按钮后，页面会重新加载，顶部会显示一个绿色的横幅，写着“Your site is live at ...”。网站发布到互联网上可能需要1到2分钟的时间。

[图片：GitHub Pages设置页面顶部显示的“Your site is live at...”绿色横幅]

试着点击显示的URL吧。如果之前创建的“Hello, World!”页面能作为一个可供互联网上任何人访问的网站显示出来，那就成功了！

如何更新网站

GitHub Pages的绝佳之处在于更新非常简单。只需在本地修改文件，然后将这些更改推送到（push）已设为发布源的分支（本次为`main`），几分钟后，内容就会自动反映到已发布的网站上。

让我们来试试吧。在本地修改`index.html`文件的内容。

echo "<h1>我的网站已更新！</h1>" > index.html

将更改进行`add`和`commit`。

git add index.html
git commit -m "为GitHub Pages更新index.html"

最后，将更改`push`上去。

git push origin main

推送完成后，等待1到2分钟，然后重新加载您刚才发布的网站URL。页面内容应该已经更新了。

总结：用GitHub向世界展示你的作品吧！

通过这个GitHub入门系列，您体验了从创建账户开始，到Git的基本操作、协同开发的流程，最终亲手发布网站的全过程。作为一名Web开发者，这是非常重要的一大步。

在这里学到的知识，将成为您今后开发活动的坚实基础。请务必尝试用GitHub Pages发布您自己的作品集或新创建的项目，让全世界的人都看到吧。祝您的开发生活更加舒适和富有创造力！

相关模板