Jekyll per sviluppatori Wordpress

In questo articolo, assumeremo il ruolo di uno sviluppatore web che costruisce un sito web per uno studio legale fittizio. WordPress è una scelta ovvia per un sito web come questo, ma è l'unico strumento che dovremmo considerare? Diamo un'occhiata a un modo completamente diverso di costruire un sito Web, utilizzando Jekyll.

Ulteriori letture su SmashingMag:

• Crea un blog con le pagine di Jekyll e GitHub
• Modellazione dei contenuti con Jekyll
• Generatori di siti statici recensiti: Jekyll, Middleman, Roots, Hugo
• Perché i generatori di siti statici sono la prossima grande cosa
  

Cos'è Jekyll?

Jekyll è un generatore di siti Web statici. Invece di installare un software e un database sul nostro server, un sito Web Jekyll è semplicemente una directory di file sul nostro computer. Quando eseguiamo Jekyll su quella directory, viene generato un sito Web statico, che carichiamo su un provider di hosting.

Perché Jekyll?

Dobbiamo considerare una serie di compromessi quando decidiamo se Jekyll è adatto a un progetto.

Vantaggi di Jekyll

• Meno complessità
  Un sito Web Jekyll è essenzialmente un sito Web statico con un linguaggio di modelli. Ha meno componenti da creare e mantenere. Sul server, abbiamo solo bisogno di un server web in grado di servire i file.
• Velocità
  Quando i visitatori visualizzano le pagine sui siti Jekyll, il server restituisce i file esistenti senza alcuna elaborazione aggiuntiva . Questo è molto più veloce di WordPress, che genera pagine dinamicamente al momento della richiesta. Nota: i plug-in di memorizzazione nella cache di WordPress possono eliminare questo divario di prestazioni.
• Stabilità
  WordPress ha più componenti che lavorano insieme per generare pagine per i visitatori. Se un componente si guasta, i visitatori potrebbero non essere in grado di visualizzare il sito web. Molto meno può andare storto quando un server web serve solo file.
• Sicurezza
  Wordpress fa molto per mitigare i rischi per la sicurezza come attacchi CSRF, XSS o SQL injection, tuttavia fa affidamento sul fatto che tu abbia sempre gli ultimi aggiornamenti. I siti statici eliminano questo problema perché non esiste un'archiviazione dinamica dei dati che un hacker possa sfruttare.
• Controllato alla fonte
  Un sito Web Jekyll è una directory di file, quindi possiamo archiviare l'intero sito Web in un repository Git. Lavorare con un repository ci offre molti vantaggi (sebbene VersionPress sia in fase di sviluppo e consenta questo flusso di lavoro per WordPress).

Svantaggi di Jekyll

• Nessuna interfaccia grafica
  Un cliente può iscriversi a WordPress.com, scegliere un tema e creare un sito Web di base da solo. Jekyll è uno strumento da riga di comando, che travolge la maggior parte degli utenti non tecnici. Esistono GUI di terze parti per Jekyll, tra cui CloudCannon (dichiarazione di non responsabilità: sono il cofondatore), Forestry, Jekyll Admin, Netlify CMS, Prose e Siteleaf. Tuttavia, questi devono essere impostati dallo sviluppatore prima di essere consegnati al cliente.
• Costruisci il tempo
  Nella nostra situazione, questo non è un problema perché il sito Web verrà costruito in meno di un secondo. Tuttavia, la creazione di un sito Web più grande con 10.000-100.000 post potrebbe richiedere alcuni minuti. Questo è frustrante durante lo sviluppo perché dobbiamo aspettare che il sito Web venga creato prima di visualizzarlo in anteprima nel browser.
• Temi
  Jekyll ha alcuni temi disponibili, ma non è niente in confronto alle migliaia di temi disponibili per WordPress.
• Estensibilità
  Se dobbiamo aggiungere funzionalità personalizzate al nostro sito Web WordPress, possiamo scrivere il nostro PHP. Possiamo creare plug-in Ruby personalizzati per Jekyll, tuttavia, questi vengono eseguiti in fase di compilazione anziché in fase di richiesta.
• Supporto
  WordPress ha una vasta comunità di esperti e altre risorse per aiutarti. Jekyll ha risorse simili ma su scala ridotta.

Jekyll è un ottimo strumento per siti Web in gran parte informativi, come questo progetto. Se il progetto è più di un'applicazione, potremmo aggiungere elementi dinamici usando JavaScript, ma a un certo punto avremmo probabilmente bisogno di un back-end come WordPress'.

Implementazione

WordPress e Jekyll adottano approcci diversi alla creazione di un sito Web ma condividono molte funzionalità. Iniziamo a costruire il nostro sito web Jekyll.

Installazione

Un tipico ambiente di sviluppo per WordPress richiede l'installazione di Apache o NGINX, PHP e MySQL. Quindi, installiamo WordPress e configureremo il server web.

Per Jekyll, dobbiamo assicurarci di aver installato Ruby (a volte è più difficile di quanto sembri). Quindi installiamo la gemma Jekyll:

 gem install jekyll

Se sei su macOS assicurati di aver prima installato lo sviluppatore Xcode.

 xcode-select --install

In esecuzione

L'esecuzione di un sito WordPress di solito consiste nell'avvio del database e del server web.

In Jekyll, navighiamo nei file del nostro sito (una directory vuota a questo punto) nel terminale ed eseguiamo:

 jekyll serve

Questo avvia un server Web locale sulla porta 4000 e ricostruisce il sito ogni volta che un file cambia.

Pagine

È ora di creare la nostra prima pagina. Cominciamo con la home page. Le pagine sono per contenuto autonomo senza una data associata. WordPress memorizza il contenuto della pagina nel database.

In Jekyll, le pagine sono file HTML. Inizieremo con l'HTML puro e quindi aggiungeremo le funzionalità di Jekyll quando sono necessarie. Ecco index.html nel suo stato attuale:

 <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="/css/main.css"> </head> <body> <div class="container"> <h1><a href="/">Justice</a></h1> <nav> <ul> <li><a href="/about/">About</a></li> <li><a href="/services/">Services</a></li> <li><a href="/contact/">Contact</a></li> <li><a href="/advice/">Advice</a></li> </ul> </nav> </div> <section class="main"> <div class="container"> <p>Justice Law is professional representation. Practicing for over 50 years, our team have the knowledge and skills to get you results.</p> <blockquote class="testimonial"> <p class="testimonial-message">Justice Law are the best of the best. Being local, they care about people and have strong ties to the community.</p> <p class="testimonial-author"> <img src="/images/peter.jpeg" alt="Photo of Peter Rottenburg"> Peter Rottenburg </p> </blockquote> </div> </section> <footer> <p class="copyright"> &copy; 2016 </p> </footer> </body> </html>

Liquido

In WordPress, possiamo scrivere PHP per fare quasi tutto. Jekyll adotta un approccio diverso. Invece di fornire un linguaggio di programmazione completo, utilizza un linguaggio di modelli chiamato Liquid. (WordPress ha anche linguaggi di creazione di modelli, come Timber.)

Il footer di index.html contiene un avviso di copyright con un anno:

 <p class="copyright"> &copy; 2016 </p>

È improbabile che ci ricordiamo di aggiornarlo ogni anno, quindi usiamo Liquid per produrre l'anno in corso:

 <p class="copyright"> &copy; {{ site.time | date: "%Y" }} </p>

Stiamo costruendo un sito web statico in Jekyll, quindi questa data non cambierà fino a quando non ricostruiremo il sito web. Se volessimo cambiare la data senza dover ricostruire il sito web, potremmo usare JavaScript.

Include

La maggior parte dell'HTML in index.html serve per impostare il layout generale e non cambierà tra le pagine. Questa ripetizione porterà a molta manutenzione, quindi riduciamola.

Le inclusioni sono state una delle prime cose che ho imparato in PHP. Utilizzando include, possiamo inserire il contenuto dell'intestazione e del piè di pagina in file diversi, quindi includere lo stesso contenuto su più pagine.

Jekyll ha esattamente la stessa caratteristica. Include sono archiviati in una cartella denominata _includes . Usiamo Liquid per includerli in index.html :

 {% include header.html %} <p>Justice Law is professional representation. Practicing for over 50 years, our team have the knowledge and skills to get you results.</p> <blockquote class="testimonial"> <p class="testimonial-message">Justice Law are the best of the best. Being local, they care about people and have strong ties to the community.</p> <p class="testimonial-author"> <img src="/images/peter.jpeg" alt="Photo of Peter Rottenburg"> Peter Rottenburg </p> </blockquote> {% include footer.html %}

Layout

Include ridurre alcune delle ripetizioni, ma le abbiamo ancora su ogni pagina. WordPress risolve questo problema con i file modello che separano la struttura di un sito Web dal suo contenuto.

L'equivalente Jekyll dei file modello sono i layout. I layout sono file HTML con un segnaposto per il contenuto. Sono memorizzati nella directory _layouts . Creeremo _layouts/default.html per contenere un layout HTML di base:

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="/css/main.css"> </head> <body> <div class="container"> <h1><a href="/">Justice</a></h1> <nav> <ul> <li><a href="/about/">About</a></li> <li><a href="/services/">Services</a></li> <li><a href="/contact/">Contact</a></li> <li><a href="/advice/">Advice</a></li> </ul> </nav> </div> <section class="main"> <div class="container"> {{ content }} </div> </section> <footer> <p class="copyright"> &copy; {{ site.time | date: "%Y-%m-%d" }} </p> </footer> </body> </html>

Quindi, sostituisci include in index.html specificando il layout. Specifichiamo il layout usando il materiale introduttivo, che è un frammento di YAML che si trova tra due linee a tre trattini nella parte superiore di un file (ne parleremo presto).

 --- layout: default --- <blockquote class="testimonial"> <p class="testimonial-message">Justice Law are the best of the best. Being local, they care about people and have strong ties to the community.</p> <p class="testimonial-author"> <img src="/images/peter.jpeg" alt="Photo of Peter Rottenburg"> Peter Rottenburg </p> </blockquote>

Ora possiamo avere lo stesso layout su tutte le nostre pagine.

Materia anteriore

In WordPress, i campi personalizzati ci consentono di impostare i metadati su un post. Possiamo usarli per impostare tag SEO o per mostrare e nascondere sezioni di una pagina per un particolare post.

Questo concetto è chiamato argomento in primo piano in Jekyll. In precedenza, abbiamo utilizzato la materia prima per impostare il layout per index.html . Ora possiamo impostare le nostre variabili e accedervi usando Liquid. Questo riduce ulteriormente la ripetizione sul nostro sito web.

Aggiungiamo più testimonianze a index.html . Potremmo copiare e incollare l'HTML, ma ancora una volta ciò porta a una maggiore manutenzione. Invece, aggiungiamo le testimonianze in prima pagina e ripetiamo su di esse con Liquid:

 --- layout: default testimonials: - message: We use Justice Law in all our endeavours. They offer an unparalleled service when it comes to running a business. image: "/images/joice.jpeg" name: Joice Carmold - message: Justice Law are the best of the best. Being local, they care about people and have strong ties to the community. image: "/images/peter.jpeg" name: Peter Rottenburg - message: Justice Law were everything we could have hoped for when buying our first home. Highly recommended to all. image: "/images/gibblesto.jpeg" name: D. and G. Gibbleston --- <div class="testimonials"> {% for testimonial in page.testimonials %} <blockquote class="testimonial"> <p class="testimonial-message">{{ testimonial.message }}</p> <p class="testimonial-author"> <img src="{{ testimonial.image }}" alt="Photo of {{ testimonial.name }}"> {{ testimonial.name }} </p> </blockquote> {% endfor %} </div>

Messaggi

WordPress memorizza il contenuto HTML, la data e altri metadati per i post nel database.

In Jekyll, ogni post è un file statico archiviato in una directory _posts . Il nome del file ha la data di pubblicazione e il titolo del post, ad esempio _posts/2016-11-11-real-estate-flipping.md . Il codice sorgente per un post del blog assume questa struttura:

 --- layout: post categories: - Property --- ![House](/images/house.jpeg)

Possiamo anche utilizzare la materia prima per impostare categorie e tag.

Sotto l'argomento in primo piano c'è il corpo del post, scritto in Markdown. Markdown è un'alternativa più semplice all'HTML.

Jekyll ci consente di creare layout che ereditano da altri layout. Potresti aver notato che questo post ha un layout di post . Il layout del post eredita dal layout predefinito e aggiunge una data e un titolo:

 --- layout: default --- <h3>{{ page.title }}</h3> <p>{{ page.date | date: '%B %d, %Y' }}</p> {{ content }}

Creiamo blog.html per scorrere i post e collegarci ad essi:

 --- layout: default --- <ul> {% for post in site.posts %} <li><a href="{{ post.url }}">{{ post.title }}</a></li> {% endfor %} </ul>

Collezioni

In WordPress, i tipi di post personalizzati sono utili per la gestione di gruppi di contenuti. Ad esempio, potresti utilizzare tipi di post personalizzati per testimonianze, prodotti o elenchi di immobili.

Jekyll ha questa funzione e la chiama raccolte.

La pagina about.html mostra i profili dei membri dello staff. Potremmo definire i metadati per lo staff (nome, immagine, numero di telefono, biografia) in prima pagina, ma poi potremmo solo farvi riferimento in quella pagina. In futuro, vogliamo utilizzare gli stessi dati per visualizzare le informazioni sugli autori nei post del blog. Una raccolta ci consente di fare riferimento ai membri del personale in qualsiasi punto del sito Web.

La configurazione del nostro sito Web risiede in _config.yml . Qui, abbiamo impostato una nuova collezione:

 collections: staff_members: output: false

Ora aggiungiamo i membri del nostro staff. Ogni membro dello staff è rappresentato in un file Markdown archiviato in una cartella con il nome della collezione; ad esempio, _staff_members/jane-doe.md .

Aggiungiamo i metadati in prima pagina e il blurb nel corpo:

 --- name: Jane Doe image: "/images/jane.jpeg" phone: "1234567" --- Jane has 19 years of experience in law, and specialises in property and business.

Simile ai post, possiamo scorrere la raccolta in about.html per visualizzare ogni membro dello staff:

 --- layout: default --- <ul> {% for member in site.staff_members %} <li> <div><img src="{{ member.image }}" alt="Staff photo for {{ member.name }}"></div> <p>{{ member.name }} - {{ member.phone }}</p> <p>{{ member.content | markdownify }}</p> </li> {% endfor %} </ul>

Ricerca

WordPress ha una potente ricerca integrata e plug-in di ricerca ancora più potenti.

Jekyll non ha la ricerca integrata, ma ci sono soluzioni:

• ricerca lato client utilizzando una libreria JavaScript come Lunr.js (Jekyll.tips ha un tutorial su come configurarlo);
• soluzioni di terze parti, come Algolia per la ricerca ad alte prestazioni;
• soluzioni drop-in, come Google Custom Search.

Plugin

I plugin sono una parte interessante di WordPress. È facile caricare le funzionalità per fare in modo che WordPress faccia quasi tutto.

Sul nostro sito Web Jekyll, molti popolari plugin di WordPress non sono necessari:

• iThemes Sicurezza
  Il nostro sito Web Jekyll è sicuro come il server Web su cui è in esecuzione.
• Guardia di riserva
  Il nostro sito Web Jekyll vivrà in un repository che ci darà accesso all'intera cronologia delle modifiche.
• Supercache WP
  Il nostro sito Web Jekyll è già statico.

Altri plugin di WordPress hanno equivalenti di terze parti che possiamo inserire nel sito Web:

• I plug-in dei moduli di contatto come Contact Form 7 possono essere sostituiti con Formspree, FormKeep o Wufoo.
• Per un semplice negozio, WP eCommerce può essere sostituito con Snipcart, Gumroad o Stripe.
• Invece dei commenti di WordPress con Akismet, puoi usare Disqus, Commenti di Facebook o IntenseDebate.

Alcuni plugin di WordPress possono essere emulati con il core Jekyll. Ecco una galleria fotografica che utilizza il materiale introduttivo e Liquid:

 --- layout: default images: - image_path: /images/bill.jpg title: Bill - image_path: /images/burt.jpg title: Burt - image_path: /images/gary.jpg title: Gary - image_path: /images/tina.jpg title: Tina - image_path: /images/suzy.jpg title: Suzy --- <ul class="photo-gallery"> {% for image in page.images %} <li><img src="{{ image.image_path }}" alt="{{ image.title }}"/></li> {% endfor %} </ul>

Dobbiamo solo aggiungere il nostro JavaScript e CSS per completarlo.

I plugin Jekyll possono emulare la funzionalità di altri plugin di WordPress. Tieni presente che i plug-in Jekyll vengono eseguiti solo durante la generazione del sito Web: non aggiungono funzionalità in tempo reale:

• Invece di One Click XML Sitemap, usa il plug-in Jekyll Sitemap Generator.
• Jekyll SEO Tag ti offre alcune delle funzionalità di SEO Wizard.
• Invece di WPLobus per un sito web multilingue, usa Jekyll Language Plugin.

Controllo della versione

Uno dei principali vantaggi dell'utilizzo di un generatore di siti statici come Jekyll è che l'intero sito e il contenuto possono vivere in Git. A livello di base, Git ti offre una cronologia di tutte le modifiche sul sito. Per i team, apre tutti i tipi di flussi di lavoro e processi di approvazione.

GitHub ha un fantastico tutorial interattivo per i principianti che imparano Git.

Consegna del cliente

Ciò copre i dadi e i bulloni della creazione del sito Web. Se sei curioso di vedere come si integra un intero sito Web Jekyll, dai un'occhiata al modello Justice. È un modello gratuito con licenza MIT per Jekyll. I frammenti di cui sopra si basano su questo modello.

Il CMS WordPress è integrato nella piattaforma, quindi avremmo bisogno di creare un account per il cliente.

Con il nostro sito Web Jekyll, collegheremmo il nostro repository Git a una delle GUI Jekyll menzionate in precedenza. Una delle cose belle di questo flusso di lavoro è che le modifiche dei client vengono ripristinate nel repository. In qualità di sviluppatori, possiamo continuare a utilizzare i flussi di lavoro locali anche con i non sviluppatori che aggiornano il sito Web.

Alcune GUI Jekyll offrono l'hosting, mentre altre hanno un modo per eseguire l'output su un bucket Amazon S3 o su GitHub Pages.

Sommario

A questo punto, il nostro sito Web Jekyll è attivo e modificabile dal cliente. Se è necessario apportare modifiche al sito Web, è sufficiente eseguire il push nel repository e verrà distribuito automaticamente in tempo reale.

<div class=“testimonial”> {% for testimonial in page.testimonials %} <blockquote class=“testimonial”> <p class=“testimonial-message”>{{ testimonial.message }}</p> <p class =“testimonial-author”> <img src=“{{ testimonial.image }}” alt=“Foto di {{ testimonial.name }}”> {{ testimonial.name }} </p> </blockquote> { % fine per %} </div>

Messaggi

WordPress memorizza il contenuto HTML, la data e altri metadati per i post nel database.

In Jekyll, ogni post è un file statico archiviato in una directory _posts . Il nome del file ha la data di pubblicazione e il titolo del post, ad esempio _posts/2016-11-11-real-estate-flipping.md . Il codice sorgente per un post del blog assume questa struttura:

 --- layout: post categories: - Property --- ![House](/images/house.jpeg)

Possiamo anche utilizzare la materia prima per impostare categorie e tag.

Sotto l'argomento in primo piano c'è il corpo del post, scritto in Markdown. Markdown è un'alternativa più semplice all'HTML.

Jekyll ci consente di creare layout che ereditano da altri layout. Potresti aver notato che questo post ha un layout di post . Il layout del post eredita dal layout predefinito e aggiunge una data e un titolo:

 --- layout: default --- <h3>{{ page.title }}</h3> <p>{{ page.date | date: '%B %d, %Y' }}</p> {{ content }}

Creiamo blog.html per scorrere i post e collegarci ad essi:

 --- layout: default --- <ul> {% for post in site.posts %} <li><a href="{{ post.url }}">{{ post.title }}</a></li> {% endfor %} </ul>

Collezioni

In WordPress, i tipi di post personalizzati sono utili per la gestione di gruppi di contenuti. Ad esempio, potresti utilizzare tipi di post personalizzati per testimonianze, prodotti o elenchi di immobili.

Jekyll ha questa funzione e la chiama raccolte.

La pagina about.html mostra i profili dei membri dello staff. Potremmo definire i metadati per lo staff (nome, immagine, numero di telefono, biografia) in prima pagina, ma poi potremmo solo farvi riferimento in quella pagina. In futuro, vogliamo utilizzare gli stessi dati per visualizzare le informazioni sugli autori nei post del blog. Una raccolta ci consente di fare riferimento ai membri del personale in qualsiasi punto del sito Web.

La configurazione del nostro sito Web risiede in _config.yml . Qui, abbiamo impostato una nuova collezione:

 collections: staff_members: output: false

Ora aggiungiamo i membri del nostro staff. Ogni membro dello staff è rappresentato in un file Markdown archiviato in una cartella con il nome della collezione; ad esempio, _staff_members/jane-doe.md .

Aggiungiamo i metadati in prima pagina e il blurb nel corpo:

 --- name: Jane Doe image: "/images/jane.jpeg" phone: "1234567" --- Jane has 19 years of experience in law, and specialises in property and business.

Simile ai post, possiamo scorrere la raccolta in about.html per visualizzare ogni membro dello staff:

 --- layout: default --- <ul> {% for member in site.staff_members %} <li> <div><img src="{{ member.image }}" alt="Staff photo for {{ member.name }}"></div> <p>{{ member.name }} - {{ member.phone }}</p> <p>{{ member.content | markdownify }}</p> </li> {% endfor %} </ul>

Ricerca

WordPress ha una potente ricerca integrata e plug-in di ricerca ancora più potenti.

Jekyll non ha la ricerca integrata, ma ci sono soluzioni:

• ricerca lato client utilizzando una libreria JavaScript come Lunr.js (Jekyll.tips ha un tutorial su come configurarlo);
• soluzioni di terze parti, come Algolia per la ricerca ad alte prestazioni;
• soluzioni drop-in, come Google Custom Search.

Plugin

I plugin sono una parte interessante di WordPress. È facile caricare le funzionalità per fare in modo che WordPress faccia quasi tutto.

Sul nostro sito Web Jekyll, molti popolari plugin di WordPress non sono necessari:

• iThemes Sicurezza
  Il nostro sito Web Jekyll è sicuro come il server Web su cui è in esecuzione.
• Guardia di riserva
  Il nostro sito Web Jekyll vivrà in un repository che ci darà accesso all'intera cronologia delle modifiche.
• Supercache WP
  Il nostro sito Web Jekyll è già statico.

Altri plugin di WordPress hanno equivalenti di terze parti che possiamo inserire nel sito Web:

• I plug-in dei moduli di contatto come Contact Form 7 possono essere sostituiti con Formspree, FormKeep o Wufoo.
• Per un semplice negozio, WP eCommerce può essere sostituito con Snipcart, Gumroad o Stripe.
• Invece dei commenti di WordPress con Akismet, puoi usare Disqus, Commenti di Facebook o IntenseDebate.

Alcuni plugin di WordPress possono essere emulati con il core Jekyll. Ecco una galleria fotografica che utilizza il materiale introduttivo e Liquid:

 --- layout: default images: - image_path: /images/bill.jpg title: Bill - image_path: /images/burt.jpg title: Burt - image_path: /images/gary.jpg title: Gary - image_path: /images/tina.jpg title: Tina - image_path: /images/suzy.jpg title: Suzy --- <ul class="photo-gallery"> {% for image in page.images %} <li><img src="{{ image.image_path }}" alt="{{ image.title }}"/></li> {% endfor %} </ul>

Dobbiamo solo aggiungere il nostro JavaScript e CSS per completarlo.

I plugin Jekyll possono emulare la funzionalità di altri plugin di WordPress. Tieni presente che i plug-in Jekyll vengono eseguiti solo durante la generazione del sito Web: non aggiungono funzionalità in tempo reale:

• Invece di One Click XML Sitemap, usa il plug-in Jekyll Sitemap Generator.
• Jekyll SEO Tag ti offre alcune delle funzionalità di SEO Wizard.
• Invece di WPLobus per un sito web multilingue, usa Jekyll Language Plugin.

Controllo della versione

Uno dei principali vantaggi dell'utilizzo di un generatore di siti statici come Jekyll è che l'intero sito e il contenuto possono vivere in Git. A livello di base, Git ti offre una cronologia di tutte le modifiche sul sito. Per i team, apre tutti i tipi di flussi di lavoro e processi di approvazione.

GitHub ha un fantastico tutorial interattivo per i principianti che imparano Git.

Consegna del cliente

Ciò copre i dadi e i bulloni della creazione del sito Web. Se sei curioso di vedere come si integra un intero sito Web Jekyll, dai un'occhiata al modello Justice. È un modello gratuito con licenza MIT per Jekyll. I frammenti di cui sopra si basano su questo modello.

Il CMS WordPress è integrato nella piattaforma, quindi avremmo bisogno di creare un account per il cliente.

Con il nostro sito Web Jekyll, collegheremmo il nostro repository Git a una delle GUI Jekyll menzionate in precedenza. Una delle cose belle di questo flusso di lavoro è che le modifiche dei client vengono ripristinate nel repository. In qualità di sviluppatori, possiamo continuare a utilizzare i flussi di lavoro locali anche con i non sviluppatori che aggiornano il sito Web.

Alcune GUI Jekyll offrono l'hosting, mentre altre hanno un modo per eseguire l'output su un bucket Amazon S3 o su GitHub Pages.

Sommario

A questo punto, il nostro sito Web Jekyll è attivo e modificabile dal cliente. Se è necessario apportare modifiche al sito Web, è sufficiente eseguire il push nel repository e verrà distribuito automaticamente in tempo reale.

Il tuo primo sito web Jekyll

Ora è il tuo turno. Sono disponibili molte risorse per aiutarti a costruire il tuo primo sito Web Jekyll:

• Il sito Web ufficiale di Jekyll è un ottimo punto di partenza con una documentazione approfondita su tutte le funzionalità di Jekyll.
• Jekyll.tips ha una serie di tutorial video che coprono gli argomenti principali di Jekyll.
• Dai un'occhiata ai modelli Jekyll su GitHub per vedere come sono messi insieme: Frisco per i siti web di marketing, Scholar per la documentazione e Urban per le agenzie digitali.

Se stai migrando, Jekyll ha strumenti per importare post dai siti Web WordPress e WordPress.com. Dopo l'importazione, dovrai migrare manualmente o creare layout, pagine, CSS, JavaScript e altre risorse per il sito web.

Avvolgendo

La bellezza di Jekyll sta nella sua semplicità. Sebbene WordPress possa eguagliare molte delle funzionalità di Jekyll, spesso viene a scapito della complessità tramite plug-in o infrastrutture extra.

In definitiva, si tratta di trovare lo strumento che funziona meglio per te. Ho scoperto che Jekyll è un modo rapido ed efficiente per creare siti Web. Ti incoraggio a provarlo e pubblicare la tua esperienza nei commenti.