Site-urile web statice sunt ușor de creat și uimitor de rapid de utilizat. Dacă înveți să folosești Hugo, poți genera site-uri web statice bazate pe teme pe Linux. Crearea de site-uri web este din nou distractiv!
Cuprins
Generatorul de site-uri web Hugo
Un site static este unul care nu creează sau modifică pagini web din mers. Nu există o bază de date de fundal, procesare de comerț electronic sau PHP. Toate paginile web sunt în întregime pre-construite și pot fi oferite vizitatorilor foarte rapid.
Dar asta nu înseamnă că un site static trebuie să fie plictisitor. Ei pot folosi tot ce oferă HTML, plus foi de stil în cascadă (CSS) și JavaScript. De asemenea, pot avea cu ușurință lucruri precum carusele de imagini și pagini web care alunecă peste imaginile de fundal.
Generatorul de site-uri Hugo funcționează cu un șablon și orice conținut pe care l-ați creat pentru a genera un site web finalizat. Puteți apoi să-l plasați pe o platformă de găzduire și să aveți imediat un site web live.
Hugo folosește reducere pentru paginile și intrările de blog pe care le creați. Markdown este cel mai simplu limbaj de marcare care există, ceea ce face ca întreținerea site-ului dvs. să fie simplă.
Fișierele de configurare ale lui Hugo sunt în Limbajul minim al lui Tom (TOML) și YAML nu este limbaj de marcare (YAML), care sunt la fel de ușor. Un alt bonus este că Hugo este extraordinar de rapid – unele site-uri se încarcă în mai puțin de o secundă. Are multe șabloane din care puteți alege și mai multe sunt adăugate tot timpul, așa că este ușor să începeți. Alegeți un șablon și adăugați conținut care îl face al dvs.
Hugo acționează și ca un server web mic chiar pe computerul tău. Puteți vedea o versiune live a site-ului dvs. web în timp ce îl proiectați și îl creați și ori de câte ori adăugați o postare nouă. De asemenea, se actualizează automat de fiecare dată când „Salvați” în editor, astfel încât să puteți vedea imediat efectul modificărilor dvs. în browser.
Găzduirea site-ului dvs
Când vine vorba de găzduirea site-ului dvs. static, aveți de ales. Majoritatea companiilor oferă găzduire gratuită pentru uz personal sau open-source. Desigur, puteți alege și o companie obișnuită de găzduire web, ca oricare dintre următoarele:
Aerobatic
Amazon S3
Azur
CloudFront
DreamHost
Firebase
Pagini GitHub
Hai tăticu
Google Cloud Storage
Heroku
Pagini GitLab
Netlify
Rackspace
Surge
Instalarea lui Hugo
Împreună cu Hugo, trebuie să aveți instalat Git. Git a fost deja instalat pe Fedora 32 și Manjaro 20.0.1. Pe Ubuntu 20.04 (Focal Fossa), a fost adăugat automat ca dependent de Hugo.
Pentru a instala Hugo pe Ubuntu, utilizați această comandă:
sudo apt-get install hugo
Pe Fedora, trebuie să tastați:
sudo dnf install hugo
Comanda pentru Manjaro este:
sudo pacman -Syu hugo
Crearea unui site web cu Hugo
Când îi cerem lui Hugo să facă un site nou, acesta ne creează un set de directoare. Acestea vor deține diferitele elemente ale site-ului nostru. Totuși, acesta nu este ultimul site web care va fi încărcat pe platforma dvs. de găzduire. Aceste directoare vor păstra tema, fișierele de configurare, conținutul și imaginile pe care Hugo le va folosi ca intrare atunci când îi vom cere să creeze site-ul propriu-zis.
Este ca diferența dintre codul sursă și un program compilat. Codul sursă este chestiile pe care compilatorul le folosește pentru a genera produsul final. În mod similar, Hugo preia conținutul acestor directoare și generează un site web funcțional.
Comanda pe care o vom rula va crea un director cu același nume cu site-ul pe care doriți să îl creați. Directorul respectiv va fi creat în directorul în care executați comanda.
Așadar, treceți la directorul în care doriți să fie creat site-ul dvs. Folosim directorul nostru principal, așa că introducem următoarele:
hugo new site geek-demo
Acest lucru creează un director „geek-demo”. Introducem următoarele pentru a comuta în acel director și a rula ls:
cd geek-demo/
ls
Vedem fișierul de configurare „config.toml” și directoarele care au fost create. Acestea sunt practic goale, totuși, deoarece aceasta este doar schela pentru site-ul web.
Inițializarea Git și adăugarea unei teme
Trebuie să adăugăm o temă, astfel încât Hugo să știe cum vrem să arate site-ul finit. Pentru a face acest lucru, trebuie să inițializam Git. În folderul rădăcină al site-ului dvs. (cel care conține fișierul „config.toml”), rulați această comandă:
git init
Sunt sute de teme din care poți alege și fiecare are o pagină web care o descrie. Puteți rula o demonstrație a unei teme și puteți afla care este comanda pentru a o descărca. Vom folosi unul numit Meghna.
Pentru a încorpora acea temă în site-ul nostru web, trebuie să comutăm la folderul „Teme” și să rulăm comanda git clone:
cd themes
git clone https://github.com/themefisher/meghna-hugo.git
Git afișează câteva mesaje pe măsură ce progresează. Când s-a terminat, folosim ls pentru a vedea directorul care conține tema:
ls
Temele Hugo includ un exemplu de site web funcțional. Trebuie să copiați site-ul implicit în directoarele site-ului dvs.
Mai întâi, reveniți la directorul rădăcină al site-ului dvs. web. Folosim opțiunea -r (recursivă) cp pentru a include subdirectoare și opțiunea -f (forțată) pentru a suprascrie orice fișiere existente:
cd ..
cp themes/meghna-hugo/exampleSite/* -rf .
Lansarea site-ului dvs. local
Am făcut destul pentru a lansa un nou site web la nivel local. Va conține în continuare textul și imaginile substituentului, dar acestea sunt doar modificări cosmetice. Să verificăm mai întâi că biții tehnici funcționează.
Îi spunem lui Hugo să ruleze serverul său web și să folosească opțiunea -D (schiță) pentru a se asigura că orice fișiere care ar putea fi etichetate cu „schiță” sunt incluse pe site:
hugo server -D
Imaginea de mai jos arată rezultatul comenzii noastre hugo.
Ni s-a spus că Hugo a construit site-ul în 142 de milisecunde (am spus că a fost rapid, nu?). De asemenea, ne spune să apăsăm Ctrl+C pentru a opri serverul, dar să-l lăsăm să ruleze pentru moment.
Deschideți browserul și mergeți la localhost:1313 pentru a vă vedea site-ul.
Modificarea conținutului implicit al site-ului
În timp ce rulează astfel, Hugo servește paginile web din memorie. Nu a creat site-ul web pe hard disk, ci mai degrabă o copie funcțională în RAM. Totuși, monitorizează fișierele și imaginile de pe hard disk. Dacă vreuna dintre ele este schimbată, reîmprospătează site-ul în browser-nu trebuie să apăsați nici măcar Ctrl+F5.
Deschideți o altă fereastră de terminal și navigați la directorul rădăcină al site-ului dvs. web. Deschideți fișierul „config.toml” într-un editor. Schimbați „baseURL” în domeniul pe care va fi găzduit site-ul dvs. și schimbați „titlul” cu numele site-ului dvs. web. Salvați modificările, dar lăsați editorul deschis.
Hugo detectează că au existat modificări la fișierul „config.toml”, așa că le citește, reconstruiește site-ul și reîmprospătează browserul.
Acum ar trebui să vedeți numele pe care l-ați ales pentru site-ul dvs. în fila browser. Obținerea de feedback vizual imediat cu privire la modificările salvate accelerează semnificativ procesul de personalizare a unui site web.
Toate temele sunt diferite, dar am găsit că cele pe care obișnuiam erau destul de simplu de urmărit. Diferitele secțiuni ale site-ului au nume evidente, la fel ca setările din fiecare secțiune, așa că este întotdeauna evident ce schimbați.
Și, din nou, de îndată ce salvați o modificare, vedeți ce ați modificat în browser. Dacă nu vă place, inversați modificarea și salvați din nou.
Diferitele fișiere de configurare care controlează site-ul web sunt fiecare dedicate unui singur loc de muncă și etichetate într-un mod semnificativ. Găsirea lor nu este dificilă, deoarece nu există prea multe locuri în care se pot afla în director. De obicei, acestea se află în folderul „Date”.
Deoarece folosim un șablon bilingv, fișierele noastre de configurare în limba engleză se află în subdirectorul „En”.
Dacă deschideți fișierul Date > En > banner.yml într-un editor, veți vedea colecția de setări care guvernează zona banner a site-ului web.
Când modificați setările „Titlu” și „Conținut”, modificați textul de pe pagina banner.
Am schimbat și setarea „Etichetă”, astfel încât textul butonului spune „Aflați mai multe”. Pentru site-ul dvs., probabil că veți dori să schimbați și imaginea.
De îndată ce salvați modificările, le veți vedea în browser.
Modificarea altor elemente ale unui site web
Puteți schimba toate celelalte elemente într-un mod similar. Doar găsiți fișierul de configurare corespunzător și modificați setările și textul pentru a se potrivi nevoilor dvs.
De asemenea, veți dori să schimbați imaginile. Imaginea implicită va fi referită în fișierul de configurare. Puteți găsi cu ușurință și arunca o privire asupra imaginii originale pentru a vedea care sunt dimensiunile acesteia.
Imaginile sunt plasate în directorul „Static > Images” cu subdirectoare pentru diferitele secțiuni ale site-ului. Plasați orice favicons și logo-uri direct în directorul „Static > Images”.
Adăugarea de conținut nou pe blog
Până acum, ne-am uitat la schimbarea a ceea ce este deja acolo. Dar, cum adăugăm o nouă postare pe blog? Hugo folosește un concept numit „Arhetipuri” pentru a crea conținut nou. Dacă nu creăm un arhetip pentru intrările noastre de blog, un fișier implicit va fi creat pentru noi de fiecare dată când îi cerem lui Hugo să creeze o nouă intrare de blog.
Acest lucru este în regulă, dar cu un arhetip, ne putem economisi ceva efort și ne putem asigura că cât mai mult din materia frontală este introdusă pentru noi în avans.
În această temă, intrările de blog sunt localizate în Conținut > Engleză > Blog. Dacă deschidem o intrare de blog existentă într-un editor – cum ar fi „simple-blog-post-1.md” – putem vedea subiectul principal.
Trebuie să copiem acea secțiune, să edităm intrările curente, astfel încât să poată fi folosit ca șablon de arhetip și apoi să o salvăm în folderul „Arhetipuri”. Dacă îl numim „blog.md”, va fi folosit automat ca șablon pentru noile intrări de blog.
În gedit, putem face acest lucru după cum urmează:
gedit content/english/blog/simple-blog-post-1.md
Evidențiați secțiunea de sus, inclusiv cele două linii întrerupte, apoi apăsați Ctrl+C pentru a o copia. Apăsați Ctrl+N pentru a începe un fișier nou, apoi Ctrl+V pentru a lipi ceea ce ați copiat.
Acum, faceți următoarele modificări și asigurați-vă că lăsați un spațiu după două puncte (:) în fiecare linie:
Titlu: Schimbați-l în „{{ înlocuiți .Nume „-” ” ” | titlu }}” (include ghilimele). Un titlu pentru fiecare noua postare de blog va fi inserat automat. Este format din numele fișierului pe care îl treceți la comanda hugo new, după cum vom vedea.
Data: Schimbați-l în {{ .Date }}. Data și ora la care este creat blogul vor fi introduse automat.
Image_webp: aceasta este calea către imaginea antetului blogului în format webp. Dacă tema nu poate găsi una, va folosi imaginea din rândul următor.
imagine: aceasta este calea către imaginea antetului blogului în format JPEG. Ați putea la fel de bine să lăsați acestea indicând imaginile implicite. Apoi, toate postările de blog vor avea o imagine intermediară, chiar înainte de a găsi, redimensiona sau salva una personalizată. Odată ce ați făcut asta, puteți edita cu ușurință numele fișierului pentru a se potrivi cu cel al imaginii dvs. personalizate.
Autor: Schimbați-l cu numele dvs.
Descriere: introduceți o scurtă descriere a fiecărei postări aici. Dacă îl schimbați într-un șir gol (“”), puteți introduce o descriere pentru fiecare blog nou, fără a fi nevoie să editați textul vechi.
Salvați acest fișier nou ca „archetypes/blog.md”, apoi închideți gedit. Hugo va folosi acum acest nou arhetip ori de câte ori doriți să creați o nouă intrare de blog.
Rețineți că fișierul nostru ar trebui să aibă o extensie „.md”, deoarece vom folosi markdown pentru a scrie intrarea pe blog:
hugo new blog/first-new-blog-post-on-this-site.md
Acum, vrem să deschidem noua noastră intrare de blog într-un editor:
gedit content/english/blog/first-new-blog-post-on-this-site.md
Noua noastră postare de blog se deschide în gedit.
Toate următoarele piese ale materiei frontale au fost adăugate pentru noi:
Titlu: Acesta a fost dedus din numele fișierului. Dacă are nevoie de orice modificare, îl puteți edita aici.
Ora și data: acestea sunt adăugate automat.
Imagine implicită: probabil că veți dori să găsiți o imagine relevantă, fără drepturi de autor. Plasați-l în Static > Imagini > Blog. Va trebui să tastați aici numele de fișier real al imaginii.
Autor: Numele tău este adăugat automat.
Descriere: Aceasta a fost editată.
Scrieți blogul folosind markdown și utilizați marcajul standard pentru titluri, aldine, cursive, imagini, linkuri și așa mai departe. De fiecare dată când salvați fișierul, Hugo reconstruiește site-ul web și îl actualizează în browser.
Imaginea de mai jos arată cum apare noua noastră intrare de blog pe pagina de pornire.
Imaginea de mai jos arată cum arată noua intrare de blog pe propria pagină.
După ce ați terminat de scris postarea pe blog, salvați modificările, apoi închideți editorul. De asemenea, vă puteți închide browserul pentru că vom opri serverul Hugo.
În fereastra terminalului în care rulează serverul Hugo, apăsați Ctrl+C.
Construirea site-ului web
În directorul rădăcină al site-ului dvs., lansați următoarea comandă pentru a vă construi site-ul:
hugo
Hugo creează site-ul web și listează numărul de pagini și alte componente pe care le-a creat. A fost nevoie de 134 de milisecunde pentru a-l crea pe al nostru.
Hugo creează un nou director numit „Public” în directorul rădăcină al site-ului tău web. În directorul „Public”, veți găsi toate fișierele de care aveți nevoie pentru a le transfera pe platforma dvs. de găzduire.
Rețineți că trebuie să încărcați fișierele și directoarele din directorul „Public” pe platforma dvs. de găzduire, nu directorul „Public” în sine.
Acum știi elementele de bază
Fiecare temă va necesita puțină explorare pentru a vă da seama cum o puteți face să arate așa cum doriți, dar aceasta este partea distractivă! Având în vedere capacitatea lui Hugo de a reda modificări imediat într-o fereastră de browser, nimic nu durează prea mult.
Probabil veți descoperi că scrierea textului și găsirea și tăierea imaginilor sunt părțile procesului care durează cel mai mult.
Hugo site-ul de documentare este de asemenea util, dar extins. Sperăm că această prezentare de bază va fi suficientă pentru a începe.
Dacă utilizați Git și Github, GitLab, sau BitBucket, există și integrări disponibile pentru acele platforme. Ei urmăresc depozitul tău Hugo la distanță și îți reconstruiesc site-ul live ori de câte ori introduci modificări la acesta.