Panoramica dei più diffusi generatori di siti statici

Tutti i generatori di pagine statiche hanno un compito unico e apparentemente semplice: produrre un file HTML statico e tutte le sue risorse.

Ci sono molti ovvi vantaggi nel servire un file HTML statico, come una memorizzazione nella cache più semplice, tempi di caricamento più rapidi e un ambiente più sicuro in generale. Ogni generatore di pagine statiche produce l'output HTML in modo diverso.

Tuttavia, lo scopo di questo post non è quello di approfondire e discutere le complessità del loro meccanismo, ma di confrontare il set di funzionalità offerto da ciascun framework ed evidenziare gli aspetti e le caratteristiche uniche di ogni framework.

Panoramica dei più diffusi framework di pagine statiche

In questo post, daremo un'occhiata più da vicino ai seguenti framework di pagine statiche: Jekyll , Middleman , Hugo e Hexo . Questi non sono affatto gli unici generatori là fuori, ma sono quelli più comunemente usati, supportati da grandi comunità e molte risorse utili.

Diamo un'occhiata più da vicino a ciascuno di essi e confrontiamo le loro caratteristiche di base:

• Jekyll
  • scritto in rubino,
  • supporta il motore del modello Liquid pronto all'uso;
• Intermediario
  • scritto in rubino,
  • supporta immediatamente i motori di modelli ERB e Haml;
• Ugo
  • scritto in Vai,
  • supporta Go template engine pronto all'uso;
• eso
  • scritto in JavaScript,
  • supporta EJS e Pug fuori dagli schemi.

Nota: vale la pena sottolineare che ciascuno di questi generatori di pagine statiche può essere personalizzato ed esteso utilizzando plug-in ed estensioni, consentendoti di coprire la maggior parte o tutte le tue esigenze.

Configurazione di generatori di siti statici

La documentazione per ciascuno di questi framework è completa e a dir poco eccellente e puoi prenderla qui:

documentazione Jekyll

Documentazione intermediaria

documentazione di Hugo

Documentazione esadecimale

Se segui semplicemente le guide di installazione, dovresti avere l'ambiente di sviluppo pronto in pochi minuti. Una volta installato, puoi avviare un nuovo progetto eseguendo i comandi dal terminale.

Ad esempio, questo è il modo in cui inizi un nuovo progetto in diversi framework:

Jekyll

jekyll new my_website

Intermediario

middleman init my_website

Ugo

hugo new my_website

eso

hexo init my_website

Configurazione

La configurazione viene solitamente archiviata in un unico file. Ogni generatore di siti Web statici ha le sue specifiche, ma molte impostazioni sono le stesse in tutti e quattro.

È possibile specificare dove vengono archiviati i file di origine o dove emettere le origini costruite. È sempre utile saltare i dati che non verranno utilizzati nel processo di compilazione impostando l'opzione exclude o skip_render . Puoi anche usare il file di configurazione per memorizzare le impostazioni globali come il titolo del progetto o l'autore.

Migrazione a un generatore statico

Se hai già un progetto Wordpress pronto per l'uso, puoi migrarlo su un generatore di pagine statiche con relativa facilità.

Per Jekyll, potresti inserire il plug-in Jekyll Exporter. Per Middleman, puoi usare uno strumento da riga di comando chiamato wp2middleman. Puoi utilizzare da Wordpress a Hugo Exporter per la migrazione di Hugo e, per Hexo, puoi leggere la nostra guida su come migrare da Wordpress a Hexo che ho scritto l'anno scorso.

Il principio è quasi identico e abbastanza semplice: prima esporta tutto il contenuto in un formato adatto, quindi includilo nella cartella giusta.

Contenuto

I generatori di pagine statiche utilizzano Markdown per il contenuto principale. Markdown è potente e puoi impararlo rapidamente. Scrivere contenuti in Markdown sembra naturale grazie alla sua semplice sintassi. Il documento appare pulito e organizzato.

Dovresti inserire gli articoli in una cartella specificata nel file di configurazione globale. I nomi degli articoli devono seguire la convenzione specificata dal generatore.

In Jekyll, dovresti inserire un articolo nella directory _posts . Il nome dell'articolo deve avere il seguente formato: ANNO-MESE-GIORNO-titolo.MARKUP. Altri generatori hanno regole simili e forniscono un comando per creare un nuovo articolo.

Ecco i comandi per creare un nuovo articolo in Middleman, Hugo e Hexo:

Intermediario

middleman article my_article

Ugo

hugo new posts/my_article.md

eso

hexo new post my_article

In Markdown, sei limitato a un particolare insieme di sintassi. Fortunatamente per noi, tutti i generatori possono elaborare anche HTML grezzo. Ad esempio, se vuoi aggiungere un'ancora con una classe specifica, puoi aggiungerla come faresti in un normale file HTML:

This is a text with <a class="my-class" href="#">a link</a> .

Materia anteriore

L'argomento principale è un blocco di dati in cima al file Markdown. Puoi impostare variabili personalizzate per memorizzare i dati necessari per creare contenuti migliori. Invece di scrivere HTML in Markdown, che potrebbe portare a una struttura del documento disordinata e brutta, potresti definire una variabile in prima pagina.

Ad esempio, questo è il modo in cui potresti aggiungere tag al tuo articolo.

 tags: - web - dev - featured

Modelli nei generatori di pagine statiche

I generatori di pagine statiche utilizzano un linguaggio di modelli per elaborare i modelli. Per inserire dati in un modello, è necessario utilizzare i tag. Ad esempio, per visualizzare il titolo della pagina in Jekyll, potresti scrivere:

{{ page.title }}

Proviamo a visualizzare un elenco di tag dall'argomento principale nel nostro post in Jekyll. È necessario verificare se una variabile è disponibile. Quindi, è necessario scorrere i tag e visualizzarli in un elenco non ordinato.

 {%- if page.tags -%} <ul> {%- for tag in page.tags -%} <li>{{ tag }}</li> {%- endfor -%} </ul> {%- endif -%}

Intermediario:

 <% if current_page.data.tags %> <ul> <% for tag in current_page.data.tags %> <li><%= tag %></li> <% end %> </ul> <% end %>

Ugo:

 {{ if .Params.Tags }} <ul> {{ range .Params.Tags }} <li>{{ . }}</li> {{ end }} </ul> {{ end }}

esadecimale:

 <% if (post.tags) { %> <ul> <% post.tags.forEach(function(tag) { %> <li><%= tag.name %></li> <% } ); %> </ul> <% } %>

Nota: è buona norma verificare se esiste una variabile per evitare che un processo di compilazione fallisca. Potrebbe farti risparmiare ore di debug e test.

Utilizzo di variabili

Un generatore di pagine statiche fornisce variabili globali disponibili per la consegna dei modelli. Un tipo di variabile diverso contiene informazioni diverse. Ad esempio, un sito con variabili globali in Hexo contiene informazioni su post, pagine, categorie e tag di un sito.

Conoscere le variabili disponibili e come usarle potrebbe semplificare la vita di uno sviluppatore. Hugo utilizza le librerie di modelli di Go per la creazione di modelli. Lavorare con le variabili in Hugo potrebbe essere un problema se non si ha familiarità con il contesto o "il punto" come lo chiamano.

Middleman non ha variabili globali. Tuttavia, puoi attivare l'estensione middleman-blog che ti consente di accedere ad alcune variabili, come un elenco di articoli. Se vuoi aggiungere variabili globali, puoi farlo estraendo i dati nei file di dati.

File di dati

Quando si desidera archiviare dati che non sono disponibili nei file Markdown, è necessario utilizzare i file di dati. Ad esempio, se hai bisogno di salvare l'elenco dei tuoi link social che vuoi visualizzare nel footer del tuo sito. Tutti i generatori di pagine statiche supportano i file YAML e JSON. Inoltre, Jekyll supporta i file CSV e Hugo supporta i file TOML.

Archiviamo quei collegamenti social nel nostro file di dati. Poiché tutti i generatori supportano il formato YAML, salviamo i dati nel file social.yml:

 - name: Twitter href: https://twitter.com/malimirkeccita - name: LinkedIn href: http://github.com/maliMirkec/ - name: GitHub href: https://www.linkedin.com/in/starbist/

Jekyll memorizza i file di dati nella directory _data per impostazione predefinita. Middleman e Hugo usano la directory dei dati e Hexo usa la directory source/_data directory .

Per generare i dati, è possibile utilizzare il seguente codice:

Jekyll

 {%- if site.data.social -%} <ul> {% for social in site.data.social %} <li><a href="{{ social.href }}">{{ social.name }}</li> {%- endfor -%} </ul> {%- endif -%}

Intermediario

 <% if data.social %> <ul> <% data.social.each do |s| %> <li><a href="<%= s.href %>"><%= s.name %></li> <% end %> </ul> <% end %>

Ugo

 {{ if $.Site.Data.social }} <ul> {{ range $.Site.Data.social }} <li><a href="{{ .href }}">{{ .name }}</a></li> {{ end }} </ul> {{ end }}

eso

 <% if (site.data.social) { %> <ul> <% site.data.social.forEach(function(social){ %> <li><a href="<%= social.href %>"><%= social.name %></a></li> <% }); %> </ul> <% } %>

Aiutanti

I modelli spesso supportano il filtraggio dei dati. Ad esempio, se vuoi rendere il titolo maiuscolo, puoi farlo in questo modo:

{{ page.title | upcase }}

Middleman ha una sintassi simile:

<%= current_page.data.title.upcase %>

Hugo usa il seguente comando:

{{ .Title | upper }}

Hexo ha una sintassi diversa, ma il risultato è lo stesso.

<%= page.title.toUpperCase() %>

Come i generatori di pagine statiche gestiscono le risorse

La gestione delle risorse viene gestita in modo diverso tra i generatori di pagine statiche. Jekyll compila i file delle risorse ovunque si trovino. Middleman gestisce solo le risorse archiviate nella cartella di origine. La posizione predefinita per le risorse in Hugo è la directory delle risorse. Hexo suggerisce di posizionare le risorse nella directory dei sorgenti globale.

SASS

Jekyll supporta Sass immediatamente, ma dovresti seguire alcune regole. Middleman supporta anche Sass fuori dagli schemi. Hugo compila Sass tramite Hugo Pipes per Sass. Hexo lo fa tramite plugin.

ES6

Se desideri utilizzare le moderne funzionalità JavaScript di es6, dovresti installare un plug-in. Potrebbero esserci più versioni di un plug-in simile, quindi potresti voler controllare il codice o vedere problemi aperti o l'ultimo impegno per trovare quello migliore.

immagini

Anche l'ottimizzazione dell'immagine non è supportata per impostazione predefinita. Inoltre, come i plugin es6, c'è più di un plugin per ottimizzare le immagini. Fai i compiti e cerca di trovare il miglior plugin per il lavoro. In alternativa, potresti utilizzare una soluzione di terze parti. Nel mio blog creato con Hexo, sto usando il piano gratuito Cloudinary. Ho sviluppato un tag cloudinary e sto fornendo immagini reattive e ottimizzate tramite trasformazioni cloudinary.

Plugin, estensioni

I generatori di pagine statiche hanno potenti librerie che ti consentono di personalizzare il tuo sito web. Ogni plugin ha uno scopo diverso. Puoi trovare un'ampia gamma di plugin, da LiveReload per un migliore ambiente di sviluppo alla generazione di Sitemap o feed RSS.

Potresti scrivere un nuovo plugin o estensione. Prima di farlo, controlla se esiste un plugin simile. Consulta l'elenco dei plug-in Jekyll, le estensioni Middleman e i plug-in Hexo. Hugo non ha plugin o estensioni. Tuttavia, supporta gli shortcode personalizzati.

Shortcode in Markdown

Gli shortcode sono frammenti di codice che puoi inserire nei documenti Markdown. Questi frammenti generano codice HTML. Hugo e Hexo supportano gli shortcode. Ci sono codici brevi incorporati, come la figura in Hugo:

{{< figure src="/lint/to/image.jpg" title="My image" >}}

Codice youtube esadecimale:

{% youtube video_id %}

Se non riesci a trovare uno shortcode corretto, puoi crearne uno nuovo. Ad esempio, Hexo non supporta l'incorporamento di CanIUse e ho sviluppato un nuovo tag che supporta l'incorporamento di CanIUse. Non dimenticare di pubblicare il tuo plugin su npm o sul sito ufficiale del generatore. La comunità ti sarà grata se lo farai.

CMS

I generatori di pagine statiche potrebbero essere un sovraccarico per una persona non tecnica. Imparare a usare i comandi o Markdown non è qualcosa di facile per tutti. In tal caso, un utente potrebbe trarre vantaggio dal sistema di gestione dei contenuti per i siti JAMstack. In questo elenco puoi trovare il sistema più adatto alle tue esigenze. Sappi che la configurazione del CMS richiede del tempo, ma a lungo termine tu e altri utenti potreste trarre vantaggio dalla pubblicazione di contenuti in modo più efficiente.

Bonus: modelli JAMstack

Se non vuoi dedicare troppo tempo alla configurazione del tuo progetto, potresti trarre vantaggio dai modelli JAMstack. Alcuni di questi modelli sono già preconfigurati con CMS, il che potrebbe farti risparmiare molto tempo.

Potresti anche imparare molto esaminando il codice. Prova ad installare un template, confrontalo con altri e scegli quello più adatto a te.

Avvolgendo

I generatori di pagine statiche sono un modo veloce e affidabile per creare un sito web. Al giorno d'oggi puoi persino creare siti Web non banali e altamente personalizzati con un generatore.

Ad esempio, Smashing Magazine è passato a JAMstack l'anno scorso e sono riusciti a velocizzare notevolmente il proprio sito. Esistono altri esempi di successo di siti Web statici e condividono tutti lo stesso principio: produrre risorse statiche e distribuirle su reti di distribuzione dei contenuti per un caricamento più rapido e un'esperienza utente superiore.

C'è molto di più che potresti fare con il tuo sito web statico: dall'utilizzo dell'API REST di Wordpress come back-end all'utilizzo delle funzioni Lambda. Esistono soluzioni eccellenti anche per siti Web semplici, come l'utilizzo di HTTPS pronto all'uso o la gestione degli invii di moduli.

Spero che questa panoramica dei framework di pagine statiche ti abbia aiutato a realizzare il loro potenziale e considerare di utilizzarli la prossima volta che pensi a un nuovo progetto.