Co to jest usługa GitHub Pages?

Ukończone

W tym artykule omówiono proces tworzenia i obsługiwania witryny internetowej usługi GitHub Pages.

Usługa GitHub Pages to statyczne witryny hostowane bezpośrednio z repozytorium GitHub, ale są to nie tylko kolekcje plików statycznych. Dzięki wykorzystaniu technologii generowania witryn, takich jak Jekyll i Liquid, deweloperzy definiują szablony dynamiczne przetwarzane w kompletnych statycznych witrynach internetowych. Za każdym razem, gdy zatwierdzisz zmianę w gałęzi źródłowej skojarzonej z witryną, lokacja jest ponownie generowana przy użyciu najnowszych aktualizacji i automatycznie publikowana w docelowym adresie URL.

Dowiedz się więcej na temat źródeł publikowania dla witryn w usłudze GitHub Pages.

Włączanie usługi GitHub Pages

Pierwszym krokiem korzystania z usługi GitHub Pages jest włączenie go z karty Ustawienia repozytorium. Możesz zdecydować się na main użycie gałęzi lub określić docs folder w nim. W tym miejscu możesz również wyłączyć usługę GitHub Pages.

Wybieranie motywu za pomocą technologii Jekyll

Jekyll to generator witryn statycznych używany przez usługę GitHub do kompilowania witryny internetowej z zawartości repozytorium. Zapewnia nie tylko wygodę zarządzania zawartością, ale również zgodność ze standardową konwencją projektowania. Ta standaryzacja stylu umożliwia korzystanie z wymiennych motywów, które można wybrać z poziomu konfiguracji usługi GitHub Pages.

Usługa GitHub udostępnia różne motywy. Istnieje również szereg motywów komercyjnych i open source dostępnych w społeczności Jekyll.

Dowiedz się więcej na temat motywów technologii Jekyll.

Używanie wstępu w technologii YAML

Termin wstęp oznacza metadane technologii YAML, które poprzedzają zawartość pliku. W przypadku narzędzia Jekyll te metadane zawierają instrukcje generatora wskazujące styl układu strony języka Markdown (postitd page.). Może również zawierać metadane strony, takie jak tytuł dokumentu lub zmienne zawartości strony, takie jak autor wpisu w blogu.

W poniższym przykładzie użyto post układu. W przykładzie założono, _layouts/post.html że istnieje plik, który definiuje kod HTML kontenera. Inne opcje układu mogą być oferowane przez dodanie odpowiednich plików HTML w folderze _layouts .

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

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

Dowiedz się więcej na temat wstępu.

Dostosowywanie witryny

Po uruchomieniu witryny możesz dostosowywać jej szczegóły za pośrednictwem pliku _config.yml. Ten plik zawiera dosłownie wszystkie opcje konfiguracji całej witryny, w tym metadane witryny, menu nawigacji, kolory motywów, opcje kompilatora i wiele więcej.

Dowiedz się więcej na temat konfiguracji pliku _config.yml.

Tworzenie i edytowanie zawartości

Tworzenie i edytowanie stron w witrynie odbywa się w podobny sposób co w standardowym środowisku GitHub. Pliki używane w witrynie internetowej usługi GitHub Pages korzystają ze wszystkich tych samych korzyści co inne pliki w repozytorium GitHub. Można je edytować za pomocą dowolnych narzędzi, tworzyć i scalać gałęzie oraz łączyć się z problemami lub żądaniami ściągnięcia.

Oprócz języków Markdown i HTML technologia Jekyll obsługuje składnię języka szablonu Liquid. Funkcja Liquid umożliwia użytkownikom dynamiczne wstawianie zmiennych i podstawowych konstrukcji przepływu logiki do plików zawartości. Po skompilowaniu ostateczny produkt jest standardowym plikiem HTML.

W poniższym przykładzie pokazano kombinację for wstawiania pętli i zmiennych.

<ul>
  {% for post in site.posts %}
    <li>
      <h2><a href="{{ post.url }}">{{ post.title }}</a></h2>
      {{ post.excerpt }}
    </li>
  {% endfor %}
</ul>

Dowiedz się więcej na temat języka szablonu Liquid.

Praca z wpisami w blogu

Pomimo braku bazy danych, z którą można pracować, technologia Jekyll i tak obsługuje koncepcję tworzenia blogów przy użyciu następującej konwencji: _posts/2020-06-25-blog-post-name.md. Jak można wywnioskować, wszystkie wpisy w blogu są przechowywane w folderze _posts, z użyciem przedstawionej tu konwencji daty i nazwy. Podczas kompilacji technologia Jekyll przetwarza pliki w tym folderze, aby utworzyć listę wpisów w blogu w języku HTML.

Poniższy przykład ilustruje strukturę prostego wpisu w blogu. Zawiera metadane dla , subtitletagsi comments. Wybrany motyw może nie obsługiwać tych metadanych.

---
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.

Dowiedz się więcej na temat dodawania zawartości do witryny usługi GitHub Pages przy użyciu technologii Jekyll.