Share
I forrige innlegg snakket jeg om GitHub Pages og hvordan du setter det opp på GitHub-depotet ditt. Vi brukte nettstedgeneratoren til å komme i gang, og jeg nevnte at GitHub Pages også støtter Jekyll.
I dette innlegget vil jeg snakke om Jekyll og vise deg hvordan du får det oppsett med prosjektet ditt. Jeg har laget et eksempel prosjekt som du trekker ned og følger med også.
Hva er Jekyll? Her er deres beskrivelse på deres nettsted:
Jekyll er en enkel, bloggbevisst, statisk nettstedgenerator.
Det er helt innholdsdrevet og det støtter også Markdown. Den bruker væske for sine layouter, slik at du har litt gjenbruk av ting som hodet ditt, topptekst og bunntekst. Det vil generere statiske sider basert på innholdet og layoutene du angir.
Det er også bloggbevisst, så det kan være en potensiell erstatning for WordPress eller et annet CMS.
Kanskje det viktigste å merke seg er at i Jekyll, permalinks, kategorier, sider, innlegg og tilpassede layouter er alle førsteklasses borgere.
Du kan også generere og vise nettstedet ditt lokalt også.
Jekyll er basert på Ruby, så den enkleste måten å installere bruker RubyGems. Hvis du er på Mac eller Linux, kan du installere Jekyll via kommandolinjen ved å kjøre perle installasjon jekyll. Hvis du får problemer i løpet av denne installasjonen, foreslår jeg å sjekke ut installasjonsveiledningen.
Hvis du er på Windows, så er det en Windows-spesifikke dokumentside som du må følge.
Det første du må konfigurere er konfigurasjonsfilen. Du vil legge til en _config.yml filen til roten til prosjektet ditt. Det finnes en rekke konfigurasjonsalternativer du kan legge til, jeg vil bruke en delmengde av dem for dette eksempelet. Gå videre og legg til følgende i din _config.yml fil:
# Dependenser markdown: rdiscount pygments: true # Permalinks permalink: pen # Server destinasjon: _gh_pages vert: 0.0.0.0 port: 9001 baseurl: / encoding: UTF-8
Nå som vi har lagt til vår konfigurasjonsfil, la vi fortsette å sette opp prosjektstrukturen.
Det er en spesifikk struktur som du må følge når du oppretter et Jekyll-basert nettsted. Det er viktig å følge strukturen for at nettstedet ditt skal genereres riktig. Slik ser det ut,
Dette er hvor du skal ha forskjellige layouter for sidene dine. Du kan tenke på disse for å være som WordPress-sidemaler. Du vil kanskje at standardoppsettet ditt skal ha et sidebjelke og ha en annen layout som ikke har et sidebjelke. Du vil referere til disse oppsettene i innholdet ditt basert på navnet på filen.
Gå videre og opprett en _layouts mappe i roten til prosjektet ditt. Neste, la oss si at du vil opprette standardoppsettet. Du vil opprette en default.html inne i _layouts mappe. Du vil da kunne referere til standardoppsettet på de forskjellige sidene dine.
Det er et par ting du vil sannsynligvis legge til i hver av layoutfilene, sidetittelen og innholdet. Hvis du vil ha siden tittelen dukker opp, vil du legge til den i oppsettet ditt ved å bruke følgende syntaks:
side tittel
Du vil også spesifisere hvor du vil at innholdet på hver side skal fylles i det oppsettet. For å gjøre dette må du bruke følgende syntaks:
innhold
Disse brukes i standard.html i eksempelprosjektet.
Du vil sannsynligvis vil inkludere noen andre ting som vil bli gjenbrukt på hver side som topptekst, bunntekst, navigasjon og andre. Du vil legge til disse i din _includes mappe.
Inkluderingen kommer til å være ting som du vil ønske å bruke på forskjellige sider som jeg nevnte ovenfor. Du vil legge til dem i _includes mappe. Gå videre og opprett en _includes mappe i roten til prosjektet ditt.
La oss si at du vil ha dokumenthodet som en inkludere. Du må først legge til en head.html fil i _includes mappe. Du vil da legge til alt du trenger for dokumenthodet som doktype, metadata, skript, etc..
Neste vil du referere til det head.html filen i din default.html layoutfil. Du vil gjøre dette ved å bruke følgende syntaks:
% inkluderer head.html%
Du kan se at dette blir brukt i standard.html i eksempelprosjektet.
Du ville gjøre det samme for alt annet du vil gjenbruke mellom sider som overskrift og bunntekst. Du kan også lage undermapper i _includes mappe og referanse dem også. Jeg liker å gjøre dette for å organisere forskjellene på hver side hvis de har mye innhold.
Nå som vi har en standard layout, la oss lage vår første side. Gå videre og opprett en index.html filen i rotmappen til prosjektet ditt. Ikke bekymre deg, det vil ikke overstyre temaet ditt index.php fil hvis du bruker dette til å dokumentere WordPress-temaet ditt.
Øverst på hver fil må du spesifisere noen få ting om siden. Dette er hva jekyll vil referere til når du bygger hver side. Det finnes en rekke ting du kan sette, men jeg skal fokusere på noen av dem:
Her er et eksempel for å legge til toppen av din index.html fil:
--- layout: standard tittel: Tuts + GitHub Pages slug: tuts-github-sider ---
Nå som vi har vår sideoppsett, er alt vi trenger å gjøre nå, legg til innholdet vårt. Bare legg til all HTML du vil vise opp på siden din.
Byggingen og betjeningen av sidene dine gjøres via kommandolinjen. Gå videre og åpne ditt kommandolinjeverktøy, velg, skriv inn jekyll servere og trykk Enter. Du bør se følgende utgang:
Hvis du ser riktig utgang, er sidene dine bygget og klar til å bli vist. Nå kan du se sidene dine ved å gå til http: // localhost: 9001, eller hvilken port du spesifisert i din _config.yml fil, i din valgte nettleser.
Jeg har dekket det grunnleggende om å komme i gang med å bruke Jekyll med prosjektet ditt. Jeg gikk gjennom hvordan du konfigurerer konfigurasjonsfilen og prosjektstrukturen. Jeg snakket også om hvordan du kan bygge og betjene dine sider. Hvis du vil se alt satt sammen, kan du se på dette eksempelprosjektet.
I neste innlegg vil jeg snakke om hvordan du skal betjene sidene dine på GitHub Pages og distribuere dem i WordPress-temaet eller plugin-modulen.
Accentsconagua