Share
In de vorige post sprak ik over GitHub-pagina's en hoe je het instelt op je GitHub-repository. We gebruikten de site-generator om aan de slag te gaan en ik zei dat GitHub Pages ook Jekyll ondersteunt.
In deze post zal ik het hebben over Jekyll en laten zien hoe je het kunt opzetten met je project. Ik heb een voorbeeldproject gemaakt dat je naar beneden haalt en ook volgt.
Wat is Jekyll precies? Hier is hun beschrijving op hun site:
Jekyll is een eenvoudige, blog-bewuste, statische site-generator.
Het is volledig content driven en het ondersteunt ook Markdown. Het gebruikt Liquid voor zijn lay-outs, dus je hebt wat hergebruik van dingen zoals je hoofd, koptekst en voettekst. Het genereert statische pagina's op basis van uw inhoud en de lay-outs die u opgeeft.
Het is ook blogs, dus het kan een mogelijke vervanging zijn voor WordPress of een ander CMS.
Misschien wel het belangrijkste om op te merken is dat in Jekyll permalinks, categorieën, pagina's, berichten en aangepaste lay-outs allemaal eersteklasburgers zijn.
U kunt uw site ook lokaal genereren en bekijken.
Jekyll is gebaseerd op Ruby, dus de eenvoudigste manier om te installeren is het gebruik van RubyGems. Als u Mac of Linux gebruikt, kunt u Jekyll via de opdrachtregel installeren door te draaien gem installeer jekyll. Als u tijdens deze installatie problemen ondervindt, raad ik u aan de installatiehandleiding te lezen.
Als u Windows gebruikt, is er een Windows-specifieke documentatiepagina die u moet volgen.
Het eerste dat u moet instellen, is het configuratiebestand. U wilt een toevoegen _config.yml bestand naar de root van uw project. Er zijn een aantal configuratieopties die u kunt toevoegen. Ik zal een subset hiervan gebruiken voor dit voorbeeld. Ga je gang en voeg het volgende toe aan je _config.yml het dossier:
# Dependencies markdown: rdiscount pygments: true # Permalinks permalink: pretty # Serverbestemming: _gh_pages host: 0.0.0.0 poort: 9001 baseurl: / encoding: UTF-8
Nu we ons configuratiebestand hebben toegevoegd, gaan we door met het instellen van de projectstructuur.
Er is een specifieke structuur die u moet volgen bij het maken van een op Jekyll gebaseerde site. Het is belangrijk om de structuur te volgen om ervoor te zorgen dat uw site correct wordt gegenereerd. Hier is hoe het eruit ziet,
Dit is waar u uw verschillende lay-outs voor uw pagina's zult hebben. U kunt denken dat dit lijkt op WordPress-paginasjablonen. Mogelijk wilt u dat uw standaardlay-out een zijbalk heeft en een andere lay-out zonder zijbalk. U verwijst naar deze lay-outs in uw inhoud op basis van de naam van het bestand.
Ga je gang en maak een _layouts map in de hoofdmap van uw project. Stel dat u de standaardlay-out wilt maken. U wilt een maken default.html binnen in de _layouts map. U kunt vervolgens de standaardlay-out op uw verschillende pagina's gebruiken.
Er zijn een aantal dingen die u waarschijnlijk aan elk van uw lay-outbestanden, de paginatitel en inhoud wilt toevoegen. Als u wilt dat uw paginatitel wordt weergegeven, moet u deze aan uw lay-out toevoegen met behulp van de volgende syntaxis:
pagina titel
U wilt ook opgeven waar u de inhoud van elke pagina in die lay-out wilt plaatsen. Om dit te doen, moet u de volgende syntaxis gebruiken:
inhoud
Deze worden gebruikt in de default.html in het voorbeeldproject.
U wilt waarschijnlijk een aantal andere dingen toevoegen die op elke pagina zullen worden hergebruikt, zoals de koptekst, voettekst, navigatie en andere. U wilt deze toevoegen aan uw _includes map.
De inhoud zal dingen zijn die je op verschillende pagina's opnieuw wilt gebruiken, zoals ik hierboven heb genoemd. Je wilt ze toevoegen in de _includes map. Ga je gang en maak een _includes map in de hoofdmap van uw project.
Laten we zeggen dat u het document als een bestand wilt hebben. Je zou eerst een moeten toevoegen head.html bestand in de _includes map. Je voegt dan alles toe wat je nodig hebt voor de documentkop, zoals het doctype, metadata, scripts, enz.
Vervolgens wil je daarnaar verwijzen head.html bestand in uw default.html lay-outbestand. U doet dit met behulp van de volgende syntaxis:
% include head.html%
U kunt zien dat dit wordt gebruikt in de default.html in het voorbeeldproject.
U zou hetzelfde doen voor al het andere dat u opnieuw wilt gebruiken tussen pagina's zoals uw kop- en voettekst. U kunt ook submappen maken binnen de _includes map en verwijs ze ook. Ik vind het leuk om dit te doen om de verschilsecties van elke pagina te ordenen als ze veel inhoud hebben.
Nu we een standaardlay-out hebben, maken we onze eerste pagina. Ga je gang en maak een index.html bestand in de hoofdmap van uw project. Maak je geen zorgen, het zal je thema's niet overschrijven index.php bestand als u dit gebruikt om uw WordPress-thema te documenteren.
Aan de bovenkant van elk bestand moet u een paar dingen over de pagina opgeven. Dit is waar Jekyll naar verwijst bij het bouwen van elke pagina. Er zijn een aantal dingen die je kunt instellen, maar ik ga me concentreren op een paar van hen:
Hier is een voorbeeld om toe te voegen aan de top van uw index.html het dossier:
--- layout: standaard titel: Tuts + GitHub Pages slug: tuts-github-pages ---
Nu we onze pagina-instellingen hebben, hoeven we nu alleen maar onze inhoud toe te voegen. Voeg eenvoudig alle HTML toe die u op uw pagina wilt weergeven.
Het bouwen en serveren van uw pagina's gebeurt via de opdrachtregel. Ga je gang en open je commandoregel naar keuze, typ in Jekyll serveren en druk op Enter. Je zou de volgende output moeten zien:
Als u de juiste uitvoer ziet, zijn uw pagina's gebouwd en klaar om te worden bekeken. Nu kunt u uw pagina's bekijken door naar http: // localhost: 9001 te gaan, of welke poort dan ook die u in uw hebt opgegeven _config.yml bestand, in uw browser naar keuze.
Ik heb de basis besproken om te beginnen met het gebruik van Jekyll met uw project. Ik heb doorlopen hoe ik het configuratiebestand en de projectstructuur moest instellen. Ik heb ook gesproken over hoe u uw pagina's kunt bouwen en bedienen. Als je alles bij elkaar wilt zien, dan kun je dit voorbeeldproject bekijken.
In het volgende bericht zal ik het hebben over hoe u uw pagina's op GitHub-pagina's dient en deze in uw WordPress-thema of plugin distribueert.
Accentsconagua