Share
Jekyll è un sistema di generazione di siti statici che consente di acquisire file di testo e convertirli in un blog sofisticato, senza doversi preoccupare dei database, dei problemi di sicurezza, degli aggiornamenti e di altre complicazioni che possono verificarsi con molti CMS e piattaforme di blogging.
Analogamente alla maggior parte dei sistemi di gestione dei siti, è possibile utilizzare temi sui siti di Jekyll. Tuttavia, al momento, Jekyll non usa i temi nel modo in cui potresti essere abituato.
In questo momento i temi di Jekyll sono non i pacchetti autonomi devono essere applicati attraverso un programma di installazione. Quando si scarica un tema di Jekyll, lo si scarica anche tutti i file necessario per eseguire un intero sito Jekyll.
Questo cambierà in una versione futura di Jekyll, ma per ora dovrai sapere come affrontare il fatto che i temi di Jekyll arrivano con un intero sito ad essi collegato.
In questo tutorial vedremo come impostare un tema di Jekyll fin dall'inizio, iniziando con alcuni consigli di installazione di base, approfondendo come familiarizzare con le nuove funzionalità del tema e seguendo i suggerimenti su come configurare un nuovo sito o riutilizzare tematizzando uno esistente.
Cominciamo!
La categoria Jekyll su Envato Market ha una serie di temi che vanno da $ 19 a $ 24. In seguito, utilizzeremo "Writer" e "Astro" (i due più venduti) per dimostrare l'installazione.
Temi Jekyll sul mercato EnvatoJekyll è progettato per essere gestito offline sul tuo computer, incorporato in un sito HTML statico, quindi distribuito. Quando aggiungi il contenuto, il processo di base è creare un file di markdown, aggiungere alcuni argomenti in primo piano, compilare il resto del file con il contenuto, quindi ricostruire il tuo sito.
Una volta creato il tuo sito, puoi distribuirlo in qualsiasi modo tu scelga, tramite FTP o comandi git. Tuttavia, non ci concentreremo sulla distribuzione in questo tutorial, quindi se desideri saperne di più sull'argomento visita la documentazione di Jekyll.
Piuttosto, ci concentreremo sulla parte del processo di configurazione del sito di Jekyll che avviene offline sul tuo computer, che inizia tutto con l'installazione.
Lavorare con Jekyll comporta un po 'di utilizzo da riga di comando, ma se non hai mai lavorato con la riga di comando prima non lasciare che ti scoraggi. Raccomando di scorrere alcune voci nella nostra serie di tutorial The Command Line per Web Design per sentirsi a proprio agio.
Se il tuo computer ha Windows, purtroppo Jekyll non è ufficialmente supportato. Ciò non significa che non puoi farlo funzionare, ma potresti dover saltare qualche ostacolo. Se desideri fare una corsa all'utilizzo di Jekyll su Windows, consulta i dettagli nella documentazione di Jekyll.
Altrimenti, se utilizzi Mac OS X, Linux o Unix dovrai assicurarti di aver installato questi prerequisiti:
Per verificare se hai installato Ruby, esegui il comando rubino -v. Per verificare la presenza di Ruby Gems gemma -v. In entrambi i casi, questi comandi controllano il numero di versione, quindi finché vedi un numero restituito nel terminale sei pronto.
Lavoreremo con Jekyll 3.1.x in modo da non richiedere NodeJS o Python come menzionato nella pagina della documentazione di installazione di Jekyll.
Ora, per installare Jekyll sul tuo computer, esegui il comando: gem install jekyll
Se vedi un messaggio che dice che non hai permessi di scrittura, preface il comando con sudo e inserisci la tua password quando richiesto.
Vedrai quindi alcune linee stampate nel terminale che mostrano il processo di installazione in esecuzione. Quando dice "1 gem installato" hai finito.
Creiamo rapidamente un sito Jekyll in modo da poter vedere come appare nel suo stato predefinito, non a tema e familiarizzare con la sua struttura di file e cartelle. Crea una cartella per ospitare il sito, quindi apri un terminale che punta alla cartella ed esegui: jekyll new .
Nota: se a un certo punto si desidera creare un nuovo sito Jekyll nella sottocartella s, utilizzare invece il comando: jekyll new subfolder_name
Quando la configurazione del sito è completa vedrai un messaggio nel tuo terminale che dice "Nuovo sito jekyll installato in
Ora esegui il comando jekyll serve per far funzionare il tuo sito offline.
Quando vedi il messaggio "Server in esecuzione ... premere ctrl-c per interrompere" nel tuo terminale, puoi accedere all'indirizzo http: // localhost: 4000 in un browser e controllare il sito Jekyll predefinito.
Ora che hai visto quale sia la struttura di file e cartelle di un sito di Jekyll predefinito, così come lo stato non a tema, avrai una migliore comprensione di ciò che stai vedendo all'interno di un tipico download di temi di Jekyll.
Come sapete da ciò di cui abbiamo parlato in questo tutorial finora, i temi di Jekyll sono attualmente disponibili tutti i file necessario per eseguire un intero sito. E come hai visto nell'ultima sezione, una volta che hai tutti quei file che puoi eseguire jekyll serve per abilitare la visualizzazione di quel sito in un browser.
Ciò significa che quando scarichi un nuovo tema di Jekyll puoi semplicemente estrarlo, eseguire jekyll serve e demo il tema su un sito Jekyll completamente funzionale subito. Molti temi verranno anche con contenuti demo già inclusi.
Diamo un'occhiata ad alcuni esempi usando i temi "Writer" e "Astro", (o quelli che preferisci).
Una volta estratto, cerca attraverso la struttura del tema fino a trovare la cartella radice contenente tutti i file di un sito Jekyll. Dovresti essere in grado di riconoscere questa cartella dalla tua installazione di Jekyll predefinita in precedenza. Cerca cose come la _config.yml file, il _includes directory e così via.
Quindi apri un terminale all'interno della cartella ed esegui jekyll serve.
Se tutto va a buon fine, vedrai il messaggio "Indirizzo del server: " con un URL visualizzato verso la fine del terminale. Copia e incolla questo URL in un browser e dovresti vedere una demo del tuo nuovo tema.
In alcuni casi è possibile che venga visualizzato un messaggio di errore quando si tenta di eseguire jekyll serve. Se ciò accade, controlla se il messaggio si sta lamentando di una dipendenza mancante, ad esempio, manca qualcosa dal tema per il funzionamento del tema..
In questo esempio, è possibile vedere nel testo dell'errore rosso che manca la gemma "jekyll-paginate":
Una rapida ricerca su Google restituisce il repository Github per la gemma in questione, fornendo il comando richiesto per installarlo.
Dopo aver eseguito detto comando e aver installato la dipendenza mancante jekyll serve è in grado di funzionare come previsto con il tema.
Se vai all'URL fornito e non vedi il sito, ad esempio, ad esempio:
... controlla il valore di baseurl nel _config.yml file. Questo file, di cui parleremo più avanti, controlla la configurazione generale per l'intero sito.
Il baseurl la variabile viene aggiunta al dominio principale, che quando lavoriamo offline è http: // localhost: 4000.
Nell'esempio precedente vogliamo che il nostro sito venga visualizzato all'indirizzo http: // localhost: 4000. Nel _config.yml file nostro baseurl la variabile è impostata su:
baseurl: "http: // localhost"
Questo può sembrare a prima vista, ma poiché questo valore viene aggiunto al dominio principale, in realtà il sito tenta di caricare su http: // localhost: 4000http: // localhost.
Quindi, abbiamo bisogno di cambiare il valore in una stringa vuota come questa:
baseurl: ""
Il tuo sito verrà quindi caricato come previsto.
Se invece vuoi caricare il tuo sito da una sottodirectory, cambia il baseurl valore al nome della sottodirectory, assicurandosi di iniziare e finire con una barra in avanti:
baseurl: "/ themedemo /"
Uno dei motivi principali per cui è una buona idea iniziare servendo il tema direttamente dalla sua struttura esistente è, (oltre a controllare che funzioni come previsto), ti dà l'opportunità di familiarizzare con le caratteristiche del tema e i flussi di lavoro.
Poiché Jekyll offre molta flessibilità, i suoi temi possono offrire funzionalità molto diverse da una all'altra. Dopo aver servito una demo di un nuovo tema, prenditi un momento per curiosare e vedere che tipo di struttura ha il tema. Cerca cose come se il tema abbia pagine di categoria, immagini in evidenza, pagine di autori e così via. Prendi nota di queste funzionalità in modo da poter cercare la documentazione del tema e imparare a usarle.
Si dovrebbe anche guardare attraverso la struttura di file e cartelle del tema. Le aree principali che vorrete approfondire sono:
Dovrai anche scoprire quali sono le opzioni di configurazione del sito che potresti dover impostare nel sito _config.yml file per utilizzare le funzionalità del tema, come URL dei social media, informazioni sull'autore, collegamenti nav e così via.
Ora hai avuto la possibilità di esaminare il tema e familiarizzare, è ora di usarlo sul tuo sito. Lascia la versione demo che hai già creato invariato in modo da avere per confrontare il tuo sito appena costruito contro.
Crea una nuova cartella sul tuo computer e riestravi tutti i file del tema.
Questa volta, vai nel _posts cartella ed elimina tutti i file lì dentro in modo che i post demo vengano rimossi.
Successivamente, cancella qualsiasi .md (markdown) i file dalla cartella radice in modo che tutte le pagine demo siano sparite.
Se lo desideri, potresti anche voler individuare ed eliminare le immagini utilizzate nei contenuti demo, come le miniature post-funzioni, se prevedi di sostituirle con le tue. Se le immagini dei contenuti demo sono presenti possono variare da tema a tema.
Se il tuo tema ha immagini dimostrative che vuoi eliminare ma non sei sicuro di dove si trovano, controlla la documentazione del tema come dovrebbe dirti. In caso contrario, potrebbe essere necessario passare attraverso il codice nei modelli del tema e scoprirlo da lì.
Quindi, dovresti aprire il _config.yml file dalla cartella principale e impostare le variabili del sito richieste dal tema. Alcune impostazioni saranno generalmente comuni a tutti _config.yml file, come titolo, e-mail, descrizione e pochi altri. Tuttavia alcune impostazioni saranno specifiche per il tema specificato.
Esattamente ciò che devi fare nel file di configurazione del sito dipende dal tema specifico, quindi è una buona idea fare riferimento alla documentazione del tema a questo punto per una guida su ciò che ogni impostazione fa.
Ad esempio, nel tema Writer è possibile impostare un menu di navigazione personalizzato usando nav_list variabile per definire un elenco di voci di menu. Ognuno ha un'etichetta, un permalink e una classe che farà apparire un'icona Font Awesome accanto ad essa.
Al contrario, il tema Astro non usa lo specifco di Writer nav_item variabile, ma ha le sue variabili personalizzate per consentire di aggiungere collegamenti ai vari account di social media, nonché di attivare i commenti di Disqus e così via.
Lavora attraverso le variabili nel tuo tema _config.yml file finché non li hai tutti impostati a tuo piacimento.
Si noti che se si apportano modifiche come questa dopo aver prima servito il nuovo sito utilizzando jekyll serve, dovrai interrompere il processo con CTRL + C e riavvialo per vedere le eventuali modifiche successive.
Alcuni temi ti daranno la possibilità di scegliere tra più layout per la tua home page e impostare i controlli che influenzano la loro visualizzazione. Se questo è il caso, probabilmente troverai che le impostazioni possono essere modificate nella parte anteriore di index.html file dalla cartella principale.
Se sono disponibili più layout, è probabile che scoprirai che puoi sceglierne uno diverso modificando il valore di disposizione impostazione - dovrai fare riferimento alla documentazione del tema per vedere quali valori possono essere utilizzati.
Mentre stai modificando il file, verifica se ci sono altri valori che devono essere modificati per influire sul contenuto che verrà visualizzato sulla home page. Ad esempio, nel tema Writer è possibile impostare un titolo e una descrizione personalizzati da visualizzare solo sulla home page, oltre a un'immagine in primo piano.
Se vuoi aggiungere pagine come "Informazioni" o "Contatti" ora è il momento. Aggiungere un .md (contrassegno) documento nella cartella principale del sito per ogni pagina che si desidera configurare.
Nota: alcuni temi sono impostati per avere tutte le pagine collocate in una sottocartella, (di solito denominate "pagine"), invece della cartella radice, quindi controlla i documenti del tema per vedere se questo è il caso.
Ad esempio, qui ho aggiunto una pagina "Informazioni sul sito" (about.md), una pagina del profilo dell'autore "About Me" (author-kezz.md) e una pagina "Contatti" (contact.md).
Quando aggiungi i file di pagina, devi sapere se ci sono specifici modelli di layout e / o impostazioni di front-end che dovresti usare con loro. Per scoprirlo puoi fare riferimento ai documenti del tema, o semplicemente copiare e incollare i file markdown dall'installazione demo che hai fatto del tema e rielaborarli.
Ad esempio, qui ho copiato su una pagina dell'autore esistente dalla demo di Writer e l'ho convertito nel mio ridenominandolo e quindi modificandone la parte anteriore e il contenuto.
Ora che hai l'essenziale della configurazione della struttura del tuo sito è ora di aggiungere alcuni post. Raccomando di copiare un post dal _posts cartella nel tuo sito demo e incollandola nell'installazione su cui stai lavorando. Quindi puoi rinominarlo con la data e il permalink che vuoi per il tuo nuovo articolo. Riutilizzando un post dimostrativo saranno presenti tutti i contenuti richiesti e sarà necessario aggiornarlo.
Alcuni temi offrono supporto per le pagine di categorie e tag. Tuttavia, non è sempre così, e in quanto tale l'implementazione può variare da un tema all'altro. Controlla i documenti del tuo tema su cosa potresti dover fare per lavorare con categorie e tag sul tuo sito.
Ad esempio, nel tema Writer, per ogni categoria che si desidera utilizzare è necessario impostare manualmente una cartella e un file modello in una sottocartella del sito denominata "categoria".
Potrebbero esserci anche un numero qualsiasi di altre funzionalità extra disponibili per il tema specifico che si sta utilizzando. Assicurati di avere una buona lettura dell'elenco delle caratteristiche del tuo tema e della documentazione per assicurarti di superare tutto ciò che include.
Se hai già un sito Jekyll e vuoi solo applicare un nuovo tema, vorrai seguire lo stesso processo che abbiamo fatto sopra. La differenza verrà dopo aver eliminato il contenuto della demo, quando invece di aggiungere nuove pagine e post puoi semplicemente copiare il contenuto del tuo sito esistente.
Se hai già un sito Jekyll con pagine già presenti, copia e incolla i file di markdown associati dal tuo vecchio sito in quello nuovo. Passare attraverso ogni pagina e aggiornare la materia anteriore per utilizzare i layout del nuovo tema e le variabili richieste.
Quindi copia tutti i tuoi file post dal tuo vecchio _posts cartella nel tuo nuovo. Sarà un po 'noioso, ma molto probabilmente dovrai esaminare ogni file del post uno per uno e aggiornare la sua facciata con le impostazioni richieste dal nuovo tema ed eliminare quelle che erano necessarie per il vecchio tema ma non sono più usati.
Se hai una cartella con immagini e altri media utilizzati in pagine e post sul tuo vecchio sito, copia l'intera cartella nella tua nuova struttura del sito. I tuoi post e le tue pagine dovrebbero comunque fare riferimento alle stesse posizioni dell'immagine, consentendo loro di continuare a comparire nel tuo contenuto.
Quindi quelli sono l'essenziale di come si imposta un tema di Jekyll! I punti più fini del processo variano da tema a tema, ma puoi comunque seguire questi passaggi essenziali in ogni caso. Ricapitoliamo rapidamente quali sono queste fasi.
Accentsconagua
jekyll serve Spero che questo tutorial ti abbia aiutato ad affrontare la creazione di un nuovo sito di Jekyll con un tema personalizzato o di passare a un nuovo tema del sito esistente.
Per una guida approfondita sull'uso di Jekyll, dai un'occhiata a questo corso di Guy Routledge:
Grazie per la lettura e ci rivedremo presto!
