Share
Jekyll is een statisch systeem voor het genereren van sites waarmee u platte tekstbestanden kunt maken en deze kunt converteren naar een geavanceerde blog zonder dat u zich zorgen hoeft te maken over de databases, beveiligingsproblemen, updates en andere complicaties die samen kunnen gaan met veel CMS's en blogplatforms..
Net als bij de meeste sitesysteembeheersystemen is het mogelijk om thema's op Jekyll-sites te gebruiken. Op dit moment gebruikt Jekyll echter geen thema's zoals je gewend bent.
Op dit moment zijn Jekyll-thema's niet onafhankelijke pakketten moeten via een installatieprogramma worden toegepast. Wanneer u een Jekyll-thema downloadt, downloadt u ook daadwerkelijk alle bestanden vereist om een volledige Jekyll-site te runnen.
Dit zal veranderen in een toekomstige versie van Jekyll, maar voor nu zul je moeten weten hoe om te gaan met het feit dat Jekyll-thema's worden geleverd met een hele site die aan hen is gekoppeld.
In deze zelfstudie gaan we van bij het begin een Jekyll-thema opzetten, beginnend met een paar eenvoudige installatieadviezen, een stap in de omgang met de functies van een nieuw thema en tips voor het opzetten van een nieuwe site of opnieuw beginnen een bestaande thematisering.
Laten we beginnen!
De Jekyll-categorie op Envato Market heeft een aantal thema's variërend van $ 19 tot $ 24. Later zullen we "Writer" en "Astro" (de twee huidige topverkopers) gebruiken om de installatie aan te tonen.
Jekyll-thema's op Envato MarketJekyll is ontworpen om offline te worden beheerd op uw eigen computer, ingebouwd in een statische HTML-site en vervolgens geïmplementeerd. Bij het toevoegen van inhoud is het basisproces om een markdown-bestand aan te maken, bovenaan wat inhoud toe te voegen, de rest van het bestand met inhoud in te vullen en vervolgens uw site opnieuw op te bouwen.
Zodra uw site is gebouwd, kunt u deze op elke gewenste manier implementeren, of dit nu via FTP of git-commando's is. We zullen ons echter niet concentreren op de implementatie in deze tutorial, dus als je meer over het onderwerp wilt lezen, bezoek dan de Jekyll-documentatie..
Integendeel, we zullen ons concentreren op het gedeelte van uw Jekyll-site-instellingsproces dat offline op uw computer gebeurt, wat allemaal begint met de installatie.
Werken met Jekyll vergt een beetje gebruik van de commandoregel, maar als je nog nooit met de opdrachtregel hebt gewerkt, laat dat je dan niet afschrikken. Ik raad aan enkele items in onze instructielijn The Command Line for Web Design door te nemen om comfortabel te worden.
Als uw computer Windows gebruikt, wordt Jekyll helaas niet officieel ondersteund. Dat betekent niet dat je het niet kunt laten werken, maar misschien moet je een paar hindernissen nemen. Als je een poging wilt doen om Jekyll op Windows te gebruiken, bekijk dan de details in de Jekyll-documentatie.
Anders, als je Mac OS X, Linux of Unix gebruikt, moet je ervoor zorgen dat je deze vereisten hebt geïnstalleerd:
Om te controleren of u Ruby hebt geïnstalleerd, voert u de opdracht uit ruby -v. Controleren op Ruby Gems run gem -v. In beide gevallen controleren deze commando's op een versienummer, zolang u een nummer ziet teruggestuurd in uw terminal dat u goed kunt gebruiken.
We werken met Jekyll 3.1.x, dus je hebt NodeJS of Python niet nodig zoals vermeld op de Jekyll-installatiedocumentatiepagina.
Om Jekyll op je computer te installeren, voer je het volgende commando uit: gem installeer jekyll
Als u een bericht ziet met de melding dat u geen schrijfrechten heeft, voert u de opdracht in met sudo en voer uw wachtwoord in wanneer daarom wordt gevraagd.
U ziet dan een paar regels afdrukken in de terminal die het installatieproces tonen dat wordt uitgevoerd. Als het zegt "1 edelsteen geïnstalleerd" u bent klaar.
Laten we snel een Jekyll-site maken, zodat u kunt zien hoe deze eruit ziet in de standaard, niet-getypte staat en u vertrouwd maken met de structuur van bestanden en mappen. Maak een map om de site te huisvesten, open een terminal die naar de map verwijst en voer: Jekyll nieuw .
Notitie: als je op een gegeven moment een nieuwe Jekyll-site wilt maken in de submap, gebruik dan de volgende opdracht: jekyll nieuwe submapnaam
Wanneer de site-instelling is voltooid, ziet u een bericht in het bericht van uw terminal "Nieuwe jekyll-site geïnstalleerd in
Voer nu het commando uit Jekyll serveren om uw site offline te krijgen.
Wanneer je het bericht ziet "Server draait ... druk op ctrl-c om te stoppen" in uw terminal kunt u het adres http: // localhost: 4000 in een browser gebruiken en de standaard Jekyll-site bekijken.
Nu je hebt gezien hoe de bestands- en mapstructuur van een standaard Jekyll-site eruit ziet, en de status van het niet-thema, zul je een beter begrip hebben van wat je ziet in een typische Jekyll-themadownload.
Zoals je weet uit wat we tot nu toe in deze tutorial hebben besproken, zijn Jekyll-thema's op dit moment beschikbaar alle bestanden nodig om een hele site te runnen. En zoals je in het laatste gedeelte hebt gezien, kun je zodra je al die bestanden hebt uitvoeren Jekyll serveren om het bekijken van die site in een browser mogelijk te maken.
Dit betekent dat wanneer u een nieuw Jekyll-thema downloadt, u het kunt uitpakken, uitvoeren Jekyll serveren en demo het thema meteen op een volledig functionele Jekyll-site. Veel thema's zullen zelfs worden geleverd met reeds bijgevoegde demo-inhoud.
Laten we eens kijken naar enkele voorbeelden met behulp van de thema's "Writer" en "Astro", (of wat je maar wilt).
Eenmaal uitgepakt, doorzoekt u de structuur van het thema totdat u de hoofdmap vindt die alle bestanden van een Jekyll-site bevat. U zou deze map moeten kunnen herkennen van uw standaard Jekyll-installatie eerder. Zoek naar dingen zoals de _config.yml bestand, de _includes directory enzovoort.
Open vervolgens een terminal in de map en voer uit Jekyll serveren.
Als alles is gelukt, wordt het bericht weergegeven "Server adres: " met een URL weergegeven aan het einde van de terminal. Kopieer en plak deze URL in een browser en je zou een demo van je nieuwe thema moeten zien.
In sommige gevallen wordt mogelijk een foutbericht weergegeven wanneer u probeert uit te voeren Jekyll serveren. Als dit gebeurt, kijk dan of het bericht klaagt over een ontbrekende afhankelijkheid, dat wil zeggen dat er iets ontbreekt dat het thema nodig heeft om te kunnen functioneren..
In dit voorbeeld kunt u in de rode fouttekst zien dat het juweel "jekyll-paginate" ontbreekt:
Een snelle Google-zoekopdracht geeft de Github-repo weer voor de desbetreffende edelsteen en geeft de opdracht die nodig is om deze te installeren.
Na het uitvoeren van de opdracht en het installeren van de ontbrekende afhankelijkheid Jekyll serveren kan zoals verwacht met het thema werken.
Als u naar de opgegeven URL gaat en de site niet ziet, zoals bijvoorbeeld:
... controleer de waarde van baseurl in de _config.yml het dossier. Dit bestand, waar we later meer over zullen praten, beheerst de algemene configuratie voor de hele site.
De baseurl variabele is toegevoegd aan het hoofddomein, dat wanneer we offline werken http: // localhost: 4000 is.
In het bovenstaande voorbeeld willen we dat onze site wordt weergegeven op http: // localhost: 4000. In de _config.yml bestand onze baseurl variabele is ingesteld op:
baseurl: "http: // localhost"
Dit lijkt misschien in het begin goed, maar omdat deze waarde aan het hoofddomein is toegevoegd, probeert de site de site daadwerkelijk te laden op http: // localhost: 4000http: // localhost.
Dus we moeten de waarde veranderen in een lege string als deze:
baseurl: ""
Uw site wordt vervolgens geladen zoals verwacht.
Als u uw site vanuit een subdirectory wilt laden, wijzigt u de baseurl waarde aan de naam van de submap, waarbij u zeker moet beginnen en eindigen met een slash:
baseurl: "/ themedemo /"
Een van de belangrijkste redenen waarom het een goed idee is om het thema meteen uit de bestaande structuur te dienen is, (anders dan controleren dat het wordt uitgevoerd zoals verwacht), geeft het je de gelegenheid om vertrouwd te raken met de functies en werkstromen van het thema..
Omdat Jekyll heel veel flexibiliteit biedt, kunnen de thema's functionaliteit bieden die nogal verschilt van de ene naar de volgende. Nadat je een demo van een nieuw thema hebt gediend, neem je even de tijd om rond te bladeren en te zien wat voor soort structuur het thema heeft. Zoek naar zaken als of het thema categoriepagina's, afgebeelde afbeeldingen, auteurspagina's enzovoort heeft. Noteer deze functies, zodat u de documentatie van het thema kunt doorzoeken en leren gebruiken.
Je zou ook de bestands- en mapstructuur van het thema moeten bekijken. De belangrijkste gebieden die u wilt onderzoeken, zijn:
U moet ook weten welke configuratie-opties voor de site u mogelijk in de sites moet instellen _config.yml bestand om de functies van het thema te gebruiken, zoals URL's van sociale media, auteursinformatie, navigatielinks enzovoort.
Nu hebt u de kans gehad om over het thema te kijken en uzelf vertrouwd te maken, het is tijd om het op uw eigen site te gebruiken. Laat de demo-versie die u al hebt gemaakt ongewijzigd zodat u uw vers gebouwde site kunt vergelijken met.
Maak een nieuwe map op uw computer en extraheer alle thema's erin.
Ga deze keer naar de _posts map en verwijder alle bestanden daarin zodat de demopalen worden verwijderd.
Verwijder daarna alle .md (markdown) bestanden uit de hoofdmap, zodat alle demopagina's ook zijn verdwenen.
Als u wilt, kunt u ook afbeeldingen die worden gebruikt in demo-inhoud, zoals post-thumbnails, vinden en verwijderen als u ze wilt vervangen door uw eigen thumbnails. Of demo-inhoud afbeeldingen aanwezig zijn kan variëren van thema tot thema.
Als je thema wel demo-afbeeldingen bevat die je wilt verwijderen, maar je weet niet precies waar ze zijn, kijk dan in de themadocumentatie zoals die zou moeten zijn. Anders moet u misschien de code doorlopen in de sjablonen van het thema en daar uitzoeken.
Vervolgens zou u de. Moeten openen _config.yml bestand uit de hoofdmap en stel variabelen voor de hele site in die vereist zijn voor het thema. Sommige instellingen zijn over het algemeen voor iedereen hetzelfde _config.yml bestanden, zoals titel, e-mail, Omschrijving en een paar anderen. Sommige instellingen zullen echter specifiek zijn voor het gegeven thema.
Wat u precies moet doen in het siteconfiguratiebestand, is afhankelijk van het specifieke thema. Het is daarom verstandig om de documentatie van het thema nu te raadplegen voor informatie over wat elke instelling doet.
In het Writer-thema is het bijvoorbeeld mogelijk om een aangepast navigatiemenu in te stellen met behulp van de nav_list variabele om een lijst met menu-items te definiëren. Elk heeft een label, permalink en een klasse die naast het pictogram een Awesome Awesome verschijnt.
Het Astro-thema maakt daarentegen geen gebruik van de Writer-specifc nav_item variabele, maar heeft zijn eigen aangepaste variabelen waarmee u links naar uw verschillende sociale media-accounts kunt toevoegen, evenals Disqus-opmerkingen activeren enzovoort.
Werk de variabelen in uw eigen thema's door _config.yml bestand totdat je ze allemaal naar wens hebt ingesteld.
Houd er rekening mee dat als u dergelijke wijzigingen aanbrengt nadat u uw nieuwe site voor het eerst heeft gebruikt Jekyll serveren, je moet het proces stoppen met CTRL + C en start het opnieuw op om eventuele latere wijzigingen van kracht te laten worden.
Sommige thema's geven u de mogelijkheid om uit meerdere lay-outs voor uw startpagina te kiezen en besturingselementen in te stellen die hun weergave beïnvloeden. Als dit het geval is, zult u waarschijnlijk merken dat de instellingen kunnen worden gewijzigd in de voorkant van de index.html bestand uit de hoofdmap.
Als er meerdere lay-outs beschikbaar zijn, zult u waarschijnlijk merken dat u een andere kunt kiezen door de waarde van de te wijzigen lay-out instelling - u moet verwijzen naar de documentatie van het thema om te zien welke mogelijke waarden kunnen worden gebruikt.
Terwijl u het bestand bewerkt, kijkt u of er andere waarden zijn die moeten worden gewijzigd om inhoud te effectueren die op de startpagina wordt weergegeven. In het thema Schrijver is het bijvoorbeeld mogelijk om een aangepaste titel en beschrijving in te stellen die alleen op de startpagina worden weergegeven, evenals een uitgelichte afbeelding.
Als u pagina's zoals "Over" of "Contact" wilt toevoegen, is dit het moment. Voeg een ... toe .md (markdown) document naar de hoofdmap van de site voor elke pagina die u wilt instellen.
Notitie: sommige thema's zijn ingesteld om alle pagina's in een submap te plaatsen (meestal "pagina's" genoemd), in plaats van de hoofdmap dus controleer op de themadocumenten om te zien of dit het geval is.
Hier heb ik bijvoorbeeld een "Over de site" -pagina (about.md), een "Over mij" auteursprofielpagina (author-kezz.md) en een "Contact" -pagina (contact.md) toegevoegd.
Terwijl u paginabestanden toevoegt, wilt u weten of er specifieke indelingssjablonen en / of front matter-instellingen zijn die u ermee moet gebruiken. Om erachter te komen kun je verwijzen naar de docs van het thema, of kopieer en plak je markdown-bestanden van de demo-installatie die je hebt gedaan van het thema en bewerk ze opnieuw.
Hier heb ik bijvoorbeeld gekopieerd over een bestaande auteurspagina uit de Writer-demo en deze geconverteerd naar de mijne door deze te hernoemen en vervolgens de voorste materie en inhoud te bewerken.
Nu je de essentie hebt van je sitestructuur, is het tijd om wat berichten toe te voegen. Ik raad aan een bericht te kopiëren van de _posts map op uw demosite en plak deze in de installatie waar u aan werkt. Vervolgens kunt u de naam wijzigen met de datum en de permalink die u voor uw nieuwe artikel wilt. Door een demopost te hergebruiken, is alle vereiste voorkant aanwezig en hoeft u deze alleen bij te werken.
Sommige thema's bieden ondersteuning voor categorie- en labelpagina's. Dit is echter niet altijd het geval en daarom kan de implementatie verschillen van thema tot thema. Bekijk de documentatie van uw thema over wat u mogelijk moet doen om met categorieën en tags op uw site te werken.
In het thema Writer bijvoorbeeld is het voor elke categorie die u wilt gebruiken noodzakelijk om een map en sjabloonbestand handmatig in te stellen in een sitesubmap met de naam "category".
Er kunnen ook een aantal andere extra functies zijn waarvoor het specifieke thema dat u gebruikt beschikbaar is. Zorg ervoor dat je de lijst met functies en documentatie van je thema goed hebt gelezen om er zeker van te zijn dat je alles kunt overnemen.
Als je al een Jekyll-site hebt en gewoon een nieuw thema wilt toepassen, wil je bijna hetzelfde proces doormaken als hierboven. Het verschil zal komen na het verwijderen van de demo-inhoud, wanneer in plaats van het toevoegen van nieuwe pagina's en berichten die u kunt kopiëren over de inhoud van uw bestaande site.
Als u een bestaande Jekyll-site hebt met reeds aanwezige pagina's, kopieert en plakt u de bijbehorende markdown-bestanden van uw oude site in uw nieuwe. Ga door elke pagina en werk de hoofdzaken bij om de lay-outs en vereiste variabelen van het nieuwe thema te gebruiken.
Kopieer vervolgens al uw postbestanden van uw oude _posts map in uw nieuwe map. Het wordt een beetje vervelend, maar je zult hoogstwaarschijnlijk elk postbestand één voor één moeten doorlopen en de voorkant ervan moeten bijwerken met alle instellingen die vereist zijn voor het nieuwe thema, en alles verwijderen dat nodig was voor het oude thema maar worden niet meer gebruikt.
Als u een map met afbeeldingen en andere media gebruikt in pagina's en berichten op uw oude site, kopieert u de volledige map naar uw nieuwe sitestructuur. Uw berichten en pagina's moeten nog steeds naar dezelfde afbeeldingslocaties verwijzen, zodat ze in uw inhoud kunnen blijven verschijnen.
Dus dat zijn de essenties van hoe je een Jekyll-thema opzet! De fijnere punten van het proces variëren van thema tot thema, maar u kunt deze essentiële stadia in elk geval nog steeds volgen. Laten we snel samenvatten wat die fasen zijn.
Accentsconagua
Jekyll serveren Ik hoop dat deze tutorial je heeft geholpen vertrouwen te hebben in het opzetten van een nieuwe Jekyll-site met een aangepast thema of het overzetten van het thema van je bestaande site naar een nieuw thema.
Voor een gedegen handleiding over het gebruik van Jekyll, bekijk deze cursus van Guy Routledge:
Bedankt voor het lezen en ik zie je binnenkort weer!
