Un CMS in piena regola è raramente necessario. A volte, hai solo bisogno di creare un sito web leggero e statico? ma hai solo un numero sufficiente di pagine per eseguire il processo di copia dei file di modello e rendere le modifiche al markup tra siti un lavoro ingrato. Oggi dimostrerò una soluzione semplice, Jekyll, che renderà la creazione di piccoli siti web un gioco da ragazzi.
Passaggio 0: incontro con Jekyll
Jekyll è un generatore di siti statico semplice, sensibile al blog.
Jekyll è un generatore di siti statico semplice, sensibile al blog. Questo è quello che dice il sito. Ma che cosa significa esattamente? Un generatore di siti statici è un programma che accetta un set di file e genera il tuo sito con loro. Come vedrai, saremo in grado di utilizzare una serie di modelli, creare i file di contenuti separatamente e quindi utilizzare Jekyll per generare il nostro sito. Il? Blog consapevole? parte significa che potremmo usarlo per creare un blog, o qualsiasi sito web che abbia una serie di voci post-like (come un portfolio). Proviamolo!
Passaggio 1: installazione di Jekyll
Fare riferimento qui per ulteriori informazioni su Ruby Gems.
Inizieremo installando Jekyll; è una gemma di Ruby, quindi farlo dovrebbe essere piuttosto semplice.
gem install jekyll # usa 'sudo' se il tuo setup lo richiede
Sì: è così facile. Ci sono altri pezzi che potremmo installare se stiamo pianificando un set-up più complesso, tuttavia, dato che non lo siamo, questo farà il trucco.
Passaggio 2: creazione del nostro primo modello
Ogni file o cartella che non inizia con un trattino basso verrà copiata nel sito generato.
Quindi, impostiamo le cartelle per Jekyll. Crea una cartella, chiamata Esempio-app per questo tutorial; creeremo un piccolo portfolio per un fotografo, per esempio. Questo è un ottimo esempio di dove risplende Jekyll: è un sito piccolo che non verrà aggiornato troppo spesso, ma è abbastanza grande da non voler aprire ogni pagina quando è necessario apportare una modifica al markup.
Dentro Esempio-app, crea una cartella chiamata _layouts. Notare il carattere di sottolineatura all'inizio di questa cartella: qualsiasi cartella o file che inizia con un trattino basso non farà parte del sito generato da Jekyll. Se hanno un nome che Jekyll riconosce (come ad esempio _config.yml o _layouts), i loro contenuti saranno utilizzati nella generazione del sito, ma i file stessi non verranno visualizzati nel sito. Ricorda questo: ogni file o cartella che non inizia con un trattino basso verrà copiata nel sito generato (che, per inciso, si posiziona di default sul _posto sottocartella).
Quindi, creiamo un layout. Inizieremo con un layout generale del sito che include tutti i? Chrome? per il nostro sito. Crea un nuovo file, chiamato default.html dentro il _layouts cartella (il nome non ha importanza) e aggiungere il seguente codice:
% se page.title% page.title | % endif% John Doe, fotografo
John Doe Photograghy
content
Un paio di cose qui da tenere a mente?
Innanzitutto, Jekyll utilizza il sistema di modelli Liquid (per impostazione predefinita). Ciò significa che qualsiasi cosa tu possa fare con Liquid, puoi farlo in un modello in Jekyll. Ad esempio, nel </code> tag, stiamo usando entrambi i tipi di markup Liquid: <em>markup di output</em> e <em>tag markup</em>. Il markup dell'output può produrre testo (se esiste la variabile referenziata), mentre il markup del tag no. Il markup dell'output è delimitato da doppie parentesi graffe, mentre il markup del tag è delimitato da una coppia di parentesi graffe / segno di duo.</p> <p>La prossima cosa da notare sopra è cosa c'è dentro i tag Liquid: cose come <code>titolo della pagina</code> e <code>soddisfare</code>. Queste sono variabili fornite da Jekyll; puoi vedere l'elenco dei dati dei modelli disponibili nei documenti. Possiamo anche creare dati di modelli personalizzati, come esamineremo a breve.</p> <p>Infine, nota il CSS a cui stiamo collegando: crea a <code>css</code> cartella nella radice del tuo progetto e lancia questo pezzettino di stile in a <code>style.css</code> file:</p> <pre>body font: 16px / 1.5 verdana, helvetica-neue, helvetica, arial, san-serif; sfondo: nero; colore: #ececec; padding: 0; margine: 0; ul margine: 0; padding: 0; a color: #ccc; decorazione del testo: nessuna; a: hover color: #ececec; decorazione del testo: sottolineatura; #main width: 960px; margine: 0 auto; background: rgba (255, 255, 255, 0,4); header padding: 0 10px; overflow: nascosto; h1 margine: 0; nav ul, ul.entries list-style-type: none; nav li a float: left; margine: 5px; .content padding: 10px; ul.entries li position: relativo; margine: 20px auto; imbottitura: 20px; sfondo: #ececec; larghezza: 600 px; ul.entries img width: 600px; ul.entries li h3 position: absolute; fondo: -18px; a sinistra: 17 px; font-size: 2em; ul.entries a color: #ececec; ul.entries a: hover color: #fff; footer font-size: 0.65em; allineamento del testo: centro; </pre> <p>Inoltre, crea un <code>img</code> cartella e aggiungere un'immagine, denominata <code>banner.jpg</code>; lo useremo a breve Qualsiasi immagine farà; basta ritagliarlo <code>960px</code> di <code>300px;</code>.</p> <p>Potresti chiederti perché stiamo usando il <code>Se</code> dichiarazione sopra se il <code>titolo della pagina</code> la variabile semplicemente non verrà visualizzata se esiste? Bene, se esiste, voglio includere la barra verticale dopo di essa; un altro modo di scrivere che sarebbe come questo:</p> <pre>page.title % if page.title% | % finisci se %</pre> <p>Quindi, come usiamo questo modello? Bene, abbiamo bisogno di creare una pagina che utilizzerà questo modello. Nella directory principale del nostro progetto, crea un <code>index.html</code> file. Ecco il contenuto:</p> <pre>--- layout: predefinito --- <section role="banner"> <img src="//accentsconagua.com/img/images_26/building-static-sites-with-jekyll.jpg" /> </section> <section> <p> Benvenuti in John Doe Photography! Per favore, controlla il mio Portfolio per vedere il mio lavoro. </p> </section></pre> <p>Ecco il contenuto del nostro <code>index.html</code> file. Si noti cosa c'è nella parte superiore del file: Jekyll chiama questo aspetto anteriore di YAML. Qualsiasi file (che non inizia con un trattino basso) che ha il problema con YAML sarà generato da Jekyll prima di essere inserito nel <code>_posto</code> cartella (se non ha underscore o YFM, allora verrà semplicemente copiata <code>_posto</code>). In questo caso, il frontespizio YAML dice semplicemente a Jekyll quale modello vogliamo che usi.</p> <p>Ora apri un terminale, <code>CD</code> nella directory del progetto ed esegui <code>Jekyll</code>. Dovresti vedere qualcosa di simile a questo:</p> <pre>ATTENZIONE: impossibile leggere la configurazione. Utilizzo di valori predefiniti (e opzioni). Nessun file o directory di questo tipo - /Users/andrew/Desktop/example-app/_config.yml Cantiere: / Users / andrew / Desktop / example-app -> / Users / andrew / Desktop / example-app / _site Sito generato con successo : / Users / andrew / Desktop / example-app -> / Users / andrew / Desktop / example-app / _site</pre> <p>Ignora l'avviso; verremo a breve. Per ora, puoi vedere che il sito è stato costruito in un nuovo creato <code>_posto</code> directory. Se apri il <code>_SITE / index.html</code> file nel tuo browser di scelta, dovresti vedere? un fallimento. Il problema è che i nostri percorsi (URL e foglio di stile) iniziano con una barra in avanti. Questo significa che non possiamo semplicemente vederli come file, dobbiamo vederli su un server. Certo, potresti iniziare con W / MAMP, ma perché prendersi il disturbo? Jekyll ha un server integrato. Quindi, corri <code>jekyll --server</code>, e vai a localhost: 4000 per vedere qualcosa di simile all'immagine qui sotto:</p> <img src="//accentsconagua.com/img/images_26/building-static-sites-with-jekyll.png"> <p>Se l'immagine sopra non è sufficiente, guarda il codice di <code>_SITE / index.html</code>. Vedrai che il modello che abbiamo specificato è stato combinato con il contenuto che abbiamo fornito e-voilà! -Avremmo la nostra pagina.</p> <p>Voglio ricordarti che è il fronte YAML che fa accadere questa magia; se un file non inizia con tre trattini, una o più righe di proprietà e un'altra riga di tre trattini, il file verrà semplicemente copiato sul <code>_posto</code> cartella, nessuna generazione in atto.</p> <hr> <h2> Passaggio 3: creazione di un modello di portafoglio</h2> <p>Ora che siamo a nostro agio con le basi, creiamo un portfolio per il nostro fotografo immaginario. Ricorda come ho notato che Jekyll è? Blog aware ?? Bene, utilizzeremo questa funzionalità di consapevolezza del blog a nostro vantaggio: anziché i post, avremo voci di portfolio.</p> <p>I messaggi appartengono a una cartella, chiamati <code>_posts</code>, quindi crealo ora. Il modello del nome del file per i post deve essere specifico: <code>anno-mese-giorno-title.ext</code>. Post: beh, qualsiasi file nel tuo sito Jekyll, in realtà, può essere Markdown o HTML.</p> <p>Facciamo alcuni post: ricorda, questi saranno effettivamente voci nel nostro portfolio:</p> <h3><code>_posts / 2010-03-04-bikes.md</code></h3> <pre>--- layout: portfolio_entry image: /img/bikes.jpg title: Bikes, Black and White --- Le biciclette sono utilizzate da quasi tutti nel centro di Amsterdam. Questi sono incatenati a un portabici.</pre> <h3><code>_posts / 2010-10-01-wing.md</code></h3> <pre>--- layout: portfolio_entry title: Wing and a Prayer image: /img/wing.jpg --- L'ala del AirBus Ho guidato in Inghilterra.</pre> <h3><code>_posts / 2011-06-05-bridge.md</code></h3> <pre>--- layout: portfolio_entry titolo: Stone Bridge image: /img/bridge.jpg --- Un vecchio ponte di pietra a Londra.</pre> <h3><code>_posts / 2011-07-09-road.md</code></h3> <pre>--- layout: portfolio_entry titolo: Road and Curb image: /img/road.jpg --- I percorsi ciclabili qui sono terribilmente sottili.</pre> <p>Piuttosto semplice, eh? Si noti come stiamo creando un campo di argomenti frontali YAML personalizzato: <code>Immagine</code>. Questo è l'URL dell'immagine per quella voce. Certo, potremmo costruire l'intera voce HTML qui in questo file, ma cosa succede se vogliamo cambiarlo? Dovremmo tornare e cambiarlo in ogni voce. In questo modo, possiamo invece usare il nostro <code>portfolio_entry</code> modello per renderli. Com'è il modello? È anche abbastanza semplice:</p> <h3><code>_layouts / portfolio_entry.html</code></h3> <pre>--- layout: predefinito --- <h2>titolo della pagina</h2> <img src="//accentsconagua.com/img/ page.image " /> content</pre> <p>Se hai guardato la pagina dei dati del modello, saprai che qualsiasi frontespizio personalizzato che aggiungiamo sarà disponibile sotto <code>pagina</code>; quindi, qui, possiamo accedere <code>page.image</code>. Stiamo anche usando <code>titolo della pagina</code> e <code>soddisfare</code> (tutto dopo l'ultima linea dei tre trattini).</p> <p>Dovrei menzionare qui, mentre il post <code>titolo</code> dovrebbe essere disponibile su <code>inviare</code> oggetto, sono stato in grado di farlo funzionare solo su <code>pagina</code> oggetto. Basta che funzioni!</p> <p>Inoltre, nota che abbiamo questo modello usando il nostro <code>predefinito</code> disposizione. Puoi nidificare modelli del genere e rendere il tuo lavoro ancora più semplice.</p> <p>Questo ci dà le nostre pagine di entrata (post), ma per quanto riguarda la pagina principale del portfolio? Quando ho scritto la nostra navigazione nel nostro layout predefinito, ho notato che lo vogliamo come <code>/portafoglio/</code>. Quindi, crea una cartella, chiamata <code>portafoglio</code> nella directory root e aprire un <code>index.html</code> file al suo interno.</p> <pre>--- layout: titolo predefinito: portfolio --- <section> <h2>Portafoglio</h2> <p>Guarda le mie immagini qui sotto!</p> </section> <ul> % per post in site.posts% <li> <img src="//accentsconagua.com/img/ post.image " /> <h3> titolo del post </h3> </li> % endfor% </ul></pre> <p>Questo è il nostro pezzo più complicato ancora. Ricorda, questo non è un modello: è un? Normale? file, ma può ancora contenere tag Liquid. Iniziamo impostando <code>disposizione</code> a <code>predefinito</code>, e <code>titolo</code> a? Portfolio.?</p> <p>Si noti che, nel codice HTML, abbiamo un liquido <code>per-in</code> ciclo continuo. Noi recuperiamo tutti i post con <code>sites.posts</code>; quindi, passiamo sopra quei post con <code>per post in site.posts</code> / <code>EndFor</code>. Se hai lavorato con WordPress o qualsiasi altro sistema di blogging, dovresti avere familiarità con il concetto di a <code>ciclo continuo</code>. È tutto questo! Dentro, come puoi vedere, possiamo ottenere le proprietà standard, così come qualsiasi argomento frontale che abbiamo definito (come <code>Immagine</code>).</p> <p>Ora se corriamo <code>jekyll --server</code> per rigenerare il sito e avviare il server, localhost: 4000 / portfolio / dovrebbe mostrare questo:</p> <img src="//accentsconagua.com/img/images_26/building-static-sites-with-jekyll_2.png"> <p>Ed ecco una pagina di entrata:</p> <img src="//accentsconagua.com/img/images_26/building-static-sites-with-jekyll_3.png"> <p>Grande! Hai creato un portfolio. Sono sicuro che vedi anche come funziona per un blog. Passiamo ora a esaminare alcune opzioni di configurazione per Jekyll.</p> <hr> <h2> Passaggio 4: scrittura di un file di configurazione</h2> <p>C'è una pletora di opzioni per Jekyll. È fantastico che tutti abbiano impostazioni predefinite davvero sensate, ma se vuoi cambiarle, non è affatto difficile.</p> <p>Ci sono due modi per impostare le opzioni.</p> <ul> <li> Innanzitutto, quando esegui il programma sulla riga di comando, puoi passare i parametri. Abbiamo già visto il <code>--server</code> parametro, che avvia un server dopo aver generato il sito.</li> <li> Un modo diverso, e il modo in cui useremo qui, è in un file di configurazione, chiamato <code>_config.yml</code>; questo è un file YAML, quindi ogni linea è <code>una chiave: valore</code> coppia, proprio come nel caso di YAML. Jekyll cercherà questo file prima di generare il sito.</li> </ul> <p>Quindi, crea un <code>_config.yml</code> file, e vediamo alcune delle opzioni più comuni. </p> <blockquote> <p>Per un elenco completo di opzioni, consultare la documentazione di configurazione.</p> </blockquote> <ul> <li> <strong><code>auto</code></strong>: Aggiunta <code>auto: vero</code> nel tuo file di configurazione manterrà in esecuzione Jekyll, osservando la cartella del tuo progetto per le modifiche e rigenerando il sito al volo.</li> <li> <strong><code>fonte</code></strong>: Se i tuoi file sorgente sono in una directory diversa da quella in cui stai usando Jekyll, ti consigliamo di impostare quella directory con <code>fonte</code> proprietà.</li> <li> <strong><code>destinazione</code></strong>: Per impostazione predefinita, la destinazione per il sito generato è <code>./_posto</code>. Se desideri qualcosa di diverso, impostalo qui.</li> <li> <strong><code>permalink</code></strong>: Il permalink è il percorso per i tuoi post. Di default, è così <code>/year/month/day/title.html</code>. Tuttavia, puoi personalizzarlo se vuoi. Tra gli altri, puoi usare le variabili <code>:anno</code>, <code>:mese</code>, <code>:giorno</code>, <code>:titolo</code>, e <code>: categorie</code>. <code>: categorie</code> viene dalla materia anteriore; tutti gli altri provengono dal nome del file post. Quindi, puoi impostare <code>permalink</code> a cose come <code>/: Anno /: mese /: titolo /</code> o <code>/:categories/:title.html</code>. Suggerimento bonus: se ne hai uno <code>permalink</code> proprietà nella parte anteriore del post, sostituirà l'impostazione predefinita del sito.</li> <li> <strong><code>escludere</code></strong>: Come detto sopra, Jekyll non genererà file nelle directory che iniziano con un carattere di sottolineatura. Ma se hai cartelle che vuoi ignorare, ma che non iniziano con un trattino basso, puoi farlo con <code>escludere</code> nel tuo file di configurazione.</li> </ul> <hr> <h2> Passaggio 5: distribuzione del sito</h2> <p>Supponiamo, quindi, di aver creato il sito e di averlo impostato gratuitamente sul world wide web. Come si fa a farlo?</p> <p>Ci sono diversi modi per farlo. Naturalmente, se si tratta di un sito di piccole dimensioni che non si aggiornerà troppo spesso, è sufficiente collegarlo via FTP al server; questa potrebbe essere la tua unica opzione, se utilizzi l'hosting condiviso.</p> <p>Se hai un VPS o una configurazione di hosting dedicata, puoi eseguire più automaticamente. Controlla la documentazione di implementazione per un elenco di buone idee. Se non sei sicuro di cosa fare, prova a seguire le istruzioni per l'uso del gancio git post-ricezione; Ci ho provato, ed è fantastico. </p> <hr> <h2> Passo 6: portarlo oltre</h2> <p>Questa è solo la punta di Jekyll. </p> <ul> <li>C'è un'architettura di plugin che ti consente di modificare il modo in cui il tuo contenuto viene generato.</li> <li> C'è altro che puoi fare con Liquid e alcune estensioni Liquid che Jekyll aggiunge. </li> <li>Ci sono molti dati di modelli di cui non abbiamo parlato. Guardalo e vedi cosa puoi fare!</li> </ul> <hr> <h2>Conclusione</h2> <p>Bene, questa è la tua introduzione a Jekyll - il semplice generatore di siti statico, sensibile al blog. La prossima volta che crei un sito in stile brochure, biglietto da visita e micro-portfolio, pensi di provare Jekyll? Fammi sapere nei commenti e ti ringrazio tanto per la lettura!</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">Codice</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">Costruire il back-end di un sito fotografico</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">Creazione di app Web a singola pagina con Sinatra parte 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="/">it.accentsconagua.com</a><div class="h-block-a"></div></div>
<div class="footer-text">
Informazioni interessanti e consigli utili sulla programmazione. Sviluppo di siti web, web design e sviluppo web. Tutorial di Photoshop. Creazione di giochi per computer e applicazioni mobili. Diventa un programmatore professionista da 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="Ricerca...">
<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