Een volledig CMS is zelden nodig. Soms hoeft u alleen maar een lichte, statische website te maken? maar je hebt net genoeg pagina's om het proces van het kopiëren van sjabloonbestanden te maken en het maken van cross-site markup-wijzigingen een hele klus. Vandaag zal ik een eenvoudige oplossing demonstreren, Jekyll, die het maken van kleine websites een koud kunstje zal maken.
Stap 0: ontmoet Jekyll
Jekyll is een eenvoudige, blog-bewuste, statische site-generator.
Jekyll is een eenvoudige, blog-bewuste, statische site-generator. Dat is wat de site zegt. Maar wat betekent dit precies? Een statische site-generator is een programma dat een set bestanden maakt en uw site ermee genereert. Zoals u ziet, kunnen we een reeks sjablonen gebruiken, de inhoudsbestanden afzonderlijk maken en vervolgens Jekyll gebruiken om onze site te genereren. De? Blog op de hoogte? deel betekent dat we dit kunnen gebruiken om een blog te maken, of elke website die een reeks post-achtige items heeft (zoals een portfolio). Laten we het proberen!
Stap 1: Jekyll installeren
Raadpleeg hier voor meer informatie over Ruby Gems.
We beginnen met het installeren van Jekyll; het is een Ruby-juweeltje, dus dit zou vrij eenvoudig moeten zijn.
gem installeer jekyll # gebruik 'sudo' als je installatie dit vereist
Yep: zo eenvoudig is het. Er zijn nog een paar stukjes die we kunnen installeren als we van plan zijn om een meer complexe set-up uit te voeren, maar omdat we dat niet zijn, zal dit de truc doen.
Stap 2: onze eerste sjabloon maken
Elk bestand of elke map die niet begint met een onderstrepingsteken, wordt gekopieerd naar de gegenereerde site.
Laten we vervolgens de mappen voor Jekyll instellen. Maak een map, genaamd voorbeeld-app voor deze tutorial; we zullen een kleine portfoliosite maken voor, laten we zeggen, een fotograaf. Dit is een goed voorbeeld van waar Jekyll schittert: het is een kleine site die niet te vaak wordt bijgewerkt, maar groot genoeg is om niet elke pagina te openen wanneer u een opmaakwijziging moet aanbrengen.
Binnen voorbeeld-app, maak een map genaamd _layouts. Let op het onderstrepingsteken aan het begin van deze map: elke map of elk bestand dat begint met een onderstrepingsteken maakt geen deel uit van de site die Jekyll genereert. Als ze een naam hebben die Jekyll herkent (zoals _config.yml of _layouts), wordt de inhoud ervan gebruikt bij het genereren van de site, maar de bestanden zelf worden niet weergegeven op de site. Onthoud dit: elk bestand of elke map die niet begint met een onderstrepingsteken, wordt gekopieerd naar de gegenereerde site (die trouwens standaard de _site sub-map).
Laten we een lay-out maken. We beginnen met een algemene site-indeling die alle? Chrome bevat? voor onze site. Maak een nieuw bestand, genaamd default.html binnen in de _layouts map (de naam doet er niet toe), en voeg de volgende code toe:
% if page.title% page.title | % endif% John Doe, fotograaf
John Doe Photograghy
inhoud
Een paar dingen hier om in gedachten te houden?
Ten eerste gebruikt Jekyll het sjabloonsysteem Vloeistof (standaard). Dit betekent dat je alles wat je kunt doen met Liquid, kunt doen in een sjabloon in Jekyll. Bijvoorbeeld in de </code> tag, we gebruiken beide typen Vloeibare markeringen: <em>uitvoer markup</em> en <em>tag opmaak</em>. Uitvoermarkering kan tekst uitvoeren (als de variabele waarnaar wordt verwezen bestaat), terwijl markeringsmarkering niet. Uitvoeropmaak wordt begrensd door dubbele accolades, terwijl markeringsmarkering wordt gescheiden door een duo met accolades / percentagesymbolen.</p> <p>Het volgende dat je hierboven opmerkt is wat zich in de Liquid-tags bevindt: dingen zoals <code>pagina titel</code> en <code>inhoud</code>. Dit zijn variabelen geleverd door Jekyll; u kunt de lijst met beschikbare sjabloongegevens in de documenten bekijken. We kunnen ook aangepaste sjabloongegevens maken, zoals we binnenkort zullen bespreken.</p> <p>Let ten slotte op de CSS waarnaar we linken: create a <code>css</code> map in de hoofdmap van uw project en gooi dit stukje styling in een <code>style.css</code> het dossier:</p> <pre>lichaam font: 16px / 1.5 verdana, helvetica-neue, helvetica, arial, san-serif; achtergrond: zwart; kleur: #ececec; opvulling: 0; marge: 0; ul margin: 0; opvulling: 0; a color: #ccc; tekstdecoratie: geen; a: hover color: #ececec; tekstdecoratie: onderstrepen; #main width: 960px; marge: 0 auto; achtergrond: rgba (255, 255, 255, 0,4); header padding: 0 10px; overloop verborgen; h1 marge: 0; nav ul, ul.entries list-style-type: none; nav li a float: left; marge: 5px; .content opvulling: 10px; ul.entries li positie: relatief; marge: 20px auto; opvulling: 20px; achtergrond: #ececec; breedte: 600 px; ul.entries img width: 600px; ul.entries li h3 position: absolute; onder: -18px; links: 17px; font-size: 2em; ul.entries a color: #ececec; ul.entries a: hover color: #fff; footer font-size: 0.65em; text-align: center; </pre> <p>Maak ook een <code>img</code> map en voeg een afbeelding toe, genaamd <code>banner.jpg</code>; we zullen het binnenkort gebruiken. Elke afbeelding zal doen; snijd het gewoon bij <code>960px</code> door <code>300px;</code>.</p> <p>U vraagt zich misschien af waarom we de <code>als</code> verklaring hierboven als de <code>pagina titel</code> variabele wordt gewoon niet weergegeven als deze bestaat? Nou, als het bestaat, wil ik de verticale balk erna opnemen; een andere manier om te schrijven zou zo zijn:</p> <pre>page.title % if page.title% | % stop als %</pre> <p>Dus, hoe gebruiken we deze sjabloon? Welnu, we moeten een pagina maken die deze sjabloon gebruikt. Maak in de hoofdmap van ons project een <code>index.html</code> het dossier. Hier is de inhoud:</p> <pre>--- layout: standaard --- <section role="banner"> <img src="//accentsconagua.com/img/images_26/building-static-sites-with-jekyll.jpg" /> </section> <section> <p> Welkom bij John Doe Photography! Bekijk alstublieft mijn portfolio om mijn werk te zien. </p> </section></pre> <p>Hier is de inhoud van onze <code>index.html</code> het dossier. Let op wat zich bovenaan het bestand bevindt: Jekyll noemt deze YAML-kwestie van voren. Elk bestand (dat niet begint met een onderstrepingsteken) met YAML-frontmateriaal wordt door Jekyll gegenereerd voordat het in de <code>_site</code> map (als er geen onderstrepingsteken of YFM is, wordt deze alleen gekopieerd <code>_site</code>). In dit geval vertelt de YAML-frontzaak Jekyll precies welke sjabloon we willen gebruiken.</p> <p>Open nu een terminal, <code>CD</code> in uw projectdirectory en voer het uit <code>jekyll</code>. Je zou zoiets als dit moeten zien:</p> <pre>WAARSCHUWING: Kon de configuratie niet lezen. Standaardinstellingen (en opties) gebruiken. Geen bestand of map - /Users/andrew/Desktop/example-app/_config.yml Bouwsite: / Gebruikers / Andrew / Desktop / example-app -> / Gebruikers / Andrew / Desktop / example-app / _site Succesvol gegenereerde website : / Gebruikers / andrew / Desktop / example-app -> / Gebruikers / andrew / Desktop / example-app / _site</pre> <p>Negeer de waarschuwing; daar komen we binnenkort op terug. Voor nu kun je zien dat de site is gebouwd in een nieuw ontwerp <code>_site</code> directory. Als u de <code>_site / index.html</code> bestand in uw browser naar keuze, zou u het moeten zien? een mislukking. Het probleem is dat onze paden (urls en stylesheet) beginnen met een schuine streep naar voren. Dit betekent dat we ze niet alleen als bestanden kunnen zien, we moeten ze ook op een server bekijken. Natuurlijk kun je W / MAMP starten, maar waarom de moeite nemen? Jekyll heeft een ingebouwde server. Dus, ren <code>jekyll - server</code>, en ga naar localhost: 4000 om iets als afbeelding hieronder te zien:</p> <img src="//accentsconagua.com/img/images_26/building-static-sites-with-jekyll.png"> <p>Als de bovenstaande afbeelding niet genoeg is, kijk dan naar de code van <code>_site / index.html</code>. U ziet dat de sjabloon die we hebben opgegeven, is gemengd met de inhoud die we hebben verstrekt en -voila! -We hebben onze pagina.</p> <p>Ik wil je eraan herinneren dat het de YAML-frontzaak is die deze magie laat gebeuren; als een bestand niet begint met drie streepjes, een of meer regels met eigenschappen en een andere regel met drie streepjes, wordt het bestand gewoon gekopieerd naar de <code>_site</code> map, er vindt geen generatie plaats.</p> <hr> <h2> Stap 3: een portfoliosjabloon maken</h2> <p>Nu we vertrouwd zijn met de basis, laten we een portfolio maken voor onze fictieve fotograaf. Weet je nog hoe ik opmerkte dat Jekyll een blog is? We gaan deze blogbewustmakingsfunctie in ons voordeel gebruiken: in plaats van berichten hebben we portfolio-items.</p> <p>Posts horen in een map, genaamd <code>_posts</code>, dus creëer dat nu. Het bestandsnaampatroon voor berichten moet ook specifiek zijn: <code>jaar-maand-dag-title.ext</code>. Berichten - nou, elk bestand op je Jekyll-site, echt - kan Markdown of HTML zijn.</p> <p>Dus laten we een paar berichten maken: onthoud, dit zullen eigenlijk vermeldingen in onze portfolio zijn:</p> <h3><code>_posts / 2010-03-04-bikes.md</code></h3> <pre>--- layout: portfolio_entry image: /img/bikes.jpg title: Bikes, Black and White --- Fietsen worden door bijna iedereen in het centrum van Amsterdam gebruikt. Deze zijn vastgeketend aan een fietsenrek.</pre> <h3><code>_posts / 2010-10-01-wing.md</code></h3> <pre>--- layout: portfolio_entry title: Wing and a Prayer image: /img/wing.jpg --- De vleugel van de AirBus reed ik naar Engeland.</pre> <h3><code>_posts / 2011-06-05-bridge.md</code></h3> <pre>--- layout: portfolio_entry title: Stone Bridge afbeelding: /img/bridge.jpg --- Een oude stenen brug in Londen.</pre> <h3><code>_posts / 2011-07-09-road.md</code></h3> <pre>--- layout: portfolio_entry title: Road and Curb image: /img/road.jpg --- Fietspaden zijn hier verschrikkelijk dun.</pre> <p>Best simpel, toch? Merk op hoe we een aangepast YAML-veld met frontfeiten maken: <code>beeld</code>. Dit is de URL naar de afbeelding voor dat item. Natuurlijk kunnen we hier de volledige invoer-HTML in dit bestand bouwen, maar wat als we dat willen veranderen? We zouden terug moeten keren en het bij elke invoer moeten veranderen. Op deze manier kunnen we onze <code>portfolio_entry</code> sjabloon om ze weer te geven. Hoe ziet die sjabloon eruit? Het is ook vrij eenvoudig:</p> <h3><code>_layouts / portfolio_entry.html</code></h3> <pre>--- layout: standaard --- <h2>pagina titel</h2> <img src="//accentsconagua.com/img/ page.image " /> inhoud </pre> <p>Als u naar de sjabloongegevenspagina hebt gekeken, weet u dat eventuele aangepaste hoofdzaken die we toevoegen beschikbaar zijn onder <code>pagina</code>; dus hier hebben we toegang <code>page.image</code>. We gebruiken ook <code>pagina titel</code> en <code>inhoud</code> (alles na de laatste regel met drie streepjes).</p> <p>Ik moet hier vermelden dat, terwijl de post <code>titel</code> is verondersteld beschikbaar te zijn op de <code>post</code> object, ik heb het alleen maar kunnen laten werken op de <code>pagina</code> voorwerp. Wat dan ook werkt!</p> <p>Merk ook op dat we deze sjabloon gebruiken met onze <code>standaard</code> lay-out. U kunt dergelijke sjablonen nesten en uw taak nog eenvoudiger maken.</p> <p>Dit geeft ons onze entry (post) pagina's, maar hoe zit het met de hoofdportfoliopagina? Bij het schrijven van onze navigatie in onze standaardlay-out merkte ik op dat we het willen hebben zoals <code>/portefeuille/</code>. Dus maak een map, genaamd <code>portefeuille</code> in de hoofdmap en open een <code>index.html</code> bestand erin.</p> <pre>--- layout: standaard titel: Portfolio --- <section> <h2>Portefeuille</h2> <p>Bekijk mijn afbeeldingen hieronder!</p> </section> <ul> % voor plaatsen op site.posts% <li> <img src="//accentsconagua.com/img/ post.image " /> <h3>post.title</h3> </li> % endfor% </ul></pre> <p>Dit is ons meest gecompliceerde stuk tot nu toe. Vergeet niet dat dit geen sjabloon is: het is een? Normaal? bestand, maar het kan nog steeds vloeibare tags bevatten. We beginnen met instellen <code>lay-out</code> naar <code>standaard</code>, en <code>titel</code> naar? Portfolio.?</p> <p>Merk op dat we in de HTML een Liquid hebben <code>voor in</code> lus. We halen alle berichten op met <code>sites.posts</code>; dan lussen we over die berichten met <code>voor berichten op site.posts</code> / <code>endfor</code>. Als u met WordPress of een ander blogsysteem hebt gewerkt, moet u bekend zijn met het concept van a <code>lus</code>. Dat is alles wat dit is! Binnenin, zoals u kunt zien, kunnen we de standaardeigenschappen krijgen, evenals alle voorzaken die we hebben gedefinieerd (zoals <code>beeld</code>).</p> <p>Nu, als we vluchten <code>jekyll - server</code> om de site opnieuw te genereren en de server te starten, moet localhost: 4000 / portfolio / dit weergeven:</p> <img src="//accentsconagua.com/img/images_26/building-static-sites-with-jekyll_2.png"> <p>En hier is een startpagina:</p> <img src="//accentsconagua.com/img/images_26/building-static-sites-with-jekyll_3.png"> <p>Super goed! U hebt een portfolio gemaakt. Ik weet zeker dat je ook ziet hoe dit werkt voor een blog. Laten we nu kijken naar een aantal configuratie-opties voor Jekyll.</p> <hr> <h2> Stap 4: een configuratiebestand schrijven</h2> <p>Er is een overvloed aan opties voor Jekyll. Het is geweldig dat ze allemaal echt verstandige standaardinstellingen hebben, maar als je ze wilt wijzigen, is het helemaal niet moeilijk.</p> <p>Er zijn twee manieren om opties in te stellen.</p> <ul> <li> Ten eerste, wanneer u het programma op de opdrachtregel uitvoert, kunt u parameters doorgeven. We hebben het al gezien <code>--server</code> parameter, die een server start na het genereren van de site.</li> <li> Een andere manier, en de manier die we hier zullen gebruiken, is in een configuratiebestand, genaamd <code>_config.yml</code>; dit is een YAML-bestand, dus elke regel is <code>een sleutel: waarde</code> paar, net als in de YAML-frontzaak. Jekyll zal naar dit bestand zoeken voordat het een site genereert.</li> </ul> <p>Dus, maak een <code>_config.yml</code> bestand en laten we enkele van de meest voorkomende opties bekijken. </p> <blockquote> <p>Raadpleeg de configuratiedocumentatie voor een volledige lijst met opties.</p> </blockquote> <ul> <li> <strong><code>auto</code></strong>: Toevoegen <code>auto: true</code> naar uw configuratiebestand houdt Jekyll actief, bekijkt uw projectmap op wijzigingen en regenereert de site on the fly.</li> <li> <strong><code>bron</code></strong>: Als uw bronbestanden zich in een andere directory bevinden dan de map waar u Jekyll vanaf draait, moet u die map instellen met de <code>bron</code> eigendom.</li> <li> <strong><code>bestemming</code></strong>: Standaard is de bestemming voor uw gegenereerde site <code>./ _site</code>. Als u iets anders wilt, stelt u dit hier in.</li> <li> <strong><code>permalink</code></strong>: De permalink is het pad naar je berichten. Dat is standaard <code>/year/month/day/title.html</code>. U kunt dat echter aanpassen als u dat wilt. U kunt onder andere de variabelen gebruiken <code>:jaar</code>, <code>:maand</code>, <code>:dag</code>, <code>:titel</code>, en <code>:categorieën</code>. <code>:categorieën</code> komt van de voorkant; alle anderen komen uit de postbestandsnaam. Vervolgens kunt u instellen <code>permalink</code> naar dingen zoals <code>/: Jaar /: maand /: titel /</code> of <code>/:categories/:title.html</code>. Bonustip: als u een <code>permalink</code> property in de post-hoofdzaak, overschrijft deze de standaardinstelling voor de hele site.</li> <li> <strong><code>uitsluiten</code></strong>: Zoals ik hierboven al zei, zal Jekyll geen bestanden genereren in mappen beginnend met een onderstrepingsteken. Maar als u mappen hebt die u wilt negeren, maar dat niet begint met een onderstrepingsteken, kunt u dit doen met <code>uitsluiten</code> in uw configuratiebestand.</li> </ul> <hr> <h2> Stap 5: De site implementeren</h2> <p>Dus laten we zeggen dat je de site hebt gemaakt en deze gratis wilt instellen op het internet. Hoe doe je dat?</p> <p>Er zijn verschillende manieren om dit te bereiken. Natuurlijk, als het een kleine site is die u niet te vaak zult bijwerken, dan kunt u deze eenvoudig naar uw server FTP -en; dit kan uw enige optie zijn als u shared hosting gebruikt.</p> <p>Als u een VPS- of dedicated hosting-instelling hebt, kunt u meer automatisch uitvoeren. Bekijk de implementatiedocumentatie voor een lijst met goede ideeën. Als je niet zeker weet wat je moet doen, probeer dan de aanwijzingen voor het gebruik van de git post-receive hook te volgen; Ik heb dat geprobeerd en het is best gaaf. </p> <hr> <h2> Stap 6: Verder gaan</h2> <p>Dit is slechts het topje van Jekyll. </p> <ul> <li>Er is een plugin-architectuur waarmee u kunt wijzigen hoe uw inhoud wordt gegenereerd.</li> <li> Er is meer dat je kunt doen met Liquid en een aantal Liquid-extensies die Jekyll toevoegt. </li> <li>Er zijn veel sjabloongegevens waarover we niet hebben gesproken. Bekijk het en kijk wat je kunt doen!</li> </ul> <hr> <h2>Conclusie</h2> <p>Nou, dat is uw inleiding tot Jekyll - de eenvoudige, blogs-bewuste, statische site-generator. De volgende keer dat u een brochure-achtige business-card-y, micro-portfolio-site maakt, denkt u dat u Jekyll eens kunt proberen? Laat het me weten in de comments en bedankt voor het lezen!</p>
<div class="rek-block">
<center>
<ins class="adsbygoogle"
style="display:inline-block;width:580px;height:400px"
data-ad-client="ca-pub-3810161443300697"
data-ad-slot="9434875811"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</center>
</div>
<div class="h-alltags">
<a href="articles/code">Code</a>
</div>
</div>
</div>
</div>
</div>
<div class="next_posts clearfix">
<div class="n_post">
<div class="next_posts-h1 left_nh1"><a href="/articles/code/building-the-back-end-of-a-photo-site.html">De back-end van een fotosite bouwen</a></div>
<div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_27_7/building-the-back-end-of-a-photo-site_2.jpg');"></div>
</div>
<div class="n_post">
<div class="next_posts-h1 right_nh1"><a href="/articles/code/building-single-page-web-apps-with-sinatra-part-2.html">Webpagina's met één pagina bouwen met Sinatra deel 2</a></div>
<div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_21/building-single-page-web-apps-with-sinatra-part-2.png');"></div>
</div>
</div>
<footer>
<div class="container">
<div class="footer-langs">
<ul class="site-langs-list">
<li><a href="https://www.accentsconagua.com"><i class="flag flag-DE"></i>Deutsch</a></li>
<li><a href="https://fr.accentsconagua.com"><i class="flag flag-FR"></i>Français</a></li>
<li><a href="https://nl.accentsconagua.com"><i class="flag flag-NL"></i>Nederlands</a></li>
<li><a href="https://no.accentsconagua.com"><i class="flag flag-NO"></i>Norsk</a></li>
<li><a href="https://sv.accentsconagua.com"><i class="flag flag-SE"></i>Svenska</a></li>
<li><a href="https://it.accentsconagua.com"><i class="flag flag-IT"></i>Italiano</a></li>
<li><a href="https://es.accentsconagua.com"><i class="flag flag-ES"></i>Español</a></li>
<li><a href="https://ro.accentsconagua.com"><i class="flag flag-RO"></i>Românesc</a></li>
</ul>
</div>
<div class="h-block"><a href="/">nl.accentsconagua.com</a><div class="h-block-a"></div></div>
<div class="footer-text">
Interessante informatie en nuttige tips over programmeren. Website ontwikkeling, webdesign en webontwikkeling. Photoshop-zelfstudies. Creatie van computerspellen en mobiele applicaties. Word een volledig professionele programmeur.
</div>
</div>
</footer>
<div class="search">
<img class="searchico" src="//accentsconagua.com/img/search.svg" alt="">
</div>
<div class="modal">
<div class="modal-content">
<span class="close-button">×</span>
<input class="searchmain" type="text" id="search-input" placeholder="Zoeken...">
<ul class="searchli" id="results-container"></ul>
</div>
</div>
<link rel="stylesheet" href="css/flags.css">
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script>
<script>
window.addEventListener("load", function(){
window.cookieconsent.initialise({
"palette": {
"popup": {
"background": "#edeff5",
"text": "#838391"
},
"button": {
"background": "#4b81e8"
}
},
"theme": "classic",
"position": "bottom-right"
})});
</script>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script src="js/scripts.min.js"></script>
<script src="js/common.js"></script>
<link rel="stylesheet" href="css/fontawesome-all.min.css">
<script>
var modal = document.querySelector(".modal");
var trigger = document.querySelector(".search");
var closeButton = document.querySelector(".close-button");
function toggleModal() {
modal.classList.toggle("show-modal");
}
function windowOnClick(event) {
if (event.target === modal) {
toggleModal();
}
}
trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);
</script>
<script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script>
<script>
SimpleJekyllSearch({
searchInput: document.getElementById('search-input'),
resultsContainer: document.getElementById('results-container'),
json: '/search.json',
searchResultTemplate: '<li><a href="{url}">{title}</a></li>'
})
</script>
<script src="jquery.unveil2.min.js"></script>
<script>
$('img').unveil();
</script>
</body>
</html>
Share
Accentsconagua