Что такое GitHub Pages?

  • 8 мин

В этом модуле мы рассмотрим процесс создания и обслуживания веб-сайта GitHub Pages.

Страницы GitHub Pages — это статические сайты, размещаемые непосредственно в репозитории GitHub, но это не просто коллекция статических файлов. Используя технологии создания сайтов, такие как Jekyll и Liquid, разработчики могут задавать динамические шаблоны, которые преобразуются в полные статические веб-сайты. При каждом фиксации изменения в исходной ветви, связанной с сайтом, сайт повторно создается с помощью последних обновлений и автоматически публикуется в целевом URL-адресе.

Дополнительные сведения о источниках публикации для сайтов GitHub Pages.

включение GitHub Pages;

Первым шагом в использовании GitHub Pages является его включение на вкладке параметры вашего репозитория. Вы можете выбрать использование ветви main или указать папку docs внутри неё. Если вам понадобится отключить GitHub Pages, это тоже можно сделать здесь.

Активация GitHub Pages.

Выбор темы с помощью Jekyll

Jekyll — это генератор статических сайтов GitHub, который использует для создания веб-сайта из содержимого репозитория. Он не только обеспечивает удобство наполнения сайта содержимым, но и соответствует стандартному соглашению о проектировании. Эта стандартизация стилей позволяет переключать темы, которые можно выбрать из конфигурации GitHub Pages .

Выбор темы Jekyll.

GitHub предоставляет различные темы. Существует также массив коммерческих и открытых тем, доступных в сообществе Jekyll.

Встроенные темы Jekyll.

Дополнительные сведения о темах Jekyll.

Использование титульных листов YAML

Термин front matter относится к метаданным YAML, которые предопределяют содержимое файла. Для Jekyll эти метаданные содержат инструкции по генератору, чтобы указать стиль макета страницы Markdown (post, pageи т. д.). Она также может включать метаданные страницы, такие как название документа или переменные содержимого страницы, такие как автор записи блога.

В следующем примере используется post макет. В примере предполагается, что есть файл, определяющий _layouts/post.html HTML-код контейнера. Другие варианты макета можно предложить, добавив соответствующие HTML-файлы в папку _layouts .

---
layout: post
title: This is set as the document title.
---

This is visible body content, which might use Markdown, HTML, and Liquid templating.

Дополнительные сведения о Front Matter.

настройка вашего сайта;

После запуска сайта вы можете настроить сведения о нем с помощью файла _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.

Узнайте больше о добавлении содержимого на сайт GitHub Pages с помощью Jekyll.