Hvordan bygge en blogg med Jekyll

Sep 12, 2025

hvordan

[1. 3]

(Bilde Kreditt: Net)

Denne opplæringen er for folk som har hørt om statiske nettverksgeneratorer og har bestemt at de vil ha en tur til å bygge sitt eget nettsted ved hjelp av en. Her skal vi vise deg Slik starter du en blogg bruker Jekyll.

En grunnleggende kunnskap om terminal er bra, selv om du skal kunne følge med som kommandoene er alle ganske enkle. Nettsteder på Github-sider drives av Jekyll bak kulissene, så når det brukes sammen med Github-sider, skaper det en måte å være vert for og administrere nettstedet ditt gratis (se vår liste over de beste Web Hosting. tjenester for andre alternativer, eller se vår liste hvis du vil ha en annen type Nettstedbygger ).

Denne opplæringen antar at du er på en Mac; Som Jekyll er et Ruby-program, er det mulig å kjøre det på Windows, men det er ikke offisielt støttet. Hvis du følger med på Windows, hopp her her For å få Ruby satt opp.

Etter å ha fullført denne opplæringen, vil du ha opprettet en Jekyll-blogg og lært hvordan funksjonene og templerende språk kan bygge en personlig blogg. Dette er et flott utgangspunkt for å utvikle ditt eget nettsted. Og husk, hvis du har mange designideer eller mediefiler, må du holde dem sikkert i det beste skylagring .

Finn filene for denne opplæringen her .

10 beste statiske nettstedgeneratorer

01. Bli satt opp

På en Mac bør du ha Ruby installert som standard, men la oss sjekke ved å skrive Ruby -v. i terminalen din.

Nå kan vi faktisk få Jekyll i gang på nettstedet, sørg for at du er i katalogen du vil bygge nettstedet ditt i og bare skrive GEM Installer Jekyll Bundler ; Datamaskinen din vil da gå og ta tak i alle avhengighetene som trengs for å kjøre et nettsted.

02. Server lokalt eller bygg

Det er to hovedkommandoer du vil bruke med Jekyll - tjene og bygge . For å kjøre nettstedet ditt lokalt Type Jekyll serverer i kommandolinjen. Dette vil kjøre en versjon på http://127.0.0.1:4000 som du kan forhåndsvise endringene på. Hvis du allerede har perle og andre avhengigheter som er installert på maskinen din, kan denne kommandoen mislykkes på grunn av en mismatch i avhengighetsversjoner; I dette tilfellet, prøv Bundle Exec Jekyll Server i stedet. Kjører det samme, men med ordet bygge bare samler nettstedet.

03. Få startfilene

Kopier filene som følger med denne opplæringen på dette punktet for å gi deg grunn til å jobbe fra. Dette vil gi oss en hjemmeside, bloggliste, detaljside og eiendomsstrukturen for nettstedet. Oppdater siden din på http://127.0.0.1:4000, og du vil se at vi nå har noen grunnleggende sider å bygge fra. La oss få en rask oversikt over hvordan et Jekyll-nettsted fungerer.

Et Jekyll-nettsted er strukturert i en lett å følge vei. Eventuelle samlinger (typer innlegg) holdes i sin egen mappe, som er layouter og inkluderer. Du vil legge merke til en "_site" -mappe - dette er mappen som Jekyll bruker når du kjører en Jekyll bygge kommando.

Generate CSS — Bli med oss i London den 26. september for å generere CSS - klikk på bildet for å bestille billetten din (Bildekreditt: Fremtid)

04. Konfigurasjon

Build a blog with Jekyll: Configuration — Jekyll gir deg en flott struktur for å jobbe med og en enkel å administrere konfigurasjonsfil (Bilde Kreditt: Net)

Åpne _config.yml i tekstredigeringsprogrammet ditt og legg til dine egne detaljer; Ett nøkkelområde for å sjekke er å sette basen URL. Dette er mappen som nettstedet ditt er lastet inn. Config-filen ligner på å bruke globale alternativer kombinert med WP-config-filen hvis du bygde ut et WordPress-tema.

Du kan kontrollere kjerneinformasjon som titler og metabeskrivelser, e-post og sosiale kontoer og deretter all informasjonen som nettstedet trenger å kompilere, for eksempel samlinger og alle pluginene som brukes. Du kan bruke en blanding av HTML og Markdown for sider, avhengig av hva det er som du vil oppnå. Imidlertid vil egendefinerte sider som din hjemmeside og liste-sider generelt være HTML, mens innlegg og andre generelle sider som bruker en settmal, vil bli Markdown.

05. Front Matter

Front materie er en utdrag av yaml øverst på en fil. Jekyll bruker det til å holde variabler. Se på om.md-filen, og du kan se at vi setter tittelen, hvilken layout som skal brukes, forfatteren og eventuelle relaterte bilder.

06. Flytende tagger

Build a blog with Jekyll: Liquid tags — Flytende tagger tilbyr en enkel måte å jobbe med maler og brukes også i butikkene (Bilde Kreditt: Net)

Jekyll bruker flytende - et templerende språk som bruker objekter, tagger og filtre. Vi bruker den gjenstand Merk omgitt av doble braces {{}} å utdata frontstoffvariabler og en brace og prosentvis tegn på logikk {%%} .

07. Bygg navigasjonen din

I stedet for en statisk navigasjon bruker vi kraften til å konfigurere filer for å skille innholdet fra malen. Vi vil holde ut navigasjonselementer i "Data" -mappen som en konfigureringsfil og deretter sløyfe gjennom dem i navigering.html. Vi kan bare skrive inn hvilke sider og lenker vi vil fremover uten å gå tilbake til malen. Pass på at du er veldig forsiktig med WhiteSpace når du redigerer konfigurasjonsfilene dine, for eksempel navigering .yml eller frontstoff i starten av et innlegg fordi en svindelplass vil forårsake en feil.

Konfigurasjonsfilen er allerede angitt, slik at du skriver inn følgende kode i 'Navigation.html' Inkluder filen:

 {% for element i stedet.DATA.Navigation%}
     & lt; a href = "{{site.baseurl}} / {{item.link}}" {% hvis side.url == item.link%} class = "current" {% endif%} & gt; {{element .name}} & lt; / a & gt;
   {% enden%}

Vi bruker flytende logikk-koder for å se i navigasjonskonfigureringsfilen og slippe ut en lenke og navn for hver oppføring, i utgangspunktet bare en standard for sløyfe.

08. Opprett hjemmesiden

På vår hjemmeside skal vi liste opp vårt nyeste blogginnlegg som en helt og deretter ha en kastet fra vår side med en lenke gjennom. La oss starte med helten blokken. Åpne index.html og legg deretter til følgende kode:

 {% Tilordne post = site.posts.first%}
& lt; div class = "c-helt" style = "Bakgrunn: URL ({{POST.THUMBNAIL_IMAGE.LASTE | relative_url}}) Bunnsenter / Deksel Nei-Repeat;" & gt;
   & lt; h1 klasse = "c-hero__title" & gt; {{post.title}} & lt; / h1 & gt;
   {{Post.Intro | markere}}
   & lt; a href = "{{Post.url}}" klasse = "btn - helt" & gt; les hele innlegget & lt; / a & gt;
& lt; / div & gt;

Du vil se at vi først tilordner det nyeste innlegget, og refererer deretter til miniatyrbildet i Postets frontstoff. Inngangen Intro bruker et flytende filter markere å konvertere markdownen til HTML.

Med det på plass, la oss legge til en teaser fra siden også. Legg til følgende:

 & lt; div klasse = "C-funksjon" & gt;
   {% for side i Site.pages%}
       {% hvis side.url == '/About.html'%}
           & lt; img src = "{{side.profile_image.small}}" alt = "profie bilde" klasse = "c-funksjon __Image" / & gt;
           & lt; Div Class = "C-Feature__Text" & gt;
               & lt; h2 & gt; & lt; a href = "{{side.url}}" & gt; {{side.title}} & lt; / a & gt; & lt; / h2 & gt;
               & lt; p & gt; {{side.Intro}} & lt; / p & gt;
           & lt; / div & gt;
          
       {% slutt om %}
   {% enden%}
& lt; / div & gt;

Denne gangen bruker vi en til Loop for å sjekke gjennom sidene på nettstedet. Vi bruker side.url. For å filtrere på siden og deretter bruker vi en lignende templerende stil til helten for å kunne utføre sidene informasjonen.

09. Blogliste

Build a blog with Jekyll: Blog list — Et enkelt kortoppsett for resten av innleggene på nettstedet som bruker CSS-rutenett og flexbox (Bilde Kreditt: Net)

Med hjemmesiden opprettet kan vi flytte på blogliste-siden. Hvis du vil opprette listesiden, bruker vi igjen flytende koder for å gi oss logikken til å sløyfe gjennom alle filene i mappen 'Innlegg'.

Helden er gjort for deg fordi det følger den samme prosessen som hjemmesiden. Under helten i 'blog.html', legg til følgende:

& lt; div class = "constrain" & gt;
   & lt; h1 & gt; det beste av resten & lt; / h1 & gt;
   & lt; § class = "card-list" & gt;
           {% for innlegg 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; Les mer & lt; / a & gt;
                   & lt; / div & gt;
               & lt; / div & gt;
           {% enden%}
          
   & lt; / seksjon & gt;
& lt; / div & gt;

Igjen bruker vi en til Loop å gå gjennom innleggssamlingen. Men som vi allerede har slått ut det siste i helten, kompenseres vi denne sløyfen for å starte på post to. Et flytende filter brukes til å konvertere datoen til et format av vårt valg.

10. Blogdetaljer side

Ikke lenge å gå nå: Vi har nesten alle de grunnleggende elementene sammen. Et viktig aspekt igjen for å adressere er navigering. Når du leser et blogginnlegg, trenger du en måte å bla gjennom og lese mer. Vi kan legge til litt fin paginering til nettstedet vårt ved hjelp av en sidevariabel. Åpne post.html i layoutmappen og legg til følgende:

 & lt; div klasse = "c-pagination" & gt;
   {% hvis side.prosious%}
   & lt; div & gt;
       & lt; h3 & gt; tidligere & lt; / h3 & gt;
       & lt; p & gt; {{side.Previous.title}} & lt; / p & gt;
       & lt; p & gt; & lt; a class = "btn" href = "{{site.baseurl}} {{side.Previous.url}}" & gt; les post & lt; / a & gt;
   & lt; / div & gt;
   {% slutt om %}
   {% hvis side.next%}
   & lt; div & gt;
       & lt; h3 & gt; opp neste og lt; / h3 & gt;
       & lt; p & gt; {{side.next.title}} & lt; / p & gt;
       & lt; p & gt; & lt; a class = "btn" href = "{{site.baseurl}} {{side.next.url}}" & gt; les post & lt; / a & gt;
   & lt; / div & gt;
   {% slutt om %}
& lt; / div & gt;

Vi bruker den side.prosious. og side.Neste Variabler for å sjekke om det er et innlegg å klikke på til. Hvis det er da kan vi sende inn en blokk og ta med tittelen og linken til innlegget.

11. Bygg og publiser

Github-sider gjør Sass-filene for oss, så når du kjører Jekyll bygge De kompilerte filene er opprettet i mappen _site. Ingen GULP-filer eller Webpack her, bare fine Lean Styles! Du kan til og med redusere SASS-utgangen som en innstilling i hovedkonfigurasjons-filen for nettstedet. Innholdet i denne katalogen kan overføres til din valgte hosting. En ting å være klar over er at Github-sider faktisk støtter Jekyll, slik at du kan bygge og være vert for et nettsted som bruker Master-grenen som kilden. Du finner mer informasjon om dette her .

Denne artikkelen ble opprinnelig publisert i utgave 320 av nett , verdens bestselgende magasin for webdesignere og utviklere. Kjøp problem 320 her eller Abonner her .

Relaterte artikler:

Bygg en blogg med rutenett og flexbox
De beste gratis bloggingplattformene
Hvordan bygge et bloggingsted med gatsby

Hvordan bygge en blogg med Jekyll

01. Bli satt opp

02. Server lokalt eller bygg

03. Få startfilene

04. Konfigurasjon

05. Front Matter

06. Flytende tagger

07. Bygg navigasjonen din

08. Opprett hjemmesiden

09. Blogliste

10. Blogdetaljer side

11. Bygg og publiser

hvordan - Mest populære artikler

Hvordan skrive HTML-kode raskere

Slik endrer du størrelsen på et bilde i Photoshop

Hvordan implementere lys eller mørke moduser i CSS

12 tips for realistisk 3D-belysning

Hvordan lage fargerike verdener som forteller en historie

Hvordan lage dine egne lerretskort

Hvordan utvikle mytiske skapninger

Hvordan lage 3D-bokstaver i Illustrator

Kategorier