GitHub 之 GitHub page 搭建教程

一. 前言

如果你没有一台公网服务器，如果你又想要发布自己本地编写的网站，那么，GitHub 所提供的免费静态网页系统，正好是你所需要的。

二. 介绍

1. GitHub pages 是什么？

GitHub Pages is a static site hosting service that takes HTML, CSS, and JavaScript files straight from a repository on GitHub, optionally runs the files through a build process, and publishes a website.

——摘自 Github官网

简单来说，GitHub page 是 GitHub 提供给用户用来展示个人或者项目主页的静态网页系统。也就是说，我们可以把项目代码写好后上传到 GitHub，利用 GitHub page 为这个项目生成一个静态页面，别人可以通过网址访问我们的页面。

当然，不是只有 GitHub 有这个服务区，Gitee 和 GitLab 也有相对应的 page 服务，其它的代码托管平台也有，而他们的操作也大同小异，这里我们只介绍 GitHub 的操作。

2. GitHub pages 优点

那有哪些优点呢？我认为至少有这几点：

1. 免费：不再需要购买云服务，就可以搭建个人网站，免费提供 username.github.io 的域名, 免费的静态网站服务器.

2. 简单：步骤简单，只需要按着教程一步一步来，无需关注技术细节

3. 功能多：生态链丰富，你可以绑定自己的域名，使用免费 https，还能使用现成的主题，插件等等

4. 省心：只需要负责搭建，不需要关心如何维护之类

5. 无数量限制: github pages 没有使用的数量限制, 每一个 github repository 都可以部署为一个静态网站

所以推荐大家使用一下，作为免费的服务，当然也有一些限制，在使用的时候，项目和网站的大小不要超过 1GB，每个月的带宽使用上线为 100GB。不过一般情况下，我们也不会超过这些限制，影响不大。

3. 温馨提示

GitHub pages 主要设计用于托管公开仓库的静态网站和文档。因此当私有仓库要使用 GitHub pages，会提示

Upgrade or make this repository public to enable Pages GitHub Pages is designed to host your personal, organization, or project pages from a GitHub repository.

对于 GitHub pages，public 仓库免费使用，private 仓库要么升级 GitHub 账号，要么公开仓库

三. 搭建教程

那么，大致了解了 GitHub pages 之后，现在来搭建一个使用它。

1. 创建仓库

前往 GitHub 官网，点击 New repository 创建新项目，填入项目基本信息，点击 Create repository 确认。

• 创建仓库的时候，有一个限制，起名很有讲究，就是仓库名必须为 http://username.github.io，其中 username 是你的 GitHub 用户名。

• 其实不这样做也没有问题，但是访问静态资源的时候可能会有些麻烦，所以还是建议使用 账号名.github.io 的式

确认完成创建后，会看到如下图所示

2. 开启 GitHub pages

创建完仓库后，进入设置页，左侧找到 Pages 选项，将 Source 改为 Deploy from a branch ，最后点击 branch 后的 Save 按钮，即开启 GitHub pages 服务，如下：

第一个红色框：构建跟部署的来源

第二个红色框：左边是选择分支，我们默认主分支「此处只做展示所以直接默认主分支」（如果你的项目需要编译后进行静态展示的话，建议新建一个 gh-pages 分支并使用该分支）

这里 GitHub 改版后，有个技巧，可以点击 Source 的下拉栏，选择 GitHub Actions 之后，再切回 Deploy from a branch ，这样刷新界面后，你就能看到，你的 pages 已经开启了

此处说明一下：

• 对于部署 hexo 框架的博客项目（任何需要编译的项目），最好有两个分支。

• 一个分支专门用户 hexo 框架项目的编写

• 另一个分支就专门存放 hext generate 生成的 public 目录下的所有静态文件

  • 然后 github pages 部署的便是这个纯静态页面的分支。

在这中间，可以通过 workflow 使用 GitHub 的 Actions 自动打包部署，完全解放双手

保存成功后，刷新界面，会看到提示你：Your site is live at https://username.github.io

3. 测试访问

点击上面的网址，进行测试访问，看看我们的 pages 服务是否配置完成。下面是我的访问结果

4. 自定义域名

如果你觉得默认的域名不好记忆，也可以在这里自定义成你觉得好记的域名，完成之后访问新的域名验证是否成功即可。

四. 使用框架

如今，我们创建一个前端项目的时候，已经很少手动创建

待补充

参考

• GitHub Pages 快速入门