Un ghid pentru generatoarele statice de site care utilizează Hexo și WordPress

Generatoarele statice de site sunt sisteme care compilează șabloane în pagini HTML statice. Dacă sună eficient, da, este. Nu există procesare sau randare pe server, astfel încât site-urile web statice tind să fie foarte rapide și ușoare, economisindu-vă dvs. și utilizatorilor dvs. timp prețios și lățime de bandă. Această eficiență sporită se reflectă în costuri mai mici și, potențial, în venituri mai mari.

De la optimizarea WordPress la devenirea statică

Vorbind despre generatori de venituri eficienți, îmi vine în minte WordPress. Acesta alimentează 28 la sută din internet și este o platformă puternică, cu o mulțime de funcții excelente, inclusiv gestionarea extinsă a utilizatorilor și a conținutului susținută de o serie de plugin-uri, teme, API-uri etc.

Chiar și jucătorii mari din industria noastră folosesc WordPress. Site-uri web precum Smashing Magazine și CSS-Tricks folosesc WordPress, deși cazuri personalizate semnificativ în ambele cazuri. Cu toate acestea, lucrul cu WordPress poate fi o sarcină obositoare, mai ales atunci când personalizați și optimizați pentru performanță.

Am început un mic blog în 2015. Primul meu instinct a fost să folosesc WordPress. Mi-a dat un impuls, deoarece lucram deja cu WordPress. Am creat un nou droplet pe DigitalOcean ca server, am stabilit Vesta ca Hosting Control Panel și am instalat WordPress ca platformă de blog. În cele din urmă, am proiectat și dezvoltat o nouă temă WordPress. Singurul lucru care lipsea era conținutul.

Știam că vreau să împărtășesc câteva sfaturi despre Atom, deoarece foloseam acest editor grozav în acel moment. Am publicat câteva articole despre asta și le-am împărtășit comunității.

La început, nu acordam atât de multă atenție performanței pentru că eram prea concentrat pe conținut. După un timp, am observat câteva probleme de performanță. Scorul de pe Google PageSpeed ​​Insights a fost slab, așa că am muncit din greu pentru a-mi remedia și optimiza site-ul, atingând un scor aproape perfect de 99/100:

• Am trecut de la Nginx+Apache la Nginx+PHP-FPM.

• Am folosit CloudFlare pentru viteză și protecție.

• Am folosit Cloudinary pentru a găzdui imagini.

• Mi-am modificat tema și am folosit Critical CSS.

Singurul avertisment a fost pentru o problemă de stocare în cache Google Analytics pe care nu știam cum să o rezolv la momentul respectiv.

Dar ce se întâmplă dacă 99/100 sau 100/100 tot nu vă oferă performanța dorită? Acolo intră generatorii de pagini statice.

Introduceți Static Page Generators și Hexo

Deci, ce este un generator de site static?

După cum sugerează și numele, un generator de site-uri web static este un sistem care generează fișiere HTML statice. Servirea fișierelor HTML statice este mult mai rapidă decât crearea paginilor din mers. Nu există redare sau compilare pe server, ceea ce cauzează adesea o întârziere în încărcarea paginii.

Când vorbim despre performanță, trebuie să ne gândim la stocarea în cache. Deși există mai multe tehnici pentru memorarea în cache a WordPress, aceasta nu este de obicei o sarcină simplă, spre deosebire de stocarea în cache a fișierelor statice. Servirea fișierelor din cache este mai performantă decât servirea fișierelor reale de pe server și poate economisi timp la încărcarea site-urilor web.

În iunie a acestui an, Vitaly Friedman de la Smashing Magazine a prezentat JAMstack într-un atelier din orașul meu. Nu auzisem niciodată de asta și am fost foarte intrigat. După terminarea seminarului, am studiat un pic acest nou concept și mi-am dat seama cât de minunat este. Mi-am dat seama că site-ul meu nu are nevoie de WordPress.

Primul pas a fost să decideți ce generator de pagini statice să utilizați. Nu știam câți sunt. Am decis să încerc cadrul de blog Hexo. Este implementabil în Netlify, are un plugin pentru a migra de la WordPress și folosește Node.js, cu care sunt familiarizat, spre deosebire de Jekyll și Hugo, care se bazează pe Ruby și, respectiv, Go. Și, după cum am descoperit mai târziu, este fulgerător de repede.

Migrarea WordPress la Hexo

Instalarea Hexo este cât se poate de simplă. Instalați hexo-cli la nivel global folosind npm, rulați comanda hexo init , instalați dependențe npm și voila:

 npm i -g hexo-cli hexo init <blog-name> cd <blog-name> npm install

Pentru a efectua migrarea, instalați pluginul hexo-migrator-wordpress. Acest plugin așteaptă fișiere XML ca sursă. Fișierele XML pot fi exportate prin instrumentul de export WordPress, care poate fi găsit în panoul de administrare sub Instrumente -> Export -> Wordpress . În cele din urmă, tastați comanda hexo migrate pentru a finaliza importul.

 hexo migrate wordpress <source>

Singurul lucru rămas de făcut este să verificați rezultatul. Rulați comanda hexo server pentru a porni serverul și deschideți browserul la adresa dată.

 hexo server

Markdown și limitările sale

Hexo acceptă Markdown din cutie. Markdown este un limbaj de marcare pe care mulți îl folosesc pentru a formata fișiere README, comentarii și postări. Dar ar putea fi folosit și pentru a vă scrie articolul. Sintaxa sa este intuitivă și ușor de învățat.

Un alt avantaj pentru Markdown este că generează HTML curat și valid. Acest lucru le permite dezvoltatorilor să creeze reguli CSS curate și ușor de întreținut pentru stilarea articolelor și paginilor de blog.

Viața unui dezvoltator nu este niciodată ușoară. Ne confruntăm adesea cu probleme care ne-ar putea face să petrecem timp cu lucruri neașteptate. Dacă învățăm ceva pe parcurs, atunci nu am pierdut acest timp și este un lucru bun. La fel mi s-a întâmplat. Am crezut că totul a mers bine pentru că nu a existat nicio eroare de compilare, dar apoi am observat că unele lucruri nu au funcționat așa cum era de așteptat.

De exemplu, demo-urile Codepen nu s-au încărcat. Am căutat un plugin Hexo și am găsit unul. Din păcate, acest plugin nu era oficial și a generat erori HTML care erau inacceptabile. Am vrut să contribui și să remediez problemele, dar ultima cerere de extragere a fost nerezolvată de mai bine de un an și jumătate. Am decis că ar fi mai ușor să forkez depozitul, să remediez problemele și să public pluginul pe pagina Hexo, astfel încât oricine să-l poată folosi. Pluginul a fost acceptat, am actualizat conținutul și demo-urile Codepen au funcționat ca un farmec.

Probleme similare au apărut cu încorporarea CanIUse. Acum că știam cum să creez un plugin Hexo, nu exista nicio scuză pentru a nu face acest lucru. Pluginul meu hexo-caniuse a fost de asemenea publicat, la fel ca și pluginul meu hexo-cloudinary pentru imaginile receptive încărcate din Cloudinary CDN.

Reproiectare și optimizare

Designul site-ului este mai degrabă fundamental. Hexo oferă o mână de teme gratuit pe site-ul oficial, dar îmi doream o temă unică pentru site-ul meu Hexo. După ce am citit documentația și am învățat cum să personalizez Hexo, am început să dezvolt o temă originală de la zero.

Pentru a crea șabloane noi, am decis să folosesc EJS pentru șabloane. Nu am lucrat niciodată cu EJS, am văzut-o ca pe o șansă de a învăța noua sintaxă a șablonului. Dacă nu vă place EJS, Hexo vă oferă suport Swig, Haml sau pug prin pluginuri.

În timpul procesului de reproiectare, am fost foarte atent la performanță. Urmând cele mai bune practici, putem accelera și mai mult site-ul nostru static. Plasarea fișierelor JavaScript în partea de jos a documentului și utilizarea tehnicii Critical CSS creează cea mai bună experiență pentru publicul dvs.

Optimizarea SEO este crucială pentru vizibilitatea blogului pe motoarele de căutare precum Google. Hexo are un ajutor încorporat pentru inserarea datelor Open Graph. Hexo utilizează fișiere YAML pentru a stoca configurația site-ului și a temei. Am folosit fișierul de configurare a temei pentru a configura numele site-ului, descrierea și diverse ID-uri sociale.

Adăugarea Gulp sau Webpack la procesul de construire este întotdeauna utilă și recomandată. Am folosit Gulp pentru a reduce și a comprima fișierele CSS și JavaScript și totul era gata. L-aș putea implementa.

Netlify

Netlify este o platformă care oferă găzduire pentru site-uri web și aplicații cu performanțe fulgerătoare. Se comercializează ca o platformă unificată care automatizează codul pentru a crea site-uri web performante și ușor de întreținut.

Pur și simplu împingeți codul și lăsați-ne pe noi să ne ocupăm de restul.

După cum v-ați aștepta, configurarea site-ului web este simplă:

1. Configurați domeniul.

2. Schimbați înregistrările DNS.

3. Configurați construirea și implementarea.

4. Activați SSL.

Când totul a fost configurat, am rulat câteva teste de bază pentru a vedea scorurile, inclusiv Pingdom Website Speed ​​Test, Web Page Test și Testmysite.io. Rezultatele au fost excelente, deoarece site-ul a obținut cele mai mari scoruri la fiecare instrument.

CloudFlare

În ciuda scorurilor excelente, am vrut să încerc CloudFlare, doar pentru a vedea cât de mult ar accelera site-ul în plus. CloudFlare poate fi copleșitor la început, dar este fundamental să înveți cum să-l folosești. După ce am configurat CloudFlare, am reluat testele și rezultatele au fost și mai bune.

Testul final a fost Google PageSpeed ​​Insights. Scorul a fost de aproape 100% atât pentru versiunile mobile, cât și pentru desktop. Problema a fost memorarea în cache a browserului Google Analytics. Am reușit să rezolv problema utilizând aplicația CloudFlare pentru Google Analytics.

Cât costã?

Utilizarea Hexo pe Netlify cu CloudFlare nu costă nimic.

Hexo este o platformă open-source, deci este gratuită, indiferent de modul în care decideți să o utilizați. Are o comunitate mare și este al treilea cel mai popular generator de pagini statice open source conform StaticGen.

Netlify are un plan deschis care ne oferă opțiuni excelente pentru găzduirea noastră. Imaginile sunt găzduite și în planul deschis al Cloudinary. Planul gratuit CloudFlare ne permite să configuram un număr mare de reguli care pot accelera site-ul dvs. deja rapid. De asemenea, ne permite să remediem problema de stocare în cache a browserului Google Analytics. Nu am plătit nici domeniul, deoarece am folosit un domeniu personal gratuit oferit de guvern.

Această configurație a proiectului mi-a redus bugetul la minimum. Dacă aveți nevoie de funcții mai avansate pentru proiectul dvs., un generator de pagini statice vă poate economisi câțiva dolari.

Servirea fișierelor stocate în cache înseamnă că utilizarea CPU și a lățimii de bandă este redusă, ceea ce înseamnă că, la rândul său, puteți utiliza planuri de găzduire mai ieftine cu hardware mai puțin puternic. Nu numai că, site-ul tău web va fi mult mai rapid, ceea ce înseamnă că utilizatorii tăi se vor bucura să navigheze atât pe dispozitive mobile, cât și pe desktop. Și, deoarece viteza de încărcare a paginii poate afecta clasamentul în Căutarea Google, site-ul dvs. se va clasa mai sus, câștigând și mai mulți vizitatori.

Toate acestea înseamnă că ați putea cheltui o parte din buget în altă parte, de exemplu, pentru promovarea site-ului dvs. web sau pentru crearea de conținut suplimentar, ceea ce vă va ajuta să obțineți puțin mai mult venit.

Cazul pentru generatoarele statice de site

Migrarea de la WordPress la un generator de pagini static nu este o sarcină simplă și cu siguranță nu este ceva ce orice utilizator WordPress ar trebui să facă. Cu toate acestea, Hexo a făcut această tranziție relativ nedureroasă, datorită pluginurilor sale, a documentației excelente și a unui API simplu.

Înainte de a decide dacă doriți sau nu să migrați produsul către o soluție statică, trebuie să fiți conștient de limitările care vin cu generatoarele de pagini statice, cum ar fi restricțiile de conținut, curba de învățare Markdown și controlul versiunilor.

De asemenea, ar trebui să știți că Hexo este un cadru de blog. Este perfect pentru dezvoltatori și oameni de tehnologie care știu să folosească un editor de text și un terminal. Dacă vă place să utilizați o interfață web pentru a vă gestiona conținutul, există un plugin care oferă și această funcționalitate. Se numește hexo-admin și este destul de popular.

Dacă utilizați deja WordPress, ar trebui să vă opriți și să vă gândiți ce caracteristici ale WordPress utilizați acum și care sunt indispensabile. Aveți o structură de conținut complicată? Folosești gestionarea utilizatorilor? Utilizați o mulțime de pluginuri pe instanța dvs. de WordPress și sunt toate necesare? Sunteți mulțumit de performanța site-ului dvs.?

Dacă răspunsul la majoritatea sau la toate aceste întrebări este nu, atunci sunteți gata să vă supraalimentați site-ul cu un generator de pagini static. În funcție de cazul de utilizare și de cerințele dvs., paginile statice ar putea ajuta la maximizarea eficienței, reducând în același timp costurile. Dacă, pe de altă parte, cereți flexibilitate WordPress, probabil că nici măcar nu vă gândiți la o astfel de mișcare.