Vad är GitHub Pages?
Här går vi igenom hur du skapar och underhåller en GitHub Pages-webbplats.
GitHub Pages är statiska webbplatser som hanteras direkt från din GitHub-lagringsplats, men de är mer än bara en samling statiska filer. Genom att använda teknik för webbplatsgenerering som Jekyll och Liquid definierar utvecklare dynamiska mallar som bearbetas till fullständiga statiska webbplatser. Varje gång du genomför en ändring av källgrenen som är associerad med platsen återskapas webbplatsen med hjälp av de senaste uppdateringarna och publiceras automatiskt till mål-URL:en.
Läs mer om publiceringskällor för GitHub Pages-webbplatser.
Aktivera GitHub Pages
Det första steget i att använda GitHub Pages är att aktivera det från lagringsplatsens fliken Inställningar . Du kan välja att använda grenen main eller ange docs mappen i den. Om du skulle vilja inaktivera GitHub Pages kan du göra det här.
Välja ett tema med Jekyll
Jekyll är den statiska webbplatsgenerator som GitHub använder för att skapa din webbplats från innehållet i lagringsplatsen. Förutom att den tillhandahåller ett praktiskt sätt att hantera innehåll följer den även en standardkonvention för design. Den här formatstandardiseringen möjliggör utbytbara teman, som du kan välja från GitHub Pages-inställningarna.
GitHub innehåller olika teman. Det finns också en matris med kommersiella teman och teman med öppen källkod som är tillgängliga från Jekyll-communityn.
Läs mer om Jekyll-teman.
Använda YAML front matter (YFM)
Termen front matter refererar till YAML-metadata som läggs till i början av innehållet i en fil. För Jekyll innehåller dessa metadata generatorinstruktioner för att ange layoutformatet för en Markdown-sida (post, pageoch så vidare). Den kan också innehålla sidmetadata, till exempel dokumentrubriken eller sidinnehållsvariabler, till exempel ett blogginläggs författare.
I följande exempel används layouten post . Exemplet förutsätter att det finns en _layouts/post.html fil som definierar containerns HTML. Andra layoutalternativ kan erbjudas genom att lägga till respektive HTML-filer i _layouts mappen.
---
layout: post
title: This is set as the document title.
---
This is visible body content, which might use Markdown, HTML, and Liquid templating.
Läs mer om Front Matter.
Anpassa din webbplats
När du har skapat din webbplats kan du anpassa informationen om webbplatsen via _config.yml. Den här filen innehåller praktiskt taget alla platsomfattande konfigurationsalternativ, inklusive webbplatsmetadata, navigeringsmenyer, temafärger, kompilatoralternativ med mera.
Läs mer om konfiguration av _config.yml.
Skapa och redigera innehåll
Skapa och redigera sidor på din webbplats med den vanliga GitHub-upplevelsen. De filer som du använder för din GitHub Pages-webbplats har samma fördelar som andra filer på din GitHub-lagringsplats. Du kan redigera dem med alla verktyg, skapa och sammanfoga grenar och länka till problem eller pull-begäranden.
Förutom Markdown och HTML har Jekyll även stöd för mallspråket Liquid. Liquid låter användare dynamiskt infoga variabler och grundläggande logikflödeskonstruktioner i sina innehållsfiler. Efter kompileringen blir slutprodukten vanlig HTML.
I följande exempel visas en kombination av for loopning och variabelinfogning.
<ul>
{% for post in site.posts %}
<li>
<h2><a href="{{ post.url }}">{{ post.title }}</a></h2>
{{ post.excerpt }}
</li>
{% endfor %}
</ul>
Läs mer om mallspråket Liquid.
Arbeta med blogginlägg
Trots att det inte finns någon databas att arbeta med har Jekyll stöd för bloggfunktion med en särskild konvention: _posts/2020-06-25-blog-post-name.md. Alla blogginlägg lagras i mappen _posts med den datum- och namnkonvention som visas. Under kompileringen bearbetar Jekyll filerna i den här mappen och skapar en lista över HTML-blogginlägg.
I följande exempel visas strukturen för ett enkelt blogginlägg. Den innehåller metadata för subtitle, tagsoch comments. Det tema som du väljer kanske inte stöder dessa 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.
Läs mer om att lägga till innehåll på GitHub Pages-webbplatsen med Jekyll.