Wat is GitHub Pages?
Hier bespreken we het proces van het maken en onderhouden van een GitHub Pages-website.
GitHub Pages zijn statische sites die rechtstreeks vanuit uw GitHub-opslagplaats worden gehost, maar ze zijn meer dan alleen een verzameling statische bestanden. Door gebruik te maken van technologieën voor sitegeneratie, zoals Jekyll en Liquid, definiëren ontwikkelaars dynamische sjablonen die worden verwerkt in volledige statische websites. Telkens wanneer u een wijziging doorvoert in de bronbranch die aan de site is gekoppeld, wordt de site opnieuw gegenereerd met behulp van de meest recente updates en automatisch gepubliceerd naar de doel-URL.
Meer informatie over publicatiebronnen voor GitHub Pages-sites.
GitHub Pages inschakelen
De eerste stap bij het gebruik van GitHub Pages is het inschakelen op het tabblad Instellingen van uw opslagplaats. U kunt ervoor kiezen om de main vertakking te gebruiken of de docs map erin op te geven. Als u GitHub Pages ooit wilt uitschakelen, kunt u dat hier doen.
Een thema kiezen met Jekyll
Jekyll is de statische sitegenerator die GitHub gebruikt om uw website te bouwen op basis van de inhoud van uw opslagplaats. Dit is niet alleen enorm handig, maar u weet ook zeker dat er wordt voldaan aan de standaard ontwerpvereisten. Met deze stijlstandaard kunt u wisselbare thema's maken, die u kunt selecteren in de configuratie van GitHub Pages .
GitHub biedt verschillende thema's. Er is ook een reeks commerciële en opensource-thema's beschikbaar in de Jekyll-community.
Meer informatie over Jekyll-thema's.
YAML Front Matter gebruiken
De term front matter verwijst naar YAML-metagegevens die de inhoud van een bestand vooraf laten gaan. Voor Jekyll bevat deze metagegevens generatorinstructies om de indelingsstijl van een Markdown-pagina (postenzovoort page) aan te geven. Het kan ook paginametagegevens bevatten, zoals de titel van het document of variabelen voor pagina-inhoud, zoals de auteur van een blogbericht.
In het volgende voorbeeld wordt de post indeling gebruikt. In het voorbeeld wordt ervan uitgegaan dat er een _layouts/post.html bestand is dat de HTML-container definieert. Andere indelingsopties kunnen worden aangeboden door hun respectieve HTML-bestanden in de _layouts map toe te voegen.
---
layout: post
title: This is set as the document title.
---
This is visible body content, which might use Markdown, HTML, and Liquid templating.
Meer informatie over Front Matter.
Uw site aanpassen
Zodra uw site actief is, kunt u de details van uw site aanpassen via _config.yml. Dit bestand bevat vrijwel alle configuratieopties voor de hele site, waaronder sitemetagegevens, navigatiemenu's, themakleuren, compileropties en meer.
Meer informatie over _config.yml configuratie.
Inhoud maken en bewerken
Het maken en bewerken van pagina's op uw site werkt niet anders dan het uitvoeren van andere handelingen via GitHub. De bestanden die u voor uw GitHub Pages-website gebruikt, hebben dezelfde voordelen als andere bestanden in uw GitHub-opslagplaats. U kunt ze bewerken met alle hulpprogramma's, vertakkingen maken en samenvoegen en een koppeling maken met problemen of pull-aanvragen.
Naast Markdown en HTML ondersteunt Jekyll de syntaxis van de Liquid-sjabloontaal . Met Liquid kunnen gebruikers variabelen en basislogicastromen dynamisch invoegen in hun inhoudsbestanden. Na het compileren is het eindproduct reguliere HTML-code.
In het volgende voorbeeld ziet u een combinatie van for lus- en variabeleinvoeging.
<ul>
{% for post in site.posts %}
<li>
<h2><a href="{{ post.url }}">{{ post.title }}</a></h2>
{{ post.excerpt }}
</li>
{% endfor %}
</ul>
Meer informatie over de taal van liquid-sjablonen.
Werken met blogposts
Hoewel er geen database is om mee te werken, ondersteunt Jekyll toch de mogelijkheid om te bloggen. Hiervoor wordt gebruikgemaakt van een specifieke conventie: _posts/2020-06-25-blog-post-name.md. Zoals u waarschijnlijk wel begrijpt, worden alle blogposts opgeslagen in de map _posts en worden de datum- en naamconventie gebruikt zoals wordt weergegeven. Tijdens het compileren verwerkt Jekyll de bestanden in deze map om een lijst met HTML-blogposts te maken.
In het volgende voorbeeld ziet u de structuur van een eenvoudig blogbericht. Het bevat metagegevens voor subtitle, tagsen comments. Het thema dat u kiest, biedt mogelijk geen ondersteuning voor deze metagegevens.
---
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.
Meer informatie over het toevoegen van inhoud aan uw GitHub Pages-site met behulp van Jekyll.