Sådan opbygges en blog med Jekyll

Feb 2, 2026

hvordan

(Billedkredit: netto)

Denne vejledning er for folk, der har hørt om statiske webstedsgeneratorer og har besluttet, at de vil tage en tur på at opbygge deres eget websted ved hjælp af en. Her er vi at vise dig Sådan starter du en blog ved hjælp af Jekyll.

En grundlæggende viden om terminal er god, selvom du burde være i stand til at følge med, da kommandoerne er alle ret enkle. Websteder på Github-sider drives af Jekyll bag kulisserne, så når det bruges sammen med Github-sider, skaber det en måde at være vært for og administrere dit websted gratis (se vores liste over de bedste Web Hosting. Tjenester til andre muligheder, eller se vores liste, hvis du vil have en anden type Website Builder. ).

Denne vejledning forudsætter, at du er på en Mac; Da Jekyll er et Ruby-program, er det muligt at køre det på Windows, men det er ikke officielt støttet. Hvis du følger med på Windows, Hop herfra For at få hjælp til at få Ruby oprettet.

Når du har afsluttet denne vejledning, har du lavet en Jekyll blog og lært, hvordan dens funktioner og templateringssprog kan bygge en personlig blog. Dette er et godt udgangspunkt for at udvikle dit eget websted. Og husk, hvis du har mange design ideer eller mediefiler, skal du sørge for at holde dem sikkert i de bedste Sky lagring .

Find filerne til denne vejledning her .

10 bedste statiske webstedsgeneratorer

01. Kom oprettet

På en Mac skal du have Ruby installeret som standard, men lad os kontrollere ved at skrive ruby -v. i din terminal.

Nu kan vi faktisk få Jekyll, der kører på webstedet, sørg for at du er i den mappe, du vil opbygge dit websted i og blot skrive Gem installerer Jekyll Bundler ; Din computer vil derefter gå og gribe alle afhængigheder, der er nødvendige for at køre et websted.

02. Serveres lokalt eller bygge

Der er to hovedkommandoer, du vil bruge med Jekyll - tjene og Build. . At køre dit websted lokaltype Jekyll tjener. i din kommandolinje. Dette vil køre en version på http://127.0.0.1:4000, at du kan forhåndsvise dine ændringer på. Hvis du allerede har perle og andre afhængigheder installeret på din maskine, kan denne kommando mislykkes på grund af en mismatch i afhængighedsversioner; I dette tilfælde, prøv Bundle Exec Jekyll tjener i stedet. Kører det samme, men med ordet Build. Bare kompilerer webstedet.

03. Få startfilerne

Kopier de filer, der fulgte med denne vejledning på dette tidspunkt for at give dig et grundlag for at arbejde fra. Dette vil give os en hjemmeside, blog liste, et detaljeret side og aktivstrukturen for webstedet. Opdater din side på http://127.0.0.1:4000 Og du vil se, at vi nu har nogle grundlæggende sider at bygge fra. Lad os få et hurtigt overblik over, hvordan et Jekyll site fungerer.

Et Jekyll-sted er struktureret på en let måde. Eventuelle samlinger (typer af indlæg) holdes i deres egen mappe, ligesom layouter og indeholder. Du vil bemærke en '_site' -mappe - dette er den mappe, som Jekyll bruger, når du kører en Jekyll Build. kommando.

Generate CSS — Bliv medlem i London den 26. september for generere CSS - Klik på billedet for at bestille din billet (Billedkredit: fremtiden)

04. Konfiguration

Build a blog with Jekyll: Configuration — Jekyll giver dig en god struktur til at arbejde med og en nem at administrere config-fil (Billedkredit: netto)

Åbn _config.yml i din teksteditor og tilføj dine egne detaljer; Et centralt område for at kontrollere er at indstille din basiswebadresse. Dette er den mappe, som dit websted er indlæser i. Konfigurationsfilen svarer til at bruge Global Options kombineret med din WP-Config-fil, hvis du byggede et WordPress-tema.

Du kan styre kerneinformation som titler og metatabeskrivelser, dine e-mail- og sociale konti og derefter alle de oplysninger, webstedet skal kompilere, såsom samlinger og eventuelle plugins, der anvendes. Du kan bruge en blanding af HTML og Markdown til sider, afhængigt af hvad det er, du vil opnå. Brugerdefinerede sider, såsom dine hjemmeside- og listesider, vil generelt være HTML, mens indlæg og andre generelle sider, der bruger en sætskabelon, vil blive markeret.

05. Frontmateriale.

Frontmateriale er et uddrag af Yaml på toppen af en fil. Jekyll bruger det til at holde variabler. Se i About.md-filen, og du kan se, at vi sætter titlen, hvilket layout der skal bruges, forfatteren og eventuelle relaterede billeder.

06. Væske tags.

Build a blog with Jekyll: Liquid tags — Væske tags tilbyder en nem måde at arbejde med skabeloner og bruges også til shopify temaer (Billedkredit: netto)

Jekyll bruger væske - et skabeldannende sprog, der bruger objekter, tags og filtre. Vi bruger objekt Tag omgivet af dobbeltbøjler {{}} at udsende frontmaterielle variabler og en brace og procentvis tegn til logik {%%} .

07. Byg din navigation

I stedet for en statisk navigation bruger vi strømmen til config-filer til at adskille indholdet fra skabelonen. Vi vil holde navigationsartikler i mappen 'Data' som en config-fil og derefter sløjfe gennem dem i navigation.html. Vi kan bare indtaste de sider og links, vi ønsker at fremade uden at gå tilbage til skabelonen. Sørg for, at du er meget forsigtig med Whitespace, når du redigerer dine config-filer som navigation. Min eller forsiden i starten af et indlæg, fordi et stray-rum vil medføre en fejl.

Config-filen er allerede indstillet, så indtast følgende kode i din 'navigation.html' inkluderer fil:

 {% for vare i site.data.navigation%}
     & lt; a href = "{{site.baseurl}} / {{item.link}}" {% hvis side.url == item.link%} class = "nuværende" {% endif%} & gt; {{element .Name}} & lt; / a & gt;
   {% slutfor%}

Vi bruger flydende logiske tags til at se i navigationskonfigurationsfilen og sløjfe et link og navn for hver indgang, dybest set bare en standard for loop.

08. Opret startsiden

På vores hjemmeside skal vi liste vores nyeste blogindlæg som en helt og derefter have et uddrag fra vores side med et link gennem. Lad os starte med heltblokken. Åbn indeks.html og tilføj derefter følgende kode:

 {% tildele post = site.posts.first%}
& lt; div class = "C-Hero" Style = "Baggrund: URL ({{post.thumbnail_image.large | Relativ_URL}}) Bundcenter / Dæk nr. Repeat;" & GT;
   & lt; h1 klasse = "c-hero__title" & gt; {{post.title}} & lt; / h1 & gt;
   {{post.intro | markdownify}}
   & lt; a href = "{{post.url}}" klasse = "BTN - Hero" & GT; Læs hele Post & Lt; / A & GT;
& lt; / div & gt;

Du vil se, at vi først tildeler det nyeste indlæg og derefter reference det miniaturebillede, der er angivet i postens forreste materiale. POST INTRO bruger et flydende filter Markdownify. at konvertere markdown til HTML.

Med det på plads, lad os tilføje en teaser fra omgivelsen også. Tilføj følgende:

 & lt; div class = "c-funktion" & gt;
   {% til side på site.pages%}
       {% hvis side.url == '/About.html'%}
           & lt; img src = "{{side.profile_image.small}}" Alt = "Profie Picture" Class = "C-feature__image" / & gt;
           & lt; div class = "c-feature__text" & gt;
               & lt; h2 & gt; lt; en href = "{{side.url}}" & gt; {{side.title}} & lt; / a & gt; & lt; / h2 & gt;
               & lt; p & gt; {{side.intro}} & lt; / p & gt;
           & lt; / div & gt;
          
       {% Afslut Hvis %}
   {% slutfor%}
& lt; / div & gt;

Denne gang bruger vi en til loop for at kontrollere siderne på webstedet. Vi bruger side.url. For at filtrere ud på siden, og så bruger vi en lignende templateringsstil til helten for at kunne udskrive siderne.

09. Blog List.

Build a blog with Jekyll: Blog list — Et simpelt kortlayout for resten af indlægene på webstedet, der bruger CSS-grid og Flexbox (Billedkredit: netto)

Med den oprettede hjemmeside kan vi flytte på bloglisten. For at oprette listesiden bruger vi igen flydende tags til at give os logikken til at loop gennem alle filer i mappen 'Posts'.

Helden er færdig for dig, fordi det følger den samme proces som hjemmesiden. Under helten i 'blog.html', tilføj følgende:

& lt; div class = "begrænsning" & gt;
   & lt; h1 & gt; det bedste af resten & lt; / h1 & gt;
   & lt; sektion klasse = "kort list" & gt;
           {% for post i site.posts offset: 1%}
           & lt; div class = "kort" & gt;
                   & lt; img src = "{{post.thumbnail_image.small}}" / & gt;
                   & lt; div class = "kort-detaljer" & gt;
                   & lt; H3 & GT; {{Post.Date | Dato: "% d% B"}} - {{post.title}} & lt; / h3 & gt;
               & lt; a href = "{{post.url}}" klasse = "btn" & gt; læs mere & lt; / a & gt;
                   & lt; / div & gt;
               & lt; / div & gt;
           {% slutfor%}
          
   & lt; / sektion & gt;
& lt; / div & gt;

Igen bruger vi en til loop at gå gennem indlægssamlingen. Men som vi allerede har looped ud det seneste i helten, udligner vi denne løkke for at starte på post to. Et flydende filter bruges til at konvertere datoen til et format for vores valg.

10. Blogdetaljer side

Ikke lang tid at gå nu: Vi har næsten alle de grundlæggende elementer sammen. Et vigtigt aspekt, der er tilbage til adressen, er navigation. Når du læser et blogindlæg, har du brug for en måde at cykle igennem og læse mere. Vi kan tilføje en god pagination til vores websted ved hjælp af en sidevariabel. Åbn post.html i mappen Layouts og tilføj følgende:

 & lt; div class = "c-pagination" & gt;
   {% hvis side.previous%}
   & lt; div & gt;
       & lt; h3 & gt; tidligere & lt; / h3 & gt;
       & lt; p & gt; {{side.preVious.title}} & lt; / p & gt;
       & lt; en klasse = "BTN" href = "{{site.baseurl}} {{side.previous.url}}" & gt; læs POST & LT; / A & GT; & LT; / P & GT;
   & lt; / div & gt;
   {% Afslut Hvis %}
   {% hvis side.next%}
   & lt; div & gt;
       & lt; h3 & gt; op næste & lt; / h3 & gt;
       & lt; p & gt; {{side.next.title}} & lt; / p & gt;
       & lt; P & GT; & lt; en klasse = "btn" href = "{{site.baseurl}} {{side.next.url}}" & gt; læs POST & LT; / A & GT; & LT; / P & GT;
   & lt; / div & gt;
   {% Afslut Hvis %}
& lt; / div & gt;

Vi bruger side.previous. og Side.Next. Variabler for at kontrollere, om der er et indlæg til at klikke på til. Hvis der er så, kan vi udføre en blok og inkludere titlen og linksen af posten.

11. Byg og offentliggør

Github sider gør SASS-filerne for os, så når du løber Jekyll Build. De kompilerede filer oprettes i mappen _site. Ingen GULP-filer eller webpack her, bare flotte magert stilarter! Du kan endda minde SASS-output som en indstilling i hovedkonfigurations-filen for webstedet. Indholdet af denne mappe kan overføres til din valgte hosting. En ting at være opmærksom på er, at githubsider rent faktisk understøtter Jekyll, så du kan bygge og være vært for et websted ved hjælp af din master gren som kilde. Du kan finde flere oplysninger om dette her .

Denne artikel blev oprindeligt offentliggjort i udstedelse 320 af net , verdens bedst sælgende magasin til webdesignere og udviklere. Køb problem 320 her eller Abonner her .

Relaterede artikler:

Byg en blog med Gitter og Flexbox
De bedste gratis blogging platforme
Sådan opbygges et bloggingssted med Gatsby

Sådan opbygges en blog med Jekyll

01. Kom oprettet

02. Serveres lokalt eller bygge

03. Få startfilerne

04. Konfiguration

05. Frontmateriale.

06. Væske tags.

07. Byg din navigation

08. Opret startsiden

09. Blog List.

10. Blogdetaljer side

11. Byg og offentliggør

hvordan - Mest populære artikler

Instagram Reels Tutorial: En nybegyndervejledning

Portrætfotografi: Sådan tager du perfekte portrætter

Opret fantastiske landskaber i Houdini

Alt du behøver at vide om den nye node.js 8

Tegn en blyantportræt af en hund

Sådan simulerer du eksplosioner i Maya

Konverter et billede til et VR-sæt

Sådan optages bevægelse i dine 3D-rendere

Kategorier