Share
I det föregående inlägget pratade jag om GitHub Pages och hur du ställer upp det på ditt GitHub-arkiv. Vi använde webbplatsgeneratorn för att komma igång och jag nämnde att GitHub Pages också stöder Jekyll.
I det här inlägget ska jag prata om Jekyll och visa dig hur du får det att installera med ditt projekt. Jag har skapat ett exempelprojekt som du drar ner och följer med också.
Vad exakt är Jekyll? Här är deras beskrivning på deras hemsida:
Jekyll är en enkel, bloggmedveten, statisk webbplatsgenerator.
Det är helt innehållsdrivet och det stöder även Markdown. Det använder Liquid för dess layouter så att du har lite återanvändning av saker som ditt huvud, rubrik och sidfot. Det genererar statiska sidor baserat på ditt innehåll och de layouter du anger.
Det är också blogg medveten, så det kan vara en potentiell ersättning för WordPress eller ett annat CMS.
Kanske är det viktigaste att notera att i Jekyll är permalinks, kategorier, sidor, inlägg och anpassade layouter alla förstklassiga medborgare.
Du kan också generera och se din webbplats lokalt också.
Jekyll är baserat på Ruby, så det enklaste sättet att installera använder RubyGems. Om du är på Mac eller Linux kan du installera Jekyll via kommandoraden genom att springa gem installation jekyll. Om du stöter på några problem under den installationen rekommenderar jag att du kolla in installationsguiden.
Om du är på Windows så finns det en Windows-specifik dokumentsida som du måste följa.
Det första du behöver installera är konfigurationsfilen. Du kommer att vilja lägga till en _config.yml filen till roten till ditt projekt. Det finns ett antal konfigurationsalternativ du kan lägga till, jag kommer att använda en delmängd av dem för det här exemplet. Fortsätt och lägg till följande till din _config.yml fil:
# Dependenser markdown: rdiscount pygments: true # Permalinks permalink: pretty # Server destination: _gh_pages värd: 0.0.0.0 port: 9001 baseurl: / encoding: UTF-8
Nu när vi har lagt till vår konfigurationsfil, låt oss fortsätta att konfigurera projektstrukturen.
Det finns en specifik struktur som du måste följa när du skapar en Jekyll-baserad webbplats. Det är viktigt att följa strukturen så att din webbplats genereras korrekt. Så här ser det ut,
Här kommer du att ha olika layouter för dina sidor. Du kan tänka på dessa som WordPress-sidmallar. Du kanske vill att din standardlayout ska ha ett sidofält och ha en annan layout som inte har en sidofält. Du kommer att referera till dessa layouter i ditt innehåll baserat på namnet på filen.
Fortsätt och skapa en _layouts mapp i roten till ditt projekt. Låt oss nu säga att du vill skapa standardlayouten. Du vill skapa en default.html inuti _layouts mapp. Då kan du referera till standardlayouten på dina olika sidor.
Det finns ett par saker som du förmodligen vill lägga till i alla dina layoutfiler, sidtitel och innehåll. Om du vill ha din sidtitel visas så vill du lägga till den i din layout med hjälp av följande syntax:
sidans titel
Du vill också ange var du vill att innehållet på varje sida ska fyllas i den layouten. För att göra det måste du använda följande syntax:
innehåll
Dessa används i standard.html i exemplet projektet.
Du kommer antagligen vilja inkludera några andra saker som kommer att återanvändas på varje sida som rubrik, sidfot, navigering och andra. Du kommer att vilja lägga till dessa i din _includes mapp.
Innehållet kommer att vara saker som du kommer att vilja återanvända på olika sidor som jag nämnde ovan. Du kommer att vilja lägga till dem i _includes mapp. Fortsätt och skapa en _includes mapp i roten till ditt projekt.
Låt oss säga att du vill ha dokumenthuvudet som ett inslag. Du måste först lägga till en head.html fil i _includes mapp. Du lägger sedan till allt du behöver för dokumenthuvudet, som doktyp, metadata, skript, etc..
Därefter vill du referera till det head.html filen i din default.html layoutfilen. Du gör det genom att använda följande syntax:
% include head.html%
Du kan se att detta används i standard.html i exemplet projektet.
Du skulle göra detsamma för allt annat du vill återanvända mellan sidor som din rubrik och sidfot. Du kan också skapa undermappar i _includes mapp och referera dem också. Jag gillar att göra detta för att organisera skillnadssektionerna på varje sida om de har mycket innehåll.
Nu när vi har en standardlayout, låt oss göra vår första sida. Fortsätt och skapa en index.html filen i rotmappen i ditt projekt. Oroa dig inte, det kommer inte att åsidosätta ditt tema index.php fil om du använder det här för att dokumentera ditt WordPress-tema.
Överst på varje fil måste du ange några saker om sidan. Detta är vad jekyll kommer att referera till när man bygger varje sida. Det finns ett antal saker du kan ställa in, men jag kommer att fokusera på några av dem:
Här är ett exempel att lägga till i toppen av din index.html fil:
--- layout: standard titel: Tuts + GitHub Sidor slug: tuts-github-sidor ---
Nu när vi har vår sida setup, allt vi behöver göra nu är att lägga till vårt innehåll. Lägg bara till all HTML som du vill visa på din sida.
Byggnaden och betjäningen av dina sidor görs via kommandoraden. Gå vidare och öppna ditt kommandoradsverktyg, välj, skriv in jekyll servera och tryck på Enter. Du bör se följande utdata:
Om du ser rätt utdata, så är dina sidor byggda och redo att ses. Nu kan du se dina sidor genom att gå till http: // localhost: 9001, eller vilken port du har angivit i din _config.yml fil, i din webbläsare efter eget val.
Jag har täckt grunderna om att komma igång med att använda Jekyll med ditt projekt. Jag gick igenom hur du konfigurerar konfigurationsfilen och projektstrukturen. Jag pratade också om hur du kan bygga och tjäna dina sidor. Om du vill se allt sätta ihop, kan du titta på det här exemplet projektet.
I nästa inlägg kommer jag att prata om hur du serverar dina sidor på GitHub Pages och distribuerar dem i ditt WordPress-tema eller plugin.
Accentsconagua