GitHub Pages GitHub 静态页面站点
GitHub Pages 是为用户、组织和代码仓库提供的公共网页服务,托管在 GitHub 的 github.io
域名下,或者你自定义的域名上,完全免费。GitHub Pages 的底层由 Jekyll 驱动,因此非常适合用来免费托管基于 Jekyll 的网站。
当你将源码文件推送到 GitHub 上时,GitHub Pages 会自动生成你的网站页面。需要注意的是,即使是普通的 HTML 内容,GitHub Pages 也能很好地处理,因为 Jekyll 会把没有 Front Matter(页面头部参数)的文件当作静态资源处理。所以如果你只需要推送已经生成的 HTML 文件,那基本不需要额外配置,就可以正常运行。
GitHub Pages 官方文档 非常全面,并且包含一篇使用 Jekyll 搭建 GitHub Pages 网站的指南。我们推荐你按照这篇指南操作。
本页面还包含了一些在使用 Jekyll 搭建 GitHub Pages 网站时可能会用到的额外信息。
GitHub Pages 文档、帮助与支持
想了解更多 GitHub Pages 能做什么,或查找故障排查指南,你可以访问 GitHub 的 Pages 帮助页面。 如果还是无法解决问题,你可以联系 GitHub 支持。
项目页面 URL 结构
有时候,在你将 gh-pages
分支推送到 GitHub 之前,预览你的 Jekyll 网站是很有用的。
不过,GitHub 在项目页面中使用的类似子目录的 URL 结构,会让 URL 的正确解析变得复杂。为了确保你的网站能正确构建,建议使用方便的 URL 过滤器:
<!-- 用于名称固定的样式文件... -->
<link href="{{ 'assets/css/style.css' | relative_url }}" rel="stylesheet">
<!-- 用于 URL 可能会变化的文档/页面... -->
[{{ page.title }}]("{{ page.url | relative_url }}")
这样,你就可以从本地服务器的根目录正常预览你的网站,而当 GitHub 从 gh-pages
分支生成你的页面时,所有 URL 也都会被正确解析。
将 Jekyll 部署到 GitHub Pages
GitHub Pages 是通过读取 GitHub 上特定仓库的分支来工作的。
GitHub Pages 提供两种基本类型:用户/组织页面 和 项目页面。
这两种网站的部署方式几乎相同,仅在少数细节上有所不同。
用户和组织页面
用户和组织页面托管在一个专门用于 GitHub Pages 的特殊仓库中。这个仓库的名称必须与你的账户名一致。
例如, @mojombo 的用户页面仓库 的名称是 mojombo.github.io
。
这个仓库的 master
分支中的内容将用于构建并发布 GitHub Pages 网站,因此请确保你的 Jekyll 网站存放在该分支中。
自定义域名不会影响仓库名称
GitHub Pages 默认使用 username.github.io
这个子域名,因此即使你使用了自定义域名,仓库的命名也仍然必须遵循这种方式。
项目页面
与用户和组织页面不同,项目页面保存在其所属项目的同一个仓库中。
不过网站内容存放在一个特殊命名的 gh-pages
分支,或是 master
分支中的 docs
文件夹内。内容将由 Jekyll 渲染,并最终部署在你用户页面子域名的子路径下,例如:username.github.io/project
(除非你配置了自定义域名)。
Jekyll 的项目仓库本身就是这种分支结构的一个完美例子——master 分支 存放的是 Jekyll 的核心代码,而你现在正在浏览的 Jekyll 官网页面,则保存在同一个仓库中的 docs 文件夹 中。
更多详细示例请参考 GitHub 官方文档:用户、组织和项目页面。
源码文件必须放在根目录
GitHub Pages 会覆盖 “Site Source” 配置选项, 所以如果你把文件放在根目录之外的位置,可能会导致网站无法正确构建。
在 Windows 上安装 github-pages
gem
虽然 Windows 并不是官方支持的平台,但你仍然可以在 Windows 上安装 github-pages
gem。
请参考我们为 Windows 提供的 专门文档页面 获取详细说明。
本地运行和测试
一旦项目配置为使用 github-pages 环境,要在本地和线上环境之间来回切换就不太方便。为此我们可以使用一些命令行参数,使开发流程更简单无痛:
bundle exec jekyll serve --baseurl=""
这将在你的本地机器上运行 Jekyll 服务器,地址为 http://localhost:4000
。
可参考 服务器选项 了解更多可用参数。