Un CMS complet deranjat este rareori necesar. Uneori, trebuie doar să creați un site web ușor și static? dar aveți doar suficiente pagini pentru a face procesul de copiere a fișierelor șablon și a face schimbări între marcajul site-ului o corvoadă. Astăzi, voi demonstra o soluție simplă - Jekyll - care va face ca crearea site-urilor mici să fie o briză.
Pasul 0: Întâlnire cu Jekyll
Jekyll este un generator de site-uri simple, blog-constient, static.
Jekyll este un generator de site-uri simple, blog-constient, static. Asta spune site-ul. Dar, ce anume înseamnă asta? Un generator static de site-uri este un program care ia un set de fișiere și generează site-ul cu ei. După cum veți vedea, vom putea utiliza un set de șabloane, vom crea fișiere de conținut separat și apoi vom folosi Jekyll pentru a genera site-ul nostru. Blogul "conștient"? parte înseamnă că am putea folosi acest lucru pentru a crea un blog sau orice site web care are o serie de intrări post-cum ar fi un portofoliu. Hai sa incercam!
Pasul 1: Instalarea lui Jekyll
Consultați aici pentru mai multe informații despre Ruby Gems.
Vom începe prin instalarea lui Jekyll; este o bijuterie Ruby, așa că ar trebui să fie destul de simplă.
gem install jekyll # utilizați "sudo" dacă configurarea dvs. o cere
Da: este atât de ușor. Există încă câteva piese pe care le-am putea instala dacă intenționăm să facem o configurație mai complexă, totuși, din moment ce nu suntem, acest lucru va face truc.
Pasul 2: Crearea primului nostru model
Fiecare fișier sau folder care nu începe cu o subliniere va fi copiat pe site-ul generat.
Apoi, să pregătim dosarele pentru Jekyll. Creați un dosar, numit exemplu aplicație pentru acest tutorial; vom crea un site de portofoliu mic, de exemplu, un fotograf. Acesta este un exemplu excelent de unde Jekyll strălucește: este un site mic care nu va fi actualizat prea frecvent, dar este suficient de mare încât să nu deschideți fiecare pagină când trebuie să faceți o modificare a marcajului.
Interior exemplu aplicație, creați un dosar numit _layouts. Observați sublinierea de la începutul acestui dosar: orice folder sau fișier care începe cu un underscore nu va face parte din site-ul pe care Jekyll îl generează. Dacă au un nume pe care Jekyll îl recunoaște (cum ar fi _config.yml sau _layouts), conținutul acestora va fi utilizat în generarea site-ului, dar fișierele în sine nu vor apărea pe site. Rețineți acest lucru: orice fișier sau dosar care nu începe cu un subliniere va fi copiat pe site-ul generat (care, de altfel, implicit la _site sub-folder).
Deci, să creăm un aspect. Vom începe cu un aspect general al site-ului care include toate funcțiile? Crom? pentru site-ul nostru. Creați un fișier nou, numit default.html în interiorul _layouts (numele nu contează) și adăugați următorul cod:
% dacă pagina.title% page.title | % endif% John Doe, Fotograf
John Doe Fotogragie
content
Câteva lucruri pe care trebuie să le ții în minte?
În primul rând, Jekyll utilizează sistemul de șabloane lichide (implicit). Asta înseamnă că orice puteți face cu Liquid, puteți face într-un șablon în Jekyll. De exemplu, în </code> tag, folosim ambele tipuri de marcare lichidă: <em>marcajul de ieșire</em> și <em>marcaj tag</em>. Marcajul de ieșire poate emite text (dacă variabila menționată există), în timp ce marcajul tag-urilor nu. Marcajul de ieșire este delimitat de bretele duble, în timp ce marcajul de etichetare este delimitat de un duo.</p> <p>Următorul lucru pe care trebuie să-l observați mai sus este ceea ce se află în interiorul etichetelor Liquid: lucruri de genul <code>titlul paginii</code> și <code>conţinut</code>. Acestea sunt variabilele oferite de Jekyll; puteți vedea lista de date șablon disponibile în docs. De asemenea, putem crea date șablon personalizate, așa cum vom examina în scurt timp.</p> <p>În cele din urmă, observați CSS la care suntem conectați: creați un <code>css</code> folder în rădăcina proiectului dvs. și aruncați acest pic de stil într-un <code>style.css</code> fişier:</p> <pre>corp font: 16px / 1.5 verdana, helvetica-neue, helvetica, arial, san-serif; fundal: negru; culoare: #ececec; umplutura: 0; marja: 0; ul margine: 0; umplutura: 0; a culoare: #ccc; text-decoration: nici unul; a: hover culoare: #ececec; text-decorare: subliniere; #main width: 960px; marja: 0 auto; fundal: rgba (255, 255, 255, 0,4); header padding: 0 10px; overflow: ascuns; h1 margine: 0; nav ul, ul.entries list-style-type: none; nav li a float: left; margine: 5px; .content padding: 10px; ul.entries li poziție: relativă; margine: 20 pixeli automat; padding: 20px; fundal: #ececec; lățime: 600px; ul.entries img lățime: 600px; ul.entries li h3 poziție: absolută; fund: -18px; stânga: 17px; font-size: 2m; ul.entries a culoare: #ececec; ul.entries a: hover culoare: #fff; footer font-size: 0.65; text-align: centru; </pre> <p>De asemenea, creați un <code>img</code> și adăugați o imagine numită <code>banner.jpg</code>; o vom folosi în scurt timp. Orice imagine va face; tocmai l-ai recoltat <code>960 x</code> de <code>300px;</code>.</p> <p>S-ar putea să te întrebi de ce folosim <code>dacă</code> declarația de mai sus dacă <code>titlul paginii</code> variabila nu se va afișa dacă există? Ei bine, dacă există, vreau să includ bara verticală după ea; un alt mod de a scrie care ar fi așa:</p> <pre>page.title % dacă pagina.titul% | % endif%</pre> <p>Deci, cum folosim acest șablon? Trebuie să creați o pagină care să utilizeze acest șablon. În directorul rădăcină al proiectului nostru, creați un <code>index.html</code> fişier. Iată conținutul:</p> <pre>--- aspect: implicit --- <section role="banner"> <img src="//accentsconagua.com/img/images_26/building-static-sites-with-jekyll.jpg" /> </section> <section> <p> Bine ați venit la fotografierea lui John Doe! Vă rog, verificați portofoliul meu pentru a-mi vedea munca. </p> </section></pre> <p>Iată conținutul nostru <code>index.html</code> fişier. Observați ce este în partea de sus a fișierului: Jekyll numește această chestiune frontală YAML. Orice fișier (care nu pornește de la o subliniere) care are aspectul frontal YAML va fi generat de Jekyll înainte de a fi pus în <code>_site</code> (dacă nu are nici o subliniere sau YFM, atunci va fi doar copiat <code>_site</code>). În acest caz, chestiunea frontală YAML îi spune lui Jekyll ce șablon vrem să folosească.</p> <p>Acum, deschideți un terminal, <code>CD</code> în directorul de proiect și executați <code>Jekyll</code>. Ar trebui să vedeți ceva de genul:</p> <pre>AVERTISMENT: Configurația nu a putut fi citită. Utilizarea valorilor implicite (și a opțiunilor). Nu există un astfel de fișier sau director - /Users/andrew/Desktop/example-app/_config.yml Site-ul de construcție: / Users / andrew / Desktop / example-app -> / Users / andrew / Desktop / example-app / : / Utilizatori / andrew / Desktop / exemplu-app -> / Users / andrew / Desktop / exemplu-app / _site</pre> <p>Ignorați avertismentul; vom ajunge la asta în curând. Deocamdată, puteți observa că site-ul a fost construit într-un spațiu proaspăt creat <code>_site</code> director. Dacă deschideți <code>_site / index.html</code> fișier în browser-ul dvs. de alegere, ar trebui să vedeți? un eșec. Problema este că căile noastre (urls și foaie de stil) încep cu un slash înainte. Aceasta înseamnă că nu le putem vedea doar ca fișiere, trebuie să le vedem pe un server. Sigur, ai putea să începi W / MAMP, dar de ce să faci necazurile? Jekyll are un server construit. Deci, fugi <code>jekyll - server</code>, și du-te la localhost: 4000 pentru a vedea ceva de genul imagine de mai jos:</p> <img src="//accentsconagua.com/img/images_26/building-static-sites-with-jekyll.png"> <p>Dacă imaginea de mai sus nu este suficientă, examinați codul <code>_site / index.html</code>. Veți vedea că șablonul pe care l-am specificat a fost amestecat cu conținutul pe care l-am furnizat și-voila! - avem pagina noastră.</p> <p>Vreau să vă reamintesc că este chestiunea frontală YAML care face ca această magie să se întâmple; dacă un fișier nu pornește de la trei liniuțe, una sau mai multe linii de proprietăți și o altă linie de trei liniuțe, fișierul va fi doar copiat în <code>_site</code> dosar, fără generație.</p> <hr> <h2> Pasul 3: Crearea unui șablon de portofoliu</h2> <p>Acum, când ne confruntăm cu elementele de bază, să creăm un portofoliu pentru fotograful nostru fictiv. Amintiți-vă cum am observat că Jekyll este? Ei bine, vom folosi această funcție de conștientizare a blogurilor în avantajul nostru: în loc de postări, vom avea înregistrări de portofoliu.</p> <p>Posturile aparțin unui dosar numit <code>_posts</code>, așa că creați asta acum. Modelul de fișier pentru posturi trebuie să fie specific și: <code>an-luna-zi-title.ext</code>. Postări - bine, orice fișier din site-ul dvs. Jekyll, într-adevăr - poate fi Markdown sau HTML.</p> <p>Deci, să facem câteva postări: amintiți-vă, acestea vor fi de fapt intrări în portofoliul nostru:</p> <h3><code>_posts / 2010-03-04-bikes.md</code></h3> <pre>--- : Bikes, Black & White --- Bicicletele sunt folosite de aproape toți în centrul orașului Amsterdam. Acestea sunt înlănțuite într-un suport pentru biciclete.</pre> <h3><code>_posts / 2010-10-01-wing.md</code></h3> <pre>--- layout: titlu portofoliu: Aripă și o imagine de rugăciune: /img/wing.jpg --- Aripă a AirBus am mers în Anglia.</pre> <h3><code>_posts / 2011-06-05-bridge.md</code></h3> <pre>--- layout: titlul portofoliului: Podul de piatră imagine: /img/bridge.jpg --- Un pod de piatră vechi din Londra.</pre> <h3><code>_posts / 2011-07-09-road.md</code></h3> <pre>--- layout: titlu portofoliu: Imagine rutiera si curb: /img/road.jpg --- Lanele de biciclete aici sunt extrem de subtiri.</pre> <p>Destul de simplu, nu? Observați cum creăm un câmp personalizat YAML personalizat: <code>imagine</code>. Aceasta este adresa URL a imaginii pentru acea intrare. Sigur, am putea construi întreaga intrare HTML aici în acest fișier, dar ce dacă vrem să schimbăm asta? Va trebui să ne întoarcem și să o schimbăm în fiecare intrare. În acest fel, putem folosi în schimb <code>portfolio_entry</code> șablon pentru a le face. Cum arăta șablonul? Este destul de simplu:</p> <h3><code>_layouts / portfolio_entry.html</code></h3> <pre>--- aspect: implicit --- <h2>titlul paginii</h2> <img src="//accentsconagua.com/img/ page.image " /> content</pre> <p>Dacă ați uitat pagina de șabloane, veți ști că orice element frontal personalizat pe care îl adăugăm va fi disponibil sub <code>pagină</code>; deci, aici, putem accesa <code>page.image</code>. De asemenea, folosim <code>titlul paginii</code> și <code>conţinut</code> (totul după ultima linie cu trei linii).</p> <p>Ar trebui să menționez aici că, în timp ce postul <code>titlu</code> ar trebui să fie disponibil pe <code>post</code> obiect, am reușit doar să-l fac să lucreze la <code>pagină</code> obiect. Orice merge!</p> <p>De asemenea, observați că avem acest șablon folosind site-ul nostru <code>Mod implicit</code> aspect. Puteți crea șabloane de acest gen și puteți face munca mai ușoară.</p> <p>Acest lucru ne oferă paginile noastre de intrare (postare), dar cum rămâne cu pagina principală a portofoliului? Când scriam navigația în aspectul nostru implicit, am remarcat că vrem ca asta <code>/ Portofoliu /</code>. Deci, creați un dosar, numit <code>portofoliul</code> în directorul rădăcină și deschideți un <code>index.html</code> fișier în el.</p> <pre>--- layout: titlu implicit: Portofoliu --- <section> <h2>Portofoliu</h2> <p>Check out imaginile mele de mai jos!</p> </section> <ul> % pentru post în site.posts% <li> <img src="//accentsconagua.com/img/ post.image " /> <h3>post.title</h3> </li> % endfor% </ul></pre> <p>Aceasta este piesa cea mai complicată. Amintiți-vă, acest lucru nu este un șablon: este un "normal"? fișier, dar poate include în continuare etichete lichide. Începem prin stabilire <code>schemă</code> la <code>Mod implicit</code>, și <code>titlu</code> la portofoliu.?</p> <p>Observați că, în HTML, avem un lichid <code>pentru-in</code> buclă. Recuperăm toate postările cu <code>sites.posts</code>; atunci, ne bate peste aceste posturi cu <code>pentru post în siteposts</code> / <code>endfor</code>. Dacă ați lucrat cu WordPress sau cu orice alt sistem de bloguri, ar trebui să fiți familiarizați cu conceptul de a <code>buclă</code>. Asta e tot! În interior, după cum puteți vedea, putem obține proprietățile standard, precum și orice aspect frontal pe care l-am definit (cum ar fi <code>imagine</code>).</p> <p>Acum, dacă fugim <code>jekyll - server</code> pentru a re-genera site-ul și a porni serverul, localhost: 4000 / portfolio / ar trebui să afișeze acest lucru:</p> <img src="//accentsconagua.com/img/images_26/building-static-sites-with-jekyll_2.png"> <p>Iată o pagină de intrare:</p> <img src="//accentsconagua.com/img/images_26/building-static-sites-with-jekyll_3.png"> <p>Grozav! Ați creat un portofoliu. Sunt sigur că vedeți și cum funcționează acest lucru pentru un blog. Să mergem mai departe să vedem câteva opțiuni de configurare pentru Jekyll.</p> <hr> <h2> Pasul 4: Scrierea unui fișier de configurare</h2> <p>Există o mulțime de opțiuni pentru Jekyll. Este minunat că toți au implicații cu adevărat sensibile, dar dacă vreți să le schimbați, nu este deloc greu.</p> <p>Există două moduri de a seta opțiunile.</p> <ul> <li> Mai întâi, când executați programul pe linia de comandă, puteți trece parametrii. Am văzut-o deja <code>--Server</code> parametru, care pornește un server după generarea site-ului.</li> <li> O modalitate diferită și modul în care o vom folosi aici este într-un fișier de configurare, numit <code>_config.yml</code>; acesta este un fișier YAML, deci fiecare linie este <code>o cheie: valoare</code> pereche, la fel ca în materia frontală YAML. Jekyll va căuta acest fișier înainte de a genera site-ul.</li> </ul> <p>Deci, fă un <code>_config.yml</code> fișier și să examinăm unele dintre cele mai comune opțiuni. </p> <blockquote> <p>Pentru o listă completă de opțiuni, consultați documentația de configurare.</p> </blockquote> <ul> <li> <strong><code>auto</code></strong>: Adăugarea <code>auto: adevărat</code> la fișierul dvs. de configurare îl va menține pe Jekyll în funcțiune, vă va urmări dosarul proiectului pentru modificări și regenerarea site-ului în zbor.</li> <li> <strong><code>sursă</code></strong>: Dacă fișierele sursă sunt într-un director diferit de cel pe care îl executați Jekyll, veți dori să setați acel director cu <code>sursă</code> proprietate.</li> <li> <strong><code>destinaţie</code></strong>: În mod implicit, destinația pentru site-ul dvs. generat este <code>./ _site</code>. Dacă doriți ceva diferit, setați-l aici.</li> <li> <strong><code>permalink</code></strong>: Permalink este calea catre postarile tale. În mod implicit, asta e <code>/year/month/day/title.html</code>. Cu toate acestea, puteți personaliza dacă doriți. Printre altele, puteți utiliza variabilele <code>:an</code>, <code>:lună</code>, <code>:zi</code>, <code>:titlu</code>, și <code>: categorii</code>. <code>: categorii</code> vine din chestiunea din față; toate celelalte provin din numele fișierului post. Apoi, puteți seta <code>permalink</code> la lucruri de genul <code>/: An / lună /: titlu /</code> sau <code>/:categories/:title.html</code>. Sfat pentru bonusuri: dacă aveți a <code>permalink</code> proprietate în materie post frontală, va suprascrie implicit la nivel de site-ul.</li> <li> <strong><code>exclude</code></strong>: Asa cum am spus mai sus, Jekyll nu va genera fisiere in directoare incepand cu un subliniere. Dar, dacă aveți dosare pe care vreți să le ignorați, dar care nu pornesc de la o subliniere, o puteți face cu <code>exclude</code> în fișierul de configurare.</li> </ul> <hr> <h2> Pasul 5: Implementarea site-ului</h2> <p>Deci, să presupunem că ați creat site-ul și doriți să-l setați gratuit pe Internet. Cum faci asta?</p> <p>Există mai multe modalități de a realiza acest lucru. Desigur, dacă este un site mic pe care nu îl veți actualiza prea des, atunci pur și simplu FTP până la serverul dvs.; aceasta ar putea fi singura dvs. opțiune dacă utilizați găzduire partajată.</p> <p>Dacă aveți o configurație VPS sau dedicată hosting, puteți rula mai automat. Consultați documentația de implementare pentru o listă de idei bune. Dacă nu sunteți sigur ce să faceți, încercați să urmați instrucțiunile de folosire a cârligului post-receive Git; Am încercat asta și e destul de răcoros. </p> <hr> <h2> Pasul 6: Luați-o mai departe</h2> <p>Acesta este doar vârful lui Jekyll. </p> <ul> <li>Există o arhitectură a pluginurilor care vă permite să modificați modul în care este generat conținutul.</li> <li> Mai puteți face ceva cu Liquid și cu unele extinderi lichide pe care Jekyll le adaugă. </li> <li>Există multe date despre șabloane despre care nu am vorbit. Verificați-l și vedeți ce puteți face!</li> </ul> <hr> <h2>Concluzie</h2> <p>Ei bine, asta-i introducerea ta la Jekyll - simplul blog generator de site-uri statice. Data viitoare când construiești un broșură-stil, carte de afaceri-y, site-ul micro-portofoliu, crezi că-l vei da lui Jekyll? Lasă-mă să știu în comentariile și vă mulțumesc atât de mult pentru lectură!</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">Cod</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">Construirea back-end-ului unui site foto</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">Construirea de aplicații Web cu singură pagină cu Sinatra Partea 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="/">ro.accentsconagua.com</a><div class="h-block-a"></div></div>
<div class="footer-text">
Informații interesante și sfaturi utile privind programarea. Dezvoltarea de site-uri, web design si dezvoltare web. Tutoriale Photoshop. Crearea de jocuri pe calculator și aplicații mobile. Deveniți un programator profesionist de la zero.
</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="Căutare...">
<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