Site-urile web statice se remarcă prin simplitatea creării și viteza de încărcare. Cu ajutorul lui Hugo, poți dezvolta site-uri statice bazate pe șabloane, direct pe platforma ta Linux. Crearea site-urilor devine din nou o activitate plăcută!
Generatorul de site-uri web Hugo
Un site web static nu generează sau modifică pagini în timp real. Acesta nu utilizează o bază de date, nu implică procesare de comerț electronic sau limbaje precum PHP. Toate paginile web sunt predefinite și sunt livrate vizitatorilor cu o viteză remarcabilă.
Totuși, un site static nu trebuie să fie monoton. Acesta poate integra toate funcționalitățile oferite de HTML, precum și foi de stil în cascadă (CSS) și JavaScript. Poți include elemente dinamice, cum ar fi carusele de imagini și efecte de alunecare a paginilor.
Generatorul de site-uri Hugo preia un șablon și conținutul creat de tine, asamblând un site web complet. Acest site poate fi apoi încărcat pe o platformă de găzduire și devine activ imediat.
Hugo utilizează Markdown pentru paginile și articolele de blog. Markdown este un limbaj de marcare simplu, care simplifică administrarea site-ului.
Fișierele de configurare ale lui Hugo sunt scrise în Tom’s Obvious, Minimal Language (TOML) și YAML Ain’t Markup Language (YAML), ambele fiind ușor de utilizat. Un alt avantaj este viteza remarcabilă a lui Hugo, unele site-uri încărcându-se în mai puțin de o secundă. Ai la dispoziție o gamă largă de șabloane, iar altele noi sunt adăugate constant, facilitând pornirea proiectului. Selectează un șablon și adaugă conținutul propriu.
Hugo acționează și ca un server web local. Poți vizualiza o versiune live a site-ului în timp ce îl creezi și la fiecare adăugare de conținut nou. De asemenea, site-ul se actualizează automat la fiecare salvare, permițându-ți să vezi imediat rezultatul modificărilor în browser.
Găzduirea site-ului tău
Când vine vorba de găzduirea site-ului tău static, există numeroase opțiuni. Multe companii oferă găzduire gratuită pentru proiecte personale sau open-source. Desigur, poți opta și pentru o companie tradițională de găzduire web, ca cele de mai jos:
Aerobatic
Amazon S3
Azur
CloudFront
DreamHost
Firebase
Pagini GitHub
GoDaddy
Google Cloud Storage
Heroku
Pagini GitLab
Netlify
Rackspace
Surge
Instalarea lui Hugo
Pentru a utiliza Hugo, este necesar să ai instalat Git. Acesta este de obicei preinstalat pe majoritatea distribuțiilor Linux moderne. Pe Ubuntu 20.04 (Focal Fossa), Git este adăugat automat ca dependență a lui Hugo.
Pentru a instala Hugo pe Ubuntu, folosește această comandă:
sudo apt-get install hugo
Pe Fedora, comanda este:
sudo dnf install hugo
Pentru Manjaro, comanda este:
sudo pacman -Syu hugo
Crearea unui site web cu Hugo
Când cerem lui Hugo să creeze un nou site, acesta va genera o serie de directoare. Acestea vor găzdui diferitele elemente ale site-ului nostru. Totuși, aceste directoare nu reprezintă site-ul web final care va fi încărcat pe platforma ta de găzduire. Acestea conțin șablonul, fișierele de configurare, conținutul și imaginile pe care Hugo le va utiliza ca sursă pentru crearea site-ului final.
Acesta este similar cu diferența dintre codul sursă și un program compilat. Codul sursă este utilizat de compilator pentru a genera produsul final. În mod similar, Hugo preia conținutul din aceste directoare și generează un site web funcțional.
Comanda pe care o vom executa va crea un director cu același nume ca site-ul pe care dorești să-l creezi. Directorul va fi creat în directorul unde execuți comanda.
Așadar, navighează la directorul unde dorești să fie creat site-ul. Folosim directorul nostru principal, deci introducem:
hugo new site geek-demo
Această comandă va crea directorul „geek-demo”. Introduecem următoarele pentru a intra în acel director și a rula ls:
cd geek-demo/
ls
Observăm fișierul de configurare „config.toml” și directoarele create. Acestea sunt, momentan, goale, deoarece reprezintă doar scheletul site-ului web.
Inițializarea Git și adăugarea unei teme
Este necesar să adăugăm o temă pentru a stabili aspectul site-ului. Pentru aceasta, trebuie să inițializăm Git. În folderul rădăcină al site-ului (cel care conține „config.toml”), execută comanda:
git init
Există sute de teme din care poți alege. Fiecare temă are o pagină web dedicată cu o descriere. Poți vizualiza o demonstrație a fiecărei teme și poți afla comanda necesară pentru descărcarea acesteia. Vom folosi tema Meghna.
Pentru a include această temă în site-ul nostru, intrăm în folderul „themes” și executăm comanda git clone:
cd themes
git clone https://github.com/themefisher/meghna-hugo.git
Git va afișa câteva mesaje în timpul procesului. După finalizare, folosim ls pentru a vizualiza directorul cu tema:
ls
Temele Hugo includ un exemplu de site funcțional. Trebuie să copiem acest site implicit în directoarele site-ului nostru.
Revenim la directorul rădăcină al site-ului. Folosim opțiunea -r (recursivă) pentru a include subdirectoare și -f (force) pentru a suprascrie fișierele existente:
cd ..
cp themes/meghna-hugo/exampleSite/* -rf .
Lansarea site-ului tău local
Am realizat suficiente modificări pentru a lansa site-ul local. Acesta va conține text și imagini predefinite, dar acestea sunt doar aspecte vizuale. Să ne asigurăm mai întâi că funcționalitățile tehnice funcționează.
Îi cerem lui Hugo să pornească serverul web și folosim opțiunea -D (draft) pentru a include toate fișierele care ar putea fi etichetate ca „draft”:
hugo server -D
Imaginea de mai jos ilustrează rezultatul comenzii hugo.
Hugo a generat site-ul în 142 milisecunde (foarte rapid, nu?). Acesta ne indică să apăsăm Ctrl+C pentru a opri serverul, dar îl vom lăsa să ruleze deocamdată.
Deschide browserul și accesează localhost:1313 pentru a vizualiza site-ul.
Modificarea conținutului implicit al site-ului
În timp ce rulează în acest mod, Hugo servește paginile web din memorie. Acesta nu a creat site-ul pe hard disk, ci o copie funcțională în RAM. Însă, monitorizează fișierele și imaginile de pe hard disk. La orice modificare a acestora, site-ul din browser se actualizează automat – nu este necesar să apeși Ctrl+F5.
Deschide o altă fereastră de terminal și navighează la directorul rădăcină al site-ului. Deschide fișierul „config.toml” într-un editor. Modifică „baseURL” cu domeniul unde va fi găzduit site-ul și „title” cu numele site-ului tău. Salvează modificările, dar lasă editorul deschis.
Hugo detectează modificările fișierului „config.toml”, îl citește, reconstruiește site-ul și actualizează browserul.
Acum ar trebui să vezi numele pe care l-ai ales pentru site-ul tău în tabul browserului. Feedback-ul vizual imediat la modificările salvate accelerează semnificativ procesul de personalizare a site-ului web.
Toate temele sunt diferite, dar cele pe care le-am folosit sunt destul de simplu de înțeles. Diferitele secțiuni ale site-ului au nume sugestive, la fel ca și setările din fiecare secțiune, astfel încât este clar ce modificări faci.
Și, imediat după salvarea modificărilor, poți vedea impactul acestora în browser. Dacă nu ești mulțumit de modificări, le poți anula și salva din nou.
Fiecare fișier de configurare care controlează site-ul are o funcție specifică și este etichetat corespunzător. Nu este greu să le găsești, deoarece nu există foarte multe locații posibile în director. De obicei, acestea se află în folderul „Data”.
Deoarece folosim un șablon bilingv, fișierele noastre de configurare în limba engleză se află în subdirectorul „En”.
Dacă deschizi fișierul Data > En > banner.yml într-un editor, vei vedea setările care controlează zona banner a site-ului.
Modificând setările „Title” și „Content”, vei schimba textul afișat în banner.
Am modificat și setarea „Label”, astfel încât butonul să afișeze „Află mai multe”. Pentru site-ul tău, probabil că vei dori să schimbi și imaginea.
Imediat ce salvezi modificările, le vei vedea în browser.
Modificarea altor elemente ale unui site web
Poți modifica toate celelalte elemente în mod similar. Găsește fișierul de configurare corespunzător și modifică setările și textul pentru a corespunde nevoilor tale.
Va trebui, de asemenea, să schimbi imaginile. Imaginea implicită va fi referită în fișierul de configurare. Poți inspecta imaginea originală pentru a vedea dimensiunile acesteia.
Imaginile sunt stocate în directorul „Static > Images”, cu subdirectoare pentru diferitele secțiuni ale site-ului. Plasează favicons și logo-uri direct în directorul „Static > Images”.
Adăugarea de conținut nou pe blog
Până acum, ne-am concentrat pe modificarea elementelor existente. Dar cum adăugăm o nouă postare pe blog? Hugo utilizează un concept numit „Arhetipuri” pentru a crea conținut nou. Dacă nu creăm un arhetip pentru articolele noastre de blog, va fi creat un fișier implicit de fiecare dată când cerem lui Hugo să creeze o nouă postare.
Acest lucru este acceptabil, dar un arhetip ne poate economisi timp și ne poate asigura că o parte din informațiile necesare sunt completate automat.
În această temă, postările de blog sunt stocate în Conținut > Engleză > Blog. Dacă deschidem o postare existentă într-un editor – cum ar fi „simple-blog-post-1.md” – putem vizualiza header-ul.
Trebuie să copiem această secțiune, să edităm datele, astfel încât să poată fi folosită ca șablon arhetip, și apoi să o salvăm în folderul „Arhetipuri”. Dacă îl numim „blog.md”, acesta va fi folosit automat ca șablon pentru noile articole de blog.
În gedit, putem face acest lucru astfel:
gedit content/english/blog/simple-blog-post-1.md
Selectează secțiunea de sus, inclusiv cele două linii de puncte, apoi apasă Ctrl+C pentru a o copia. Apasă Ctrl+N pentru a crea un fișier nou, apoi Ctrl+V pentru a lipi conținutul copiat.
Acum, fă următoarele modificări și asigură-te că lași un spațiu după două puncte (:) pe fiecare linie:
Titlu: Modifică în „{{ înlocuiți .Nume „-” ” ” | title }}” (inclusiv ghilimele). Titlul fiecărei postări de blog va fi inserat automat. Acesta este derivat din numele fișierului pe care îl transmiți comenzii hugo new.
Data: Modifică în {{ .Date }}. Data și ora creării blogului vor fi completate automat.
Image_webp: aceasta este calea către imaginea antetului blogului în format webp. Dacă tema nu găsește una, va utiliza imaginea din linia următoare.
image: aceasta este calea către imaginea antetului blogului în format JPEG. Poți lăsa acestea să indice imaginile implicite. Astfel, toate postările vor avea o imagine, chiar și înainte de a găsi, redimensiona sau salva una personalizată. Odată ce faci acest lucru, poți modifica numele fișierului pentru a corespunde cu cel al imaginii tale.
Autor: Modifică cu numele tău.
Descriere: Adaugă o descriere scurtă a fiecărei postări aici. Dacă o modifici într-un șir gol („”), poți adăuga o descriere pentru fiecare blog nou, fără a modifica textul vechi.
Salvează acest fișier nou ca „archetypes/blog.md” și apoi închide gedit. Hugo va folosi acest arhetip nou de fiecare dată când vei crea o nouă postare pe blog.
Reține că fișierul trebuie să aibă extensia „.md”, deoarece vom folosi markdown pentru a scrie postarea:
hugo new blog/first-new-blog-post-on-this-site.md
Acum, vrem să deschidem noua noastră postare într-un editor:
gedit content/english/blog/first-new-blog-post-on-this-site.md
Noua noastră postare de blog se va deschide în gedit.
Următoarele informații au fost adăugate automat:
Titlu: Acesta a fost derivat din numele fișierului. Dacă necesită modificări, poți edita aici.
Ora și data: Acestea sunt adăugate automat.
Imagine implicită: Probabil că vei dori să găsești o imagine relevantă, fără drepturi de autor. Plaseaz-o în Static > Imagini > Blog. Va trebui să introduci aici numele real al fișierului imagine.
Autor: Numele tău este adăugat automat.
Descriere: Aceasta a fost editată.
Scrie blogul folosind markdown și utilizează sintaxa standard pentru titluri, bold, italic, imagini, linkuri etc. La fiecare salvare a fișierului, Hugo va reconstrui site-ul și îl va actualiza în browser.
Imaginea de mai jos ilustrează cum apare noua noastră postare de blog pe pagina principală.
Imaginea de mai jos arată cum arată noua postare de blog pe propria pagină.
După ce ai terminat de scris postarea, salvează modificările, apoi închide editorul. De asemenea, poți închide browserul, deoarece vom opri serverul Hugo.
În fereastra terminalului în care rulează serverul Hugo, apasă Ctrl+C.
Construirea site-ului web
În directorul rădăcină al site-ului, execută următoarea comandă pentru a construi site-ul:
hugo
Hugo va genera site-ul și va afișa numărul de pagini și alte componente create. A durat 134 de milisecunde pentru a genera site-ul nostru.
Hugo creează un nou director numit „Public” în directorul rădăcină al site-ului tău. În directorul „Public” vei găsi toate fișierele necesare pentru a le încărca pe platforma de găzduire.
Reține că trebuie să încarci fișierele și directoarele din directorul „Public” pe platforma de găzduire, nu directorul „Public” în sine.
Acum cunoști elementele de bază
Fiecare temă va necesita puțină explorare pentru a înțelege cum o poți personaliza. Dar aceasta este partea interesantă! Datorită capacității lui Hugo de a afișa modificările imediat într-o fereastră de browser, procesul de personalizare nu durează mult.
Probabil vei observa că scrierea textului și căutarea și editarea imaginilor sunt părțile procesului care necesită cel mai mult timp.
Site-ul de documentație Hugo este util, dar extins. Sperăm că această introducere te va ajuta să începi.
Dacă folosești Git și Github, GitLab sau BitBucket, există integrări disponibile și pentru aceste platforme. Acestea monitorizează depozitul tău Hugo de la distanță și reconstruiesc site-ul live de fiecare dată când efectuezi modificări.