Co je GitHub Pages?
V této části se podíváme na proces vytváření a údržby webu služby GitHub Pages.
GitHub Pages jsou statické weby hostované přímo z úložiště GitHub, ale jsou to víc než jen kolekce statických souborů. Díky použití technologií generování webů, jako je Jekyll a Liquid, vývojáři definují dynamické šablony, které se zpracovávají na kompletní statické weby. Pokaždé, když potvrdíte změnu do zdrojové větve přidružené k webu, web se znovu vygeneruje pomocí nejnovějších aktualizací a automaticky se publikuje na cílovou adresu URL.
Přečtěte si další informace o zdrojích publikování pro weby GitHub Pages.
Povolení služby GitHub Pages
Prvním krokem při používání stránek GitHubu je jeho povolení na kartě Nastavení úložiště. Můžete se rozhodnout použít main větev nebo zadat docs složku v ní. Pokud byste někdy chtěli službu GitHub Pages zakázat, můžete to udělat tady.
Volba motivu pomocí Jekyllu
Jekyll je generátor statických webů, který GitHub používá k sestavení vašeho webu z obsahu úložiště. Poskytuje velmi pohodlné prostředí pro práci s obsahem a vyhovuje standardní konvenci webového designu. Tato standardizace stylu umožňuje prohoditelné motivy, které si můžete vybrat z konfigurace GitHub Pages .
GitHub nabízí různé motivy. K dispozici je také řada komerčních a opensourcových motivů od komunity Jekyll.
Přečtěte si další informace o Motivech Jekyllu.
Použití metadat YAML front matter
Termín front matter odkazuje na metadata YAML, která předzálohují obsah souboru. Pro Jekyll obsahuje tato metadata pokyny generátoru, které označují styl rozložení stránky Markdownu (postatd page.). Může obsahovat také metadata stránek, jako je název dokumentu nebo proměnné obsahu stránky, jako je autor blogového příspěvku.
Následující příklad používá post rozložení. V příkladu se předpokládá, že existuje _layouts/post.html soubor, který definuje kód HTML kontejneru. Další možnosti rozložení můžete nabídnout přidáním příslušných souborů HTML do _layouts složky.
---
layout: post
title: This is set as the document title.
---
This is visible body content, which might use Markdown, HTML, and Liquid templating.
Přečtěte si další informace o funkci Front Matter.
Přizpůsobení webu
Až bude váš web v provozu, můžete jeho podrobnosti přizpůsobit pomocí souboru _config.yml. Tento soubor obsahuje prakticky všechny možnosti konfigurace pro celý web, včetně metadat webu, navigačních nabídek, barev motivu, možností kompilátoru a dalších možností.
Přečtěte si další informace o konfiguraci _config.yml.
Vytváření a úpravy obsahu
Vytváření a úpravy stránek na vašem webu budou probíhat ve standardním prostředí GitHubu. Soubory, které používáte pro web GitHub Pages, mají všechny stejné výhody jako ostatní soubory v úložišti GitHub. Můžete je upravovat pomocí libovolných nástrojů, vytvářet a slučovat větve a propojit je s problémy nebo žádostmi o přijetí změn.
Kromě Markdownu a HTML podporuje Jekyll syntaxi jazyka šablon Liquid . Liquid umožňuje uživatelům dynamicky vkládat proměnné a základní konstruktory toku logiky do souborů obsahu. Po kompilaci je finálním produktem standardní HTML.
Následující příklad ukazuje kombinaci smyčky for a vložení proměnné.
<ul>
{% for post in site.posts %}
<li>
<h2><a href="{{ post.url }}">{{ post.title }}</a></h2>
{{ post.excerpt }}
</li>
{% endfor %}
</ul>
Přečtěte si další informace o jazyce šablon Liquid.
Práce s blogovými příspěvky
I když Jekyll nemá databázi, se kterou by pracoval, přesto podporuje koncept blogování pomocí specifické konvence: _posts/2020-06-25-blog-post-name.md. Jak jste si asi odvodili, ukládají se všechny blogové příspěvky do složky _posts a používají uvedenou konvenci data a názvu. Během kompilace Jekyll zpracovává soubory v této složce a vytvoří seznam blogových příspěvků v HTML.
Následující příklad znázorňuje strukturu jednoduchého blogového příspěvku. Obsahuje metadata pro subtitle, tagsa comments. Motiv, který zvolíte, nemusí podporovat tato metadata.
---
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.
Přečtěte si další informace o přidávání obsahu na web GitHub Pages pomocí Jekyllu.