Hoe een blog te bouwen met Jekyll

Deze tutorial is voor mensen die gehoord hebben aan statische site-generatoren en hebben besloten dat ze een bezoek willen hebben om hun eigen site te bouwen met behulp van één. Hier zullen we je laten zien Hoe een blog starten Jekyll gebruiken.

Een basiskennis van terminal is goed, hoewel je zou moeten kunnen volgen, omdat de commando's allemaal vrij eenvoudig zijn. Sites op GitHub-pagina's worden aangedreven door Jekyll achter de schermen, dus wanneer ze samen met GitHub-pagina's worden gebruikt, creëert het een manier om uw website gratis te hosten en te beheren (zie onze lijst met de beste web hosting Diensten voor andere opties, of bekijk onze lijst als u een ander type wilt website bouwer ​

Deze tutorial gaat ervan uit dat je op een Mac zit; Aangezien Jekyll een Ruby-programma is, is het mogelijk om het op Windows uit te voeren, maar wordt het niet officieel ondersteund. Als u op vensters volgt, HOOP HIER voor hulp krijgen van Ruby-opzetten.

Na het voltooien van deze tutorial, hebt u een JKYLL-blog gemaakt en geleerd hoe de kenmerken en het sjablonen taal een persoonlijke blog kunnen bouwen. Dit is een geweldig startpunt om uw eigen site te ontwikkelen. En onthoud, als je veel ontwerpideeën of mediabestanden hebt, zorg er dan voor dat je ze veilig op het beste behoudt cloud opslag ​

Vind de bestanden voor deze tutorial hier ​

• 10 beste statische site-generatoren

01. Opgezet worden

Op een Mac moet je Ruby standaard geïnstalleerd, maar laten we controleren door te typen ruby -v in je terminal.

Nu kunnen we JEKYLL in de site daadwerkelijk laten werken, zorg ervoor dat u in de map bevindt die u uw site wilt bouwen in en simpelweg typt edelsteen Installeer Jekyll Bundler ​Uw computer gaat dan door alle afhankelijkheden die nodig zijn om een ​​site uit te voeren.

02. Serveer lokaal of bouwen

Er zijn twee hoofdopdrachten die u gebruikt met JKYLL - dienen en bouwen ​Om uw site lokaal te gebruiken Jekyll dient in uw opdrachtregel. Dit zal een versie uitvoeren op http://127.0.0.1:4000 waarmee u een voorbeeld van uw wijzigingen kunt bekijken. Als u al Gem en andere afhankelijkheden op uw machine hebt geïnstalleerd, kan deze opdracht falen als gevolg van een mismatch in afhankelijkheidsversies; Probeer in dit geval Bundle Exec Jekyll dient in plaats daarvan. Hetzelfde rennen, maar met het woord bouwen Compileert gewoon de site.

03. Verkrijg de start-bestanden

Kopieer de bestanden die bij deze tutorial op dit punt zijn geleverd om u een basis te geven om van te werken. Dit geeft ons een startpagina, bloglijst, detailpagina en de activastructuur voor de site. Vernieuw je pagina op http://127.0.0.1:4000 en je zult zien dat we nu een aantal basispagina's hebben om uit te bouwen. Laten we een snel overzicht hebben van hoe een Jekyll-site werkt.

Een Jekyll-site is gestructureerd in een gemakkelijk te volgen manier. Alle collecties (soorten berichten) worden in hun eigen map gehouden, evenals lay-outs en omvatten. U zult een map '_site' opmerken - dit is de map die Jekyll gebruikt wanneer u een Jekyll bouwen opdracht.

04. Configuratie

Open _config.yml in uw teksteditor en voeg uw eigen gegevens toe; Eén belangrijk gebied om te controleren is om uw basis-URL in te stellen. Dit is de map waarmee uw site wordt geladen. Het configuratiebestand is vergelijkbaar met het gebruik van globale opties in combinatie met uw WP-config-bestand als u een WordPress-thema brengt.

U kunt de kerninformatie bedienen, zoals titels en meta-beschrijvingen, uw e-mail- en sociale accounts en vervolgens alle informatie die de site moet compileren, zoals collecties en alle gebruikte plug-ins. U kunt een mix van HTML en Markdown voor pagina's gebruiken, afhankelijk van wat het is die u wilt bereiken. Aangepaste pagina's zoals uw homepage- en lijstpagina's zijn echter over het algemeen HTML, terwijl berichten en andere algemene pagina's die een ingestelde sjabloon gebruiken, zijn markdek.

05. Voorstoffen

Voorstoffen is een fragment van YAML aan de bovenkant van een bestand. Jekyll gebruikt het om variabelen vast te houden. Kijk in het bestand About.md en u kunt zien dat we de titel instellen, welke lay-out om te gebruiken, de auteur en eventuele gerelateerde afbeeldingen.

06. Vloeibare tags

Jekyll gebruikt vloeistof - een sjablonentaal die objecten, tags en filters gebruikt. Wij gebruiken de voorwerp Tag omringd door dubbele beugels ​ om variabelen voor de voorkant uit te voeren en een beugel en percentagesign voor logica ​ ​

07. Bouw uw navigatie

In plaats van een statische navigatie gebruiken we de kracht van configuratie bestanden om de inhoud van de sjabloon te scheiden. We houden navigatieitems in de map 'Gegevens' als een config-bestand en loop je vervolgens door in navigatie.html. We kunnen gewoon alle pagina's en koppelingen invoeren die we willen naar voren zonder terug te gaan naar de sjabloon. Zorg ervoor dat je echt voorzichtig bent met WhiteSpace bij het bewerken van je configuratiebestanden zoals navigatie.yml of frontachting aan het begin van een bericht omdat een zwerfruimte een fout zal veroorzaken.

Het configuratiebestand is al ingesteld, dus voer de volgende code in in uw 'Navigation.html' inclusief bestand:

 {% voor item in site.data.navigation%}
     & LT; A HREF = "{{site.baseurl}} / {{item.link}}" {% if page.url == item.link%} class = "huidige" {% endif%} & gt; {{item .Name}} & lt; / a & gt;
   {% Endfor%} 

We gebruiken vloeibare logische tags om in het navigatieconfiguratie-bestand te kijken en een link en naam uit voor elke invoer, in feite slechts een standaard voor lus.

08. Maak de startpagina

Op onze homepage gaan we onze nieuwste blogpost als held vermelden en hebben dan een fragment van onze over pagina met een link door. Laten we beginnen met het heldblok. Open Index.html en voeg vervolgens de volgende code toe:

 {% Wijs bericht toe = site.Posts.first%}
& lt; div class = "C-Hero" Style = "Achtergrond: URL ({{post.thumbnail_image.large | relative_url}}) Bottom Center / Cover No-Repeat;" & GT;
   & LT; H1-klasse = "C-HERO__TITLE" & GT; {{post.title}} & lt; / h1 & gt;
   {{post.intro | MarkDownify}}
   & LT; A HREF = "{{post.url}}" class = "BTN - HERO" & GT; Lees de volledige post & lt; / a & gt;
& lt; / div & gt; 

U zult zien dat we eerst de nieuwste post toewijzen en vervolgens verwijzen naar de miniatuurafbeelding in de frontacht van de post. De post intro gebruikt een vloeistoffilter markdowndown om de markdown naar HTML te converteren.

Met dat op zijn plaats, laten we ook een teaser van de over pagina toevoegen. Voeg het volgende toe:

 & lt; div class = "C-functie" & GT;
   {% voor pagina in site.pages%}
       {% if page.url == '/ al.html'%}
           & lt; img src = "{{pagina.profile_image.small}}" alt = "profie foto" klasse = "C-functie__image" / & GT;
           & LT; DIV-klasse = "C-Feature__Text" & GT;
               & LT; H2 & GT; & LT; A HREF = "{{pagina.url}}" & GT; {{pagina.title}} & lt; / a & gt; & lt; / h2 & gt;
               & LT; P & GT; {{pagina.intro}} & lt; / p & gt;
           & LT; / DIV & GT;
          
       {% stop als %}
   {% Endfor%}
& lt; / div & gt; 

Deze keer gebruiken we een voor Loop om de pagina's op de site te controleren. Wij gebruiken pagina URL Om de pagina over pagina te filteren en dan gebruiken we een vergelijkbare sjablonenstijl op de held om de informatie van de pagina's uit te voeren.

09. Bloglijst

Met de geschapen homepage kunnen we naar de pagina van de bloglijst gaan. Om de lijstpagina te maken, gebruiken we opnieuw vloeibare tags om ons de logica te geven om door alle bestanden in de map 'Berichten' te lussen.

De held is voor je gedaan omdat het hetzelfde proces volgt als de startpagina. Onder de held in 'blog.html', voeg je het volgende toe:

& lt; div class = "beperken" & GT;
   & LT; H1 & GT; het beste van de rest & LT; / H1 & GT;
   & LT; Sectie Klasse = "Kaartlijst" & GT;
           {% voor post in site.Posten Offset: 1%}
           & lt; div class = "kaart" & GT;
                   & lt; img src = "{{post.thumbnail_image.small}}" / & GT;
                   & lt; div class = "kaart-details" & GT;
                   & LT; H3 & GT; {{post.date | Datum: "% D% B"}} - {{post.title}} & lt; / h3 & gt;
               & LT; A HREF = "{{post.url}}" Class = "BTN" & GT; Lees meer & LT; / A & GT;
                   & LT; / DIV & GT;
               & LT; / DIV & GT;
           {% Endfor%}
          
   & lt; / sectie & gt;
& lt; / div & gt; 

Opnieuw gebruiken we een voor Loop om door de postcollectie te gaan. Maar zoals we al de nieuwste in de held hebben uitgevoerd, compenseren we deze lus om op post twee te beginnen. Een vloeistoffilter wordt gebruikt om de datum om te zetten naar een formaat van onze keuze.

10. Blog detail pagina

Niet lang om nu te gaan: we hebben bijna alle basiselementen samen. Een belangrijk aspect dat naar het adres is overgelaten, is navigatie. Als je een blogpost leest, heb je een manier nodig om door te fietsen en meer te lezen. We kunnen een leuke paginering toevoegen aan onze site met behulp van een pagina-variabele. Open Post.html in de map Lay-outs en voeg het volgende toe:

 & lt; div class = "C-pagination" & GT;
   {% if Page.Prevenious%}
   & LT; DIV & GT;
       & LT; H3 & GT; VORIGE & LT; / H3 & GT;
       & LT; P & GT; {{pagina.preevious.title}} & lt; / p & gt;
       & LT; P & GT; & LT; A class = "btn" href = "{{site.baseurl}} {{page.preevious.url}}" & GT; lees post & lt; / a & gt; & lt; / p & gt;
   & LT; / DIV & GT;
   {% stop als %}
   {% if page.next%}
   & LT; DIV & GT;
       & LT; H3 & GT; UP NEXT & LT; / H3 & GT;
       & LT; P & GT; {{pagina.next.title}} & lt; / p & gt;
       & LT; P & GT; & LT; een klasse = "BTN" HREF = "{{site.baseurl}} {{pagina.nlext.url}}" & GT; lees post & lt; / a & gt; & lt; / p & gt;
   & LT; / DIV & GT;
   {% stop als %}
& lt; / div & gt; 

Wij gebruiken de pagina. Verkleurig en pagina.next Variabelen om te controleren of er een bericht is om op te klikken op. Als er dan is, kunnen we een blok uitvoeren en de titel en het koppeling van de post opnemen.

11. Bouwen en publiceren

Github-pagina's maakt de SASS-bestanden voor ons, dus wanneer u uitvoert Jekyll bouwen De gecompileerde bestanden worden gemaakt in de map _site. Geen GULP-bestanden of Webpack hier, gewoon leuke lean-stijlen! U kunt zelfs de SASS-uitgang instellen als instelling in het hoofdconfig.yml-bestand voor de site. De inhoud van deze map kan worden overgedragen aan de door u gekozen hosting. Eén ding om op de hoogte te zijn van is dat GitHub-pagina's Jekyll daadwerkelijk ondersteunt, zodat u een site kunt bouwen en hosten met uw hoofdtak als bron. U kunt hier meer informatie over vinden hier ​

Dit artikel is oorspronkelijk gepubliceerd in kwestie 320 van netto- , 's werelds best verkochte magazine voor webontwerpers en ontwikkelaars. Koop hier nummer 320 of Abonneer hier ​

Gerelateerde artikelen:

• Bouw een blog met raster en flexbox
• De beste gratis bloggenplatforms
• Hoe een blogsite te bouwen met Gatsby