什么是 GitHub Pages?
在这里,我们将介绍创建和维护 GitHub Pages 网站的过程。
GitHub Pages 是直接从 GitHub 存储库托管的静态站点,但它们不仅仅是静态文件的集合。 通过利用 Jekyll 和 Liquid 等网站生成技术,开发人员可定义被处理为完整静态网站的动态模板。 每次将更改提交到与网站关联的源分支时,该网站都会使用最新更新重新生成该更改,并自动将其发布到目标 URL。
详细了解为 GitHub Pages 网站发布源。
启用 GitHub Pages
使用 GitHub Pages 的第一步是从存储库的“设置”选项卡中启用它。可以选择使用 main
分支,也可以在其中指定 docs
文件夹。 如果想要禁用 GitHub Pages,可以在此处执行此操作。
使用 Jekyll 选择主题
Jekyll 是 GitHub 使用的静态站点生成器,用于生成来自存储库内容的网站。 除可提供极大的内容便利性之外,它还符合标准的设计约定。 此样式标准化允许可交换主题,你可以从 GitHub Pages 配置中进行选择。
GitHub 提供了各种主题。 Jekyll 社区还提供了一系列商业和开放源代码主题。
详细了解 Jekyll 主题。
使用 YAML 前页
术语“前页”指的是在前面追加文件内容的 YAML 元数据。 对于 Jekyll,此元数据包括用于指示 Markdown 页(post
、page
等)布局样式的生成器说明。 它还可能包括页面元数据(如文档标题)或页面内容变量(如博客文章作者)。
以下示例使用 post
布局。 该示例假设存在一个定义容器 HTML 的 _layouts/post.html
文件。 可以通过在 _layouts
文件夹中添加其各自的 HTML 文件来提供其他布局选项。
---
layout: post
title: This is set as the document title.
---
This is visible body content, which might use Markdown, HTML, and Liquid templating.
详细了解前页。
自定义你的网站
网站启动并运行后,可以通过 _config.yml
来自定义有关网站的详细信息。 此文件几乎包括所有网站范围的配置选项,包括网站元数据、导航菜单、主题颜色、编译器选项等。
详细了解 _config.yml 配置。
创建和编辑内容
在网站上创建和编辑页面遵循标准 GitHub 体验。 用于 GitHub Pages 网站的文件具有与 GitHub 存储库中的其他文件相同的优势。 可以使用任何工具编辑它们、创建和合并分支,以及关联问题或拉取请求。
除了 Markdown 和 HTML,Jekyll 还支持 Liquid 模板语言语法。 Liquid 允许用户在其内容文件中动态插入变量和基本逻辑流构造。 完成编译后,最终产品是标准 HTML。
下面的示例显示了 for
循环和变量插入的组合。
<ul>
{% for post in site.posts %}
<li>
<h2><a href="{{ post.url }}">{{ post.title }}</a></h2>
{{ post.excerpt }}
</li>
{% endfor %}
</ul>
详细了解 Liquid 模板语言。
使用博客文章
尽管没有可使用的数据库,Jekyll 仍支持使用特定约定的博客概念:_posts/2020-06-25-blog-post-name.md
。 可以推断,所有博客文章都存储在 _posts
文件夹中,并使用日期和名称约定,如下所示。 在编译期间,Jekyll 将处理此文件夹中的文件,以生成 HTML 博客文章列表。
以下示例演示了一篇简单的博客文章的结构。 它包括 subtitle
、tags
和 comments
的元数据。 所选主题可能不支持这些元数据。
---
layout: post
title: Blog post title rendered by theme
subtitle: Blog post subtitle rendered by theme
tags: welcoming
comments: true
---
This is the first line of rendered content in the post.
了解使用 Jekyll 将内容添加到 GitHub Pages 网站的详细信息。