Что такое GitHub Pages?

  • 8 мин

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

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

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

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

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

Включение страниц GitHub.

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

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

Выбор темы Jekyll.

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

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

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

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

Термин титульные листы относится к метаданным 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.