Hur man bygger en blogg med Jekyll

Sep 11, 2025

Hur

(Bildkredit: netto)

Denna handledning är för personer som har hört talas om statiska generatorer och har bestämt att de vill ha en gå på att bygga sin egen webbplats med en. Här är vi att visa dig Hur man startar en blogg med jekyll.

En grundläggande kunskap om terminal är bra, även om du borde kunna följa med, eftersom kommandona är alla ganska enkla. Webbplatser på Github-sidor drivs av Jekyll bakom kulisserna, så när de används tillsammans med Github-sidor skapar det ett sätt att vara värd och hantera din webbplats gratis (se vår lista över det bästa webbhotell Tjänster för andra alternativ, eller se vår lista om du vill ha en annan typ av Website Builder ).

Denna handledning antar att du är på en Mac; Eftersom Jekyll är ett Ruby-program är det möjligt att köra det på Windows men det stöds inte officiellt. Om du följer med Windows, Hoppa här för hjälp att få Ruby set up.

Efter att ha avslutat den här handledningen har du skapat en Jekyll-blogg och lärt dig hur dess funktioner och templingspråk kan bygga en personlig blogg. Det här är en bra utgångspunkt för att utveckla din egen webbplats. Och kom ihåg, om du har många designidéer eller mediefiler, var noga med att hålla dem ordentligt i det bästa molnlagring .

Hitta filerna för den här handledningen här .

10 bästa statiska generatorer

01. Komma upp

På en Mac ska du ha Ruby installerad som standard men låt oss kolla genom att skriva rubin -v i din terminal.

Nu kan vi faktiskt få Jekyll som kör på webbplatsen, se till att du är i katalogen du vill bygga upp din webbplats och helt enkelt skriva pärla installera jekyll bundler ; Din dator kommer då att gå och ta tag i alla de beroenden som behövs för att köra en webbplats.

02. Servera lokalt eller bygg

Det finns två huvudkommandon som du kommer att använda med Jekyll - tjäna och bygga . För att köra din webbplats lokalt typ jekyll i din kommandorad. Detta kommer att köra en version på http://127.0.0.1:4000 som du kan förhandsgranska dina ändringar på. Om du redan har pärla och andra beroenden installerade på din maskin, kan det här kommandot misslyckas på grund av en felaktig matchning i beroende versioner; I det här fallet försök Bundle Exec Jekyll serveras istället. Kör densamma men med ordet bygga Placera bara webbplatsen.

03. Hämta startfilerna

Kopiera de filer som medföljer denna handledning vid denna tidpunkt för att ge dig en grund för att arbeta från. Detta ger oss en hemsida, blogglista, detaljeringssida och tillgångarstrukturen för webbplatsen. Uppdatera din sida på http://127.0.0.1:4000 och du kommer att se att vi nu har några grundläggande sidor att bygga från. Låt oss ha en snabb översikt över hur en Jekyll webbplats fungerar.

En Jekyll-webbplats är strukturerad i ett lätt att följa. Eventuella samlingar (typer av tjänster) hålls i sin egen mapp, liksom layouter och inkluderar. Du kommer att märka en "_site" -mapp - det här är den mapp som Jekyll använder när du kör en jekyll build kommando.

Generate CSS — Gå med i London den 26 september för generera CSS - klicka på bilden för att boka din biljett (Bildkredit: Framtida)

04. Konfiguration

Build a blog with Jekyll: Configuration — Jekyll ger dig en bra struktur att arbeta med och en lätt att hantera config-fil (Bildkredit: netto)

Öppna _config.yml i din textredigerare och lägg till dina egna uppgifter; Ett viktigt område för att kontrollera är att ställa in din basadress. Det här är den mapp som din webbplats laddas in. Konfigurationsfilen liknar att använda globala alternativ i kombination med din WP-CONFIG-fil om du bygger ut ett WordPress-tema.

Du kan styra kärninformation som titlar och meta beskrivningar, dina e-post och sociala konton och sedan all information som webbplatsen behöver kompilera som samlingar och alla använda plugin. Du kan använda en blandning av HTML och markdown för sidor, beroende på vad det är som du vill uppnå. Men anpassade sidor som din hemsida och listsidor kommer i allmänhet att vara HTML, medan inlägg och andra allmänna sidor som använder en uppsättning mall kommer att vara markdown.

05. Framsida

Front Matter är ett snippet av yaml på toppen av en fil. Jekyll använder den för att hålla variabler. Titta i filen om.md och du kan se att vi ställer in titeln, vilken layout för att använda, författaren och eventuella relaterade bilder.

06. Flytande taggar

Build a blog with Jekyll: Liquid tags — Flytande taggar erbjuder ett enkelt sätt att arbeta med mallar och används också i Shopify-teman (Bildkredit: netto)

Jekyll använder vätska - ett templerande språk som använder objekt, taggar och filter. Vi använder objekt Tag omgiven av dubbla hängslen {{}} Att mata ut främre materiella variabler och en stag och procenttal för logik {%%} .

07. Bygg din navigering

I stället för en statisk navigering använder vi strömmen av config-filer för att separera innehållet från mallen. Vi håller ut navigationsobjekt i "Data" -mappen som en konfigurationsfil och sedan slingrar genom dem i navigering.html. Vi kan bara ange vilka sidor och länkar vi vill gå vidare utan att gå tillbaka till mallen. Se till att du är verkligen försiktig med whitespace när du redigerar dina confing-filer som navigering. Myml eller front materia i början av ett inlägg, eftersom ett straxutrymme kommer att orsaka ett fel.

Konfigurationsfilen är redan inställd så ange följande kod i din 'navigation.html' inkluderar fil:

 {% för objekt på plats.data.navigation%}
     & lt; en href = "{{site.baseurl}} / {{item.link}}" {% om sidan.url == item.link%} klass = "Aktuell" {% endif%} & gt; {{it .Name}} & lt; / a & gt;
   {% EndFor%}

Vi använder flytande logiska taggar för att titta i navigeringskonfigurationen och loop ut en länk och namn för varje post, i princip bara en standard för loop.

08. Skapa hemsidan

På vår hemsida kommer vi att lista vårt senaste bloggpost som en hjälte och sedan ha ett snippet från vår sida med en länk genom. Låt oss börja med hjälten. Öppna index.html och lägg sedan till följande kod:

 {% Tilldela Post = Site.Posts.First%}
& lt; Div Class = "C-Hero" Style = "Bakgrund: Url ({{post.thumbnail_image.large | relative_url}}) Bottom Center / Cover No-Repeat;" & GT;
   & lt; h1 class = "c-hero__title" & gt; {{post.title}} & lt; / h1 & gt;
   {{post.intro | markdownify}}
   & lt; en href = "{{post.url}}" class = "btn - hero" & gt; läs hela post & lt; / a & gt;
& lt; / div & gt;

Du kommer att se att vi först tilldelar det senaste inlägget och sedan refererar till miniatyrbildsbilden i postens framsida. Postintro använder ett flytande filter markdownify att konvertera markdown till html.

Med det på plats, låt oss lägga till en teaser från den om sidan också. Lägg till följande:

 & lt; Div Class = "C-Feature" & GT;
   {% för sida på plats.pages%}
       {% om page.url == '/about.html'%}
           & lt; img src = "{{page.profile_image.small}}" alt = "PROFIE PICTURE" Class = "C-Feature__Image" / & GT;
           & lt; Div Class = "C-Feature__Text" & GT;
               & lt; h2 & gt; & lt; a href = "{{page; {{page}} & lt; / a & gt; & lt; / h2 & gt;
               & lt; P & GT; {{Sida.intro}} & lt; / P & GT;
           & lt; / div & gt;
          
       {% endif%}
   {% endfor%}
& lt; / div & gt;

Den här gången använder vi en för Loop för att kontrollera genom sidorna på webbplatsen. Vi använder sida.url För att filtrera bort sidan och sedan använder vi en liknande templerande stil till hjälten för att mata ut sidans information.

09. Blog List

Build a blog with Jekyll: Blog list — En enkel kortlayout för resten av inläggen på webbplatsen som använder CSS-rutnät och Flexbox (Bildkredit: netto)

Med den skapade hemsidan kan vi flytta till blogglistan. För att skapa listsidan använder vi igen flytande taggar för att ge oss logiken att slinga genom alla filer i mappen "Posts".

Hjälten är klar för dig eftersom det följer samma process som hemsidan. Under hjälten i 'blog.html', lägg till följande:

& lt; div class = "constrain" & gt;
   & lt; h1 & gt; det bästa av resten & lt; / h1 & gt;
   & lt; avsnitt klass = "Kortlista" & GT;
           {% för inlägg på plats. Posts offset: 1%}
           & lt; div class = "kort" & gt;
                   & lt; img src = "{{post.thumbnail_image.small}}" / & gt;
                   & lt; Div Class = "Kortuppgifter" & GT;
                   & lt; H3 & GT; {{post.date | Datum: "% d% b"}} - {{post.title}} & lt; / h3 & gt;
               & lt; a href = "{{post.url}}" class = "btn" & gt; läs mer & lt; / a & gt;
                   & lt; / div & gt;
               & lt; / div & gt;
           {% endfor%}
          
   & lt; / sektion och gt;
& lt; / div & gt;

Återigen använder vi en för Loop för att gå igenom inläggets samling. Men som vi redan har looked ut det senaste i hjälten kompenserar vi den här loopen för att börja på inlägg två. Ett flytande filter används för att konvertera datumet till ett format för vårt val.

10. Blogg detaljid

Inte länge att gå nu: vi har nästan alla grundläggande element tillsammans. En viktig aspekt som lämnas till adress är navigering. När du läser ett bloggpost behöver du ett sätt att cykla igenom och läsa mer. Vi kan lägga till lite fina pagination på vår webbplats med hjälp av en sidvariabel. Öppna post.html i mappen Layouts och lägg till följande:

 & lt; div klass = "c-pagination" & gt;
   {% om sida.Previous%}
   & lt; div & gt;
       & lt; H3 & GT; Tidigare & LT; / H3 & GT;
       & lt; P & GT; {{Sida.Previous.Title}} & lt; / P & GT;
       P & GT; & LT; en klass = "btn" href = "{{site.baseurl}} {{page; läste; / lt; / lt; / a & gt;
   & lt; / div & gt;
   {% endif%}
   {% om sidan.nästa%}
   & lt; div & gt;
       & lt; h3 & gt; upp nästa & lt; / h3 & gt;
       & lt; P & GT; {{page; / p & gt;
       & lt; a class = "btn" href = "{{site.baseurl}} {{page.next.url}}" & gt; läs post & lt; / a & gt; & lt; / p & gt;
   & lt; / div & gt;
   {% endif%}
& lt; / div & gt;

Vi använder Sida.Previous och sida.nästa Variabler för att kontrollera om det finns ett inlägg att klicka på. Om det finns så kan vi mata ut ett block och inkludera titeln och länken på posten.

11. Bygg och publicera

Github sidor gör sassfilerna för oss, så när du kör jekyll build De sammanställda filerna skapas i mappen _Site. Inga gulpfiler eller webbhotell här, bara trevliga lutningsstilar! Du kan till och med minifiera SASS-utgången som en inställning i huvudkonfigurationen. Myml-filen för webbplatsen. Innehållet i den här katalogen kan överföras till din valda värd. En sak att vara medveten om är att Github-sidor faktiskt stöder Jekyll så att du kan bygga och vara värd för en webbplats med din huvudgren som källan. Du kan hitta mer information om detta här .

Denna artikel publicerades ursprungligen i utgåva 320 av netto , världens bästsäljande tidning för webbdesigners och utvecklare. Köp nummer 320 här eller prenumerera här .

Relaterade artiklar:

Bygg en blogg med rutnät och flexlåda
De bästa gratis bloggplattformarna
Hur man bygger en bloggar med Gatsby

Hur man bygger en blogg med Jekyll

01. Komma upp

02. Servera lokalt eller bygg

03. Hämta startfilerna

04. Konfiguration

05. Framsida

06. Flytande taggar

07. Bygg din navigering

08. Skapa hemsidan

09. Blog List

10. Blogg detaljid

11. Bygg och publicera

Hur - Mest populära artiklar

Hur man använder Cloud Storage som en kreativ

Hur man ritar en fågel

Vad är en terminatorlinje?

Hur man designar isometrisk typografi

4 steg till bättre vdm med zbrush

Hur man skapar en redshift-proxy i Cinema 4D

Skapa en digital etch en skiss

Hur man förmedlar ljud i en målning

Kategorier