Prezentare generală a generatoarelor de site statice populare

Toți generatorii de pagini statice au o singură sarcină aparent simplă: să producă un fișier HTML static și toate activele acestuia.

Există multe avantaje evidente ale difuzării unui fișier HTML static, cum ar fi stocarea mai ușoară în cache, timpi de încărcare mai rapidi și un mediu mai sigur în general. Fiecare generator de pagini statice produce rezultatul HTML diferit.

Cu toate acestea, scopul acestei postări nu este să se scufunde și să discute complexitățile mecanismului lor, ci să compare setul de caracteristici oferit de fiecare cadru și să evidențieze aspectele și caracteristicile unice ale fiecărui cadru.

Prezentare generală a cadrelor de pagini statice populare

În această postare, vom arunca o privire mai atentă asupra următoarelor cadre statice de pagină: Jekyll , Middleman , Hugo și Hexo . Acestea nu sunt în niciun caz singurele generatoare de acolo, dar sunt cele mai frecvent utilizate, susținute de comunități mari și o mulțime de resurse utile.

Să aruncăm o privire mai atentă la fiecare dintre ele și să le comparăm caracteristicile de bază:

• Jekyll
  • scris cu rubin,
  • acceptă motorul de șablon Liquid din cutie;
• Intermediar
  • scris cu rubin,
  • acceptă motoarele de șablon ERB și Haml din cutie;
• Hugo
  • scris în Go,
  • acceptă motorul de șabloane Go din cutie;
• Hexo
  • scris în JavaScript,
  • acceptă EJS și Pug din cutie.

Notă: merită subliniat faptul că fiecare dintre aceste generatoare de pagini statice poate fi personalizat și extins folosind plugin-uri și extensii, permițându-vă să acoperiți majoritatea sau toate nevoile dvs.

Configurarea generatoarelor statice de site

Documentația pentru fiecare dintre aceste cadre este completă și absolut excelentă și o puteți obține aici:

documentație Jekyll

Documentația intermediarului

documentație Hugo

Documentație hexo

Dacă urmați pur și simplu ghidurile de instalare, ar trebui să aveți pregătit mediul de dezvoltare în câteva minute. Odată instalat, puteți începe un nou proiect rulând comenzi de pe terminal.

De exemplu, așa începeți un nou proiect în diferite cadre:

Jekyll

jekyll new my_website

Intermediar

middleman init my_website

Hugo

hugo new my_website

Hexo

hexo init my_website

Configurare

Configurația este de obicei stocată într-un singur fișier. Fiecare generator de site-uri web static are specificul său, dar multe setări sunt aceleași în toate cele patru.

Puteți specifica unde sunt stocate fișierele sursă sau unde să iasă sursele construite. Este întotdeauna util să omiteți datele care nu vor fi utilizate în procesul de construire prin setarea opțiunii exclude sau skip_render . De asemenea, puteți utiliza fișierul de configurare pentru a stoca setări globale, cum ar fi titlul proiectului sau autorul.

Migrarea la un generator static

Dacă aveți deja un proiect Wordpress gata de plecare, îl puteți migra într-un generator de pagini static cu relativă ușurință.

Pentru Jekyll, ai putea fi pluginul Jekyll Exporter. Pentru Middleman, puteți utiliza un instrument de linie de comandă numit wp2middleman. Puteți folosi Wordpress la Hugo Exporter pentru migrarea Hugo, iar pentru Hexo, puteți citi ghidul nostru despre cum să migrați de la Wordpress la Hexo pe care l-am scris anul trecut.

Principiul este aproape identic și destul de simplu - mai întâi exportați tot conținutul într-un format adecvat, apoi includeți-l în folderul potrivit.

Conţinut

Generatorii de pagini statice folosesc Markdown pentru conținutul principal. Markdown este puternic și se poate învăța rapid. Scrierea conținutului în Markdown pare naturală datorită sintaxei sale simple. Documentul pare curat și organizat.

Ar trebui să plasați articolele într-un folder specificat în fișierul de configurare globală. Numele articolelor ar trebui să respecte convenția specificată de generator.

În Jekyll, ar trebui să plasați un articol în directorul _posts . Numele articolului trebuie să aibă următorul format: AN-LUNA-ZI-titlu.MARKUP. Alți generatori au reguli similare și oferă o comandă pentru crearea unui articol nou.

Iată comenzile pentru crearea unui articol nou în Middleman, Hugo și Hexo:

Intermediar

middleman article my_article

Hugo

hugo new posts/my_article.md

Hexo

hexo new post my_article

În Markdown, sunteți limitat la un anumit set de sintaxă. Din fericire pentru noi, toți generatorii pot procesa și HTML brut. De exemplu, dacă doriți să adăugați o ancoră cu o anumită clasă, puteți să o adăugați așa cum ați face într-un fișier HTML obișnuit:

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

Materia frontală

Materia frontală este un bloc de date deasupra fișierului Markdown. Puteți seta variabile personalizate pentru a stoca datele de care aveți nevoie pentru a crea conținut mai bun. În loc să scrieți HTML în Markdown, ceea ce ar putea duce la o structură de document aglomerată și urâtă, ați putea defini o variabilă în primul rând.

De exemplu, așa ați putea adăuga etichete la articolul dvs.

 tags: - web - dev - featured

Șabloane în generatoarele statice de pagini

Generatoarele de pagini statice folosesc un limbaj de șabloane pentru a procesa șabloanele. Pentru a insera date într-un șablon, trebuie să utilizați etichete. De exemplu, pentru a afișa titlul paginii în Jekyll, puteți scrie:

{{ page.title }}

Să încercăm să afișăm o listă de etichete din prima parte în postarea noastră din Jekyll. Trebuie să verificați dacă o variabilă este disponibilă. Apoi, trebuie să parcurgeți etichetele și să le afișați într-o listă neordonată.

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

Intermediar:

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

Hugo:

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

Hexo:

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

Notă: Este o practică bună să verificați dacă există o variabilă pentru a preveni eșecul unui proces de compilare. S-ar putea economisi ore de depanare și testare.

Utilizarea variabilelor

Un generator de pagini static oferă variabile globale disponibile pentru predarea șabloanelor. Tip diferit de variabilă deține informații diferite. De exemplu, un site variabil global din Hexo deține informații despre postări, pagini, categorii și etichete ale unui site.

Cunoașterea variabilelor disponibile și modul de utilizare a acestora ar putea face viața unui dezvoltator mai ușoară. Hugo folosește bibliotecile de șabloane Go pentru modelare. Lucrul cu variabile în Hugo ar putea fi o problemă dacă nu sunteți familiarizat cu contextul sau „punctul” cum îl numesc.

Middleman nu are variabile globale. Cu toate acestea, puteți activa extensia intermediar-blog care vă va permite să obțineți acces la unele variabile, cum ar fi o listă de articole. Dacă doriți să adăugați variabile globale, puteți face acest lucru extragând date în fișierele de date.

Fișiere de date

Când doriți să stocați date care nu sunt disponibile în fișierele Markdown, ar trebui să utilizați fișiere de date. De exemplu, dacă trebuie să salvați lista de link-uri sociale pe care doriți să le afișați în subsolul site-ului dvs. Toate generatoarele de pagini statice acceptă fișiere YAML și JSON. În plus, Jekyll acceptă fișiere CSV, iar Hugo acceptă fișiere TOML.

Să stocăm acele linkuri sociale în fișierul nostru de date. Deoarece toate generatoarele acceptă formatul YAML, să salvăm datele în fișierul 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 stochează fișierele de date în directorul _data în mod implicit. Middleman și Hugo folosesc directorul de date, iar Hexo folosește source/_data directory .

Pentru a scoate datele, puteți utiliza următorul cod:

Jekyll

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

Intermediar

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

Hugo

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

Hexo

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

Ajutoare

Șabloanele acceptă adesea filtrarea datelor. De exemplu, dacă doriți să puneți titlul cu majuscule, puteți proceda astfel:

{{ page.title | upcase }}

Middleman are o sintaxă similară:

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

Hugo folosește următoarea comandă:

{{ .Title | upper }}

Hexo are o sintaxă diferită, dar rezultatul este același.

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

Cum gestionează generatoarele de pagini statice activele

Gestionarea activelor este gestionată diferit între generatoarele de pagini statice. Jekyll compilează fișierele cu active oriunde sunt plasate. Middleman gestionează numai activele stocate în folderul sursă. Locația implicită pentru active în Hugo este directorul de active. Hexo sugerează plasarea activelor în directorul sursă global.

SASS

Jekyll îl sprijină pe Sass, dar ar trebui să urmați câteva reguli. Middleman îl susține și pe Sass din cutie. Hugo compila Sass prin Hugo Pipes pentru Sass. Hexo o face prin plugin.

ES6

Dacă doriți să utilizați funcțiile JavaScript moderne ale es6, atunci ar trebui să instalați un plugin. S-ar putea să existe mai multe versiuni ale unui plugin similar, așa că este posibil să doriți să verificați codul sau să vedeți probleme deschise sau cele mai recente angajamente pentru a găsi cel mai bun.

Imagini

Nici optimizarea imaginii nu este acceptată implicit. De asemenea, la fel ca pluginurile es6, există mai mult de un plugin pentru optimizarea imaginilor. Fă-ți temele și încearcă să găsești cel mai bun plugin pentru job. Alternativ, puteți utiliza o soluție terță parte. În blogul meu care este construit cu Hexo, folosesc planul gratuit Cloudinary. Am dezvoltat o etichetă cloudinary și ofer imagini receptive și optimizate prin transformări Cloudinary.

Pluginuri, extensii

Generatoarele de pagini statice au biblioteci puternice care vă permit să vă personalizați site-ul. Fiecare plugin are un scop diferit. Puteți găsi o gamă largă de plugin-uri, de la LiveReload pentru un mediu de dezvoltare mai bun până la generarea de sitemap sau flux RSS.

Puteți scrie un nou plugin sau extensie. Înainte de a face acest lucru, verificați dacă există un plugin similar. Consultați lista de pluginuri Jekyll, extensiile Middleman și pluginurile Hexo. Hugo nu are pluginuri sau extensii. Cu toate acestea, acceptă shortcode-uri personalizate.

Shortcodes în Markdown

Shortcode-urile sunt fragmente de cod pe care le puteți plasa în documentele Markdown. Aceste fragmente scot cod HTML. Hugo și Hexo acceptă shortcodes. Există coduri scurte încorporate, cum ar fi figura din Hugo:

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

Hexo youtube shortcode:

{% youtube video_id %}

Dacă nu puteți găsi un shortcode adecvat, puteți crea unul nou. De exemplu, Hexo nu acceptă încorporarea CanIUse și am dezvoltat o nouă etichetă care acceptă încorporarea CanIUse. Nu uitați să vă publicați pluginul pe npm sau pe site-ul generator oficial. Comunitatea va fi recunoscătoare dacă o faci.

CMS

Generatoarele de pagini statice ar putea fi suprasolicitate pentru o persoană netehnică. A învăța cum să folosești comenzile sau Markdown nu este ceva ușor pentru toată lumea. În acest caz, un utilizator ar putea beneficia de Content Management System pentru site-urile JAMstack. În această listă, puteți găsi un sistem care se potrivește cel mai bine nevoilor dvs. Să știți că este nevoie de ceva timp pentru a configura CMS-ul, dar pe termen lung tu și alți utilizatori puteți beneficia de publicarea conținutului mai eficient.

Bonus: șabloane JAMstack

Dacă nu doriți să petreceți prea mult timp pentru a vă configura proiectul, puteți beneficia de șabloanele JAMstack. Unele dintre aceste șabloane sunt deja preconfigurate cu CMS, ceea ce vă poate economisi mult timp.

De asemenea, puteți învăța multe examinând codul. Încercați să instalați un șablon, comparați-l cu alții și alegeți-l pe cel mai potrivit pentru dvs.

Încheierea

Generatoarele statice de pagini sunt o modalitate rapidă și fiabilă de a construi un site web. Puteți chiar să construiți site-uri web non-triviale și extrem de personalizate cu un generator în zilele noastre.

De exemplu, Smashing Magazine s-a mutat la JAMstack anul trecut și au reușit să-și accelereze site-ul în mod semnificativ. Există și alte exemple de succes de site-uri web statice și toate împărtășesc același principiu - să producă resurse statice și să le livreze prin rețelele de livrare de conținut pentru o încărcare mai rapidă și o experiență superioară a utilizatorului.

Există multe altele pe care le puteți face cu site-ul dvs. static: de la utilizarea Wordpress REST API ca backend până la utilizarea funcțiilor Lambda. Există soluții excelente chiar și pentru site-uri web simple, cum ar fi folosirea HTTPS imediat sau gestionarea trimiterilor de formulare.

Sper că această prezentare generală a cadrelor de pagini statice v-a ajutat să le realizați potențialul și să vă gândiți să le utilizați data viitoare când vă gândiți la un proiect nou.