Cum să construiești un site static extrem de rapid cu Hugo

Hugo este un generator de site static (SSG) scris în Go (alias Golang), un limbaj de programare compilat de înaltă performanță folosit adesea pentru dezvoltarea aplicațiilor și serviciilor backend.

Astăzi, Hugo este capabil să genereze majoritatea site-urilor web în câteva secunde (<1 ms pe pagină). Asta explică de ce Hugo se autoproclamă „cel mai rapid cadru din lume pentru construirea de site-uri web”.

În acest articol, vom arunca o privire asupra istoriei lui Hugo, ce îl face atât de rapid și cum puteți începe să vă construiți propriul site static Hugo.

Ce este Hugo? Și de ce este popular?

Steve Francia a dezvoltat inițial generatorul de site-uri static Hugo în 2013, iar Bjrn Erik Pedersen a preluat funcția de dezvoltator principal al proiectului în 2015. Hugo este un proiect open-source, ceea ce înseamnă că codul său poate fi vizualizat și îmbunătățit de oricine.

Ca generator de site-uri static, Hugo preia fișiere de conținut Markdown, le rulează prin șabloane de teme și scuipă fișiere HTML pe care le puteți implementa cu ușurință online - și face toate acestea extrem de rapid.

În 2021, există zeci, dacă nu sute, de generatoare statice. Fiecare generator de site static are atractivitatea lui. Jekyll este popular în rândul dezvoltatorilor Ruby și, deși nu este la fel de rapid ca alte opțiuni, a fost unul dintre primii generatori de site-uri statice care a văzut o adoptare pe scară largă. Gatsby este un alt SSG popular, care este bine potrivit pentru dezvoltarea de site-uri implementabile static, care au funcționalitate dinamică.

Deci, cu atâtea SSG-uri acolo, ce îl face pe Hugo să iasă în evidență?

Hugo este rapid

În ceea ce privește performanța brută, Hugo este cel mai bun generator de site static din lume. Comparativ cu Jekyll, Forestry a demonstrat că Hugo este de 35 de ori mai rapid. În mod similar, Hugo poate reda un site de 10.000 de pagini în 10 secunde, o sarcină care i-ar lua lui Gatsby peste o jumătate de oră. Nu numai că Hugo este cel mai rapid SSG în ceea ce privește timpul de construcție, dar este și rapid de instalat.

Hugo este livrat ca un executabil autonom, spre deosebire de Jekyll, Gatsby și alte SSG-uri care necesită instalarea de dependențe cu un manager de pachete. Aceasta înseamnă că puteți descărca și utiliza Hugo imediat, fără a vă face griji cu privire la dependențele de software.

Modelarea este ușoară în Hugo

În limbajul SSG, „șablonul” se referă la procesul de adăugare a substituenților pentru inserarea dinamică a conținutului într-o pagină HTML. Pentru a accesa titlul unei pagini, puteți utiliza variabila {{ .Title }} . Astfel, într-un șablon HTML Hugo, este obișnuit să vedeți {{ .Title }} împachetat în etichete H1 astfel:

 <h1>{{ .Title }}</h1>

În timpul construirii, Hugo va prelua automat titlul dintr-un fișier de conținut și va introduce titlul între cele două etichete <h1> . Hugo are o varietate de variabile de șablon încorporate și puteți chiar să scrieți funcții personalizate pentru a procesa datele în timpul construirii. Pentru șabloane, Hugo folosește bibliotecile încorporate html/template și text/template Go. Acest lucru ajută la reducerea balonării aplicațiilor, deoarece Hugo nu trebuie să instaleze biblioteci terțe pentru șabloane.

Iată un exemplu de șablon de pagină de pornire index.html din tema populară Ananke. După cum puteți vedea, seamănă cu un fișier HTML standard cu un cod de șablon suplimentar:

 TBD: GRAB CODE FROM HERE: https://github.com/theNewDynamic/gohugo-theme-ananke

Cum se instalează Hugo

Hugo este livrat ca un executabil compilat, ceea ce înseamnă că nu va trebui să descărcați și să gestionați multe dependențe doar pentru a începe. Este disponibil pentru macOS, Windows și Linux.

Cum se instalează Hugo pe macOS și Linux

Metoda de instalare recomandată pentru macOS și Linux necesită Homebrew, un manager de pachete pentru instalarea și actualizarea aplicațiilor. Dacă nu aveți deja instalat Homebrew, îl puteți instala executând comanda de mai jos în Terminal:

 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

După ce Homebrew a fost instalat, rulați comanda de mai jos pentru a instala Hugo:

 brew install hugo

Cum se instalează Hugo pe Windows

Pentru utilizatorii de Windows, Hugo poate fi instalat folosind managerii de pachete Chocolatey sau Scoop. Deoarece instrucțiunile pentru instalarea Chocolatey și Scoop sunt puțin mai complexe decât Homebrew, vă recomandăm să consultați paginile lor oficiale de documentație aici și aici.

După ce instalați fie Chocolatey, fie Scoop, puteți instala Hugo folosind una dintre următoarele comenzi (în funcție de managerul de pachete):

 choco install hugo-extended -confirm

 scoop install hugo-extended

Cum să verificați dacă Hugo este instalat corect

Pentru a verifica dacă Hugo a fost instalat corect, rulați următoarea comandă:

 hugo version

Această comandă Terminal ar trebui să scoată informații despre versiunea Hugo instalată în prezent, astfel:

 hugo v0.85.0+extended darwin/arm64 BuildDate=unknown

Comenzi și configurare Hugo

Înainte de a ne aprofunda în crearea unui site static cu Hugo, să ne familiarizăm cu diversele sale comenzi CLI și parametrii fișierului de configurare.

Comenzi CLI Hugo

• hugo check – execută diverse verificări de verificare
• hugo config – afișează configurația pentru un site Hugo
• hugo convert – convertește conținutul în diferite formate
• hugo deploy – implementează site-ul tău către un furnizor de cloud
• hugo env – afișează versiunea Hugo și informații despre mediu
• hugo gen – oferă acces la diverse generatoare
• hugo help – afișează informații despre o comandă
• hugo import – vă permite să importați un site dintr-o altă locație
• hugo list – afișează o listă cu diferite tipuri de conținut
• hugo mod – oferă acces la diverse module de ajutor
• hugo new – vă permite să creați conținut nou pentru site-ul dvs
• hugo server – pornește un server de dezvoltare local
• hugo version – afișează versiunea Hugo curentă

Hugo CLI are, de asemenea, o varietate de steaguri pentru a specifica opțiuni suplimentare pentru unele comenzi. Pentru a vizualiza o listă completă de steaguri Hugo (există o mulțime), vă recomandăm să utilizați comanda hugo help pentru a afișa o listă cu toate steaguri disponibile.

Fișierul de configurare Hugo

Fișierul de configurare al lui Hugo acceptă trei formate: YAML, TOML și JSON. De asemenea, fișierul de configurare Hugo este config.yml , config.toml sau config.json și îl puteți găsi în directorul rădăcină al unui proiect Hugo.

Iată cum arată un fișier de configurare tipic Hugo în format YAML:

 DefaultContentLanguage: en theme: - kinsta-static-site contentdir: content layoutdir: layouts publishdir: public paginate: 5 title: Kinsta Static Site description: "This is a static site generated with Hugo!" permalinks: post: :slug/ page: :slug/ tags: "tag/:slug/" author: "author/:slug/"

Dacă ați mai folosit WordPress sau un alt CMS, unele dintre opțiunile de configurare vă pot părea familiare. De exemplu, kinsta-static-site este numele temei site-ului, Kinsta Static Site este meta titlul SEO și paginate (numărul de postări pe pagină) este 5 .

Hugo are zeci de opțiuni de configurare, toate pe care le puteți explora în documentația oficială Hugo. Dacă trebuie să faceți vreo modificare globală a configurației în timp ce dezvoltați un site Hugo, sunt șanse să fie necesar să editați acest fișier de configurare.

Cum să creezi un site Hugo

Acum că am analizat cum să instalăm și să folosim Hugo CLI și elementele de bază ale fișierului de configurare Hugo, să creăm un nou site Hugo.

Pentru a crea un site Hugo, utilizați comanda de mai jos (simțiți-vă liber să schimbați site-ul meu-hugo cu altceva dacă doriți):

 hugo new site my-hugo-site

Apoi, navigați la folderul site-ului și ar trebui să vedeți următoarele fișiere și foldere: fișierul config.toml , folderul arhetypes , folderul de conținut , folderul layout -uri, folderul teme , folderul de date și folderul static . Să trecem rapid peste ce este fiecare dintre aceste fișiere și foldere.

Fișierul config.toml al lui Hugo

După cum am evidențiat mai sus, fișierul de configurare principal al lui Hugo conține setări globale pentru site-ul dvs.

Dosarul Arhetipurilor lui Hugo

Dosarul arhetipuri este locul în care stocați șabloanele de conținut formatate în Markdown. Arhetipurile sunt utile în special dacă site-ul dvs. are mai multe formate de conținut. Cu arhetipurile Hugo, puteți crea un șablon pentru fiecare tip de conținut de pe site-ul dvs. Acest lucru vă permite să prepopulați fișierele Markdown generate cu toate setările de configurare necesare.

De exemplu, dacă aveți un tip de conținut podcast pentru afișarea episoadelor de podcast, puteți crea un nou arhetip în archetypes/podcast.md cu conținutul de mai jos:

 --- title: "{{ replace .Name "-" " " | title }}" date: {{ .Date }} description: "" season: episode: draft: true ---

Cu acest arhetip podcast, puteți folosi comanda de mai jos pentru a crea o nouă postare:

 hugo new podcast/s1e6_interview-with-kinsta-ceo.md

Acum, dacă deschideți postarea nou creată, ar trebui să vedeți asta:

 --- title: "Interview with Kinsta CEO" date: 2021-05-20T13:00:00+09:00 description: "" Season: 1 episode: 6 draft: true ---

Fără arhetipuri, ar trebui să specificați manual parametrii de bază pentru fiecare postare nouă pe care o creați. În timp ce arhetipurile pot părea complexe și inutile la început, ele pot ajunge să economisească mult timp pe termen lung.

Dosarul de conținut al lui Hugo

Dosarul de conținut este locul în care merge conținutul real al postării. Hugo acceptă atât formatele Markdown, cât și HTML, Markdown fiind opțiunea mai populară datorită ușurinței sale de utilizare. Pe lângă faptul că este spațiul de stocare general pentru postări, puteți folosi folderul de conținut pentru a organiza în continuare conținutul postării.

Hugo tratează fiecare director de nivel superior din folderul de conținut ca o secțiune de conținut. Secțiunile de conținut din Hugo sunt similare cu tipurile de postări personalizate din WordPress. De exemplu, dacă site-ul dvs. are postări, pagini și podcasturi, dosarul dvs. de conținut ar avea postări , pagini și directoare de podcasturi în care ar exista fișiere de conținut pentru aceste tipuri diferite de postări.

Dosarul cu aspect al lui Hugo

Dosarul Aspecte conține fișiere HTML care definesc structura site-ului dvs. În unele cazuri, este posibil să vedeți un site Hugo fără un folder de aspecte, deoarece nu trebuie să fie în directorul rădăcină al proiectului și poate locui într-un folder cu temă.

Similar temelor WordPress care folosesc PHP pentru șabloane, șabloanele Hugo constau din HTML de bază cu șabloane dinamice suplimentare, alimentate de bibliotecile încorporate html/template și text/template Golang. Diferitele fișiere șablon HTML necesare pentru a genera marcajul HTML al site-ului dvs. se află în folderul Aspecte .

Dosarul Teme al lui Hugo

Pentru site-urile care preferă o modalitate mai autonomă de stocare a fișierelor șablon și a activelor, Hugo acceptă un folder de teme . Temele Hugo sunt similare cu temele WordPress prin faptul că sunt stocate într-un director de teme și conțin toate șabloanele necesare pentru ca o temă să funcționeze.

În timp ce unii utilizatori Hugo preferă să păstreze fișierele legate de teme în directorul rădăcină al proiectului, stocarea acestor fișiere în folderul cu teme permite gestionarea și partajarea mai ușoară.

Folder de date Hugo

Dosarul de date al lui Hugo este locul în care puteți stoca date suplimentare (în format JSON, YAML sau TOML) care sunt necesare pentru a genera paginile site-ului dvs. Fișierele de date sunt benefice pentru seturi de date mai mari, care pot fi greoaie de stocat direct într-un fișier de conținut sau șablon.

De exemplu, dacă doriți să creați o listă cu ratele inflației USD din 1960 până în 2020, ar fi nevoie de aproximativ 80 de linii pentru a reprezenta datele (o linie pentru fiecare an). În loc să puneți aceste date direct într-un fișier de conținut sau șablon, le puteți crea în folderul de date și le puteți popula cu informațiile necesare.

Folder static Hugo

Dosarul static al lui Hugo este locul în care stocați activele statice care nu necesită nicio prelucrare suplimentară. Dosarul static este de obicei locul în care utilizatorii Hugo stochează imagini, fonturi, fișiere de verificare DNS și multe altele. Când un site Hugo este generat și salvat într-un folder pentru o implementare ușoară, toate fișierele din folderul static sunt copiate așa cum sunt.

Dacă vă întrebați de ce nu am menționat fișierele JavaScript sau CSS, este pentru că acestea sunt adesea procesate dinamic prin conducte în timpul dezvoltării site-ului. În Hugo, fișierele JavaScript și CSS sunt stocate în mod obișnuit în folderul cu teme , deoarece necesită procesare suplimentară.

Cum să adăugați o temă pe un site Hugo

Descărcarea și instalarea unei teme prefabricate este o modalitate excelentă de a începe cu Hugo. Temele Hugo vin în toate formele și dimensiunile, iar multe dintre ele sunt disponibile gratuit în depozitul oficial de teme Hugo. Să mergem mai departe și să instalăm populara temă Hyde pe site-ul nostru Hugo.

Mai întâi, navigați la folderul cu tema proiectului dvs. în Terminal:

 cd <hugo-project-directory>/themes/

Apoi, utilizați Git pentru a clona tema Hyde în directorul de teme al proiectului.

 git clone https://github.com/spf13/hyde.git

Apoi, adăugați următoarea linie în fișierul config.toml pentru a activa tema Hyde:

 theme = "hyde"

În acest moment, tema Hyde este instalată și configurată. Următorul pas este să porniți serverul web de dezvoltare încorporat al lui Hugo pentru a vizualiza site-ul în browserul dvs. web.

Cum să previzualizați un site Hugo

Hugo este livrat cu un server web integrat în scopuri de dezvoltare, ceea ce înseamnă că nu trebuie să instalați un server web terță parte precum Nginx sau Apache doar pentru a vă vizualiza site-ul local.

Pentru a porni serverul web al lui Hugo, rulați comanda de mai jos în directorul rădăcină al proiectului dvs.:

 hugo server -D

Hugo va construi apoi paginile site-ului dvs. și le va face disponibile la http://localhost:1313/ :

Dacă vizitați adresa URL în browserul dvs. web, ar trebui să vedeți site-ul dvs. Hugo cu tema Hyde:

În mod implicit, serverul de dezvoltare local al lui Hugo va urmări modificările și va reconstrui automat site-ul. Deoarece viteza de construire a lui Hugo este atât de rapidă, actualizările site-ului dvs. pot fi văzute aproape în timp real - ceva ce este rar de văzut în lumea generatoarelor statice de site. Pentru a demonstra acest lucru, să creăm prima noastră postare în Hugo.

Cum să adăugați conținut pe un site Hugo

Adăugarea de conținut pe un site Hugo este foarte diferită de un CMS cu drepturi depline precum WordPress sau Ghost. Cu Hugo, nu există un strat CMS încorporat pentru a vă gestiona conținutul. În schimb, trebuie să gestionați și să organizați lucrurile așa cum credeți de cuviință.

Cu alte cuvinte, nu există o modalitate explicit „corectă” de a gestiona conținutul în Hugo. Vom împărtăși o metodă de adăugare și gestionare a conținutului în această secțiune, dar nu ezitați să schimbați lucrurile pe măsură ce vă familiarizați cu Hugo.

Secțiuni de conținut în Hugo

În Hugo, primul instrument de organizare a conținutului pe care îl aveți la dispoziție este secțiunea de conținut . O secțiune de conținut în Hugo este similară cu un tip de postare în WordPress – nu numai că o puteți folosi ca filtru de conținut, dar o puteți folosi și ca identificator atunci când creați teme personalizate.

De exemplu, dacă aveți un folder cu secțiunea de conținut de blog , îl puteți folosi pentru a stoca toate postările de blog și pentru a reda un anumit șablon de pagină care se aplică numai postărilor de blog.

Cum să adăugați postări în Hugo

Având în vedere asta, haideți să creăm o secțiune de conținut pentru postările de blog și să adăugăm câteva bucăți de conținut. Creați un dosar nou numit postări în folderul de conținut al proiectului dvs. - aceasta este secțiunea de conținut.

Să creăm un alt strat organizațional în dosarul postări prin crearea unui folder 2021 . În acest moment, directorul de conținut ar trebui să arate astfel:

Acum, să creăm prima noastră postare. După cum am discutat mai devreme, Hugo acceptă atât fișierele Markdown, cât și fișierele HTML pentru conținut. În general, este mai bine să rămâneți la fișierele Markdown, deoarece sunt mai ușor de scris, format și citit.

În folderul content/posts/2021 , creați un fișier nou care se termină în .md (extensia de fișier Markdown). Puteți denumi fișierul cum doriți, dar sintaxa recomandată pentru denumirea unui fișier de conținut Hugo este AAAA-LL-ZZ-a-sample-post.md .

Pe lângă crearea manuală a unui fișier de conținut, puteți utiliza și Hugo CLI pentru a crea o nouă postare cu comanda de mai jos (asigurați-vă că executați comanda din directorul proiectului):

 hugo new posts/2021/2021-08-30-a-sample-post.md

Observați cum folderul de conținut lipsește din calea de mai sus. Acest lucru se datorează faptului că Hugo presupune că toate fișierele de conținut vor intra în folderul de conținut în mod implicit.

Dacă deschideți fișierul de conținut nou creat, ar trebui să vedeți câteva rânduri de metadate în partea de sus a documentului, care arată cam așa:

 --- title: "2021 08 30 a Sample Post" date: 2021-08-30T13:44:28+09:00 draft: true ---

Aceste metadate, care sunt formatate în YAML, se numesc „materia frontală”. Materia frontală generată automat este un beneficiu semnificativ al utilizării Hugo CLI. Principalul subiect este locul în care sunt stocate datele unice pentru o postare (numele postării, date, starea nefinalizării, etichete, categorii etc.). Formatul implicit pentru materialul frontal poate fi configurat pe secțiune folosind arhetipuri.

Acum să adăugăm ceva text la postare. Când scrieți o postare, asigurați-vă întotdeauna că conținutul dvs. se află sub subiectul principal, astfel:

Odată ce salvați fișierul de conținut, ar trebui să vedeți că Hugo vă reconstruiește site-ul în Terminal. În captura de ecran de mai jos, puteți vedea că Hugo a reconstruit întregul site în 22 ms!

Dacă vă vizitați site-ul Hugo în browserul dvs. web, ar trebui să vedeți noua postare.

Cum să adăugați o pagină în Hugo

Acum că am adăugat o postare pe site-ul nostru Hugo, să adăugăm o pagină. Majoritatea sistemelor de management al conținutului, inclusiv WordPress, fac diferența între postări și pagini. În mod obișnuit, o postare este o bucată de conținut datată, în timp ce o pagină constă din conținut veșnic verde sau static.

Pentru a crea o pagină, avem nevoie mai întâi de o secțiune de conținut a paginii . Pentru a face acest lucru, creați un folder denumit pagini în folderul de conținut al lui Hugo. După aceea, utilizați comanda de mai jos pentru a adăuga o nouă pagină „Despre” pe site-ul dvs.:

 hugo new pages/about.md

Observați cum diferă convenția de denumire pentru pagini de postări. Spre deosebire de postări, paginile nu sunt legate de o anumită dată, așa că nu este necesar să includeți data creării în numele fișierului.

Acum, să adăugăm ceva text la pagina „Despre”:

În acest moment, ar trebui să vedeți pagina Despre în browserul dvs. web:

Acum că avem două secțiuni de conținut – postări și pagini – să vedem cum să facem câteva personalizări ale site-ului, cum ar fi editarea titlului și a descrierii, adăugarea paginii Despre în meniul barei laterale, schimbarea formatului de permalinkuri și eliminarea pagini din fluxul de postări.

Cum să schimbați titlul și descrierea site-ului

Metoda exactă de schimbare a titlului și descrierii site-ului depinde de configurația site-ului și/sau de tema activă. În cazul temei Hyde, titlul și descrierea site-ului pot fi modificate în fișierul de configurare Hugo ( config.toml ).

Știm acest lucru din cauza următorului cod de temă care redă bara laterală:

 <aside class="sidebar"> <div class="container sidebar-sticky"> <div class="sidebar-about"> <a href="{{ .Site.BaseURL }}"><h1>{{ .Site.Title }}</h1></a> <p class="lead"> {{ with .Site.Params.description }} {{.}} {{ else }}An elegant open source and mobile first theme for <a href="http://hugo.spf13.com">hugo</a> made by <a href="http://twitter.com/mdo">@mdo</a>. Originally made for Jekyll.{{end}} </p> </div> <nav> <ul class="sidebar-nav"> <li><a href="{{ .Site.BaseURL }}">Home</a> </li> {{ range .Site.Menus.main -}} <li><a href="{{.URL}}"> {{ .Name }} </a></li> {{- end }} </ul> </nav> <p>{{ with .Site.Params.copyright }}{{.}}{{ else }} {{ now.Format "2006"}}. All rights reserved. {{end}}</p> </div> </aside>

Cele două părți pe care trebuie să vă concentrați sunt:

 {{ .Site.Title }}

Și…

 {{ with .Site.Params.description }} {{.}} {{ else }}An elegant open source and mobile first theme for <a href="http://hugo.spf13.com">hugo</a> made by <a href="http://twitter.com/mdo">@mdo</a>. Originally made for Jekyll.{{end}}

Ghidonul {{ }} fac parte din motorul de șabloane Hugo și permit date generate dinamic în paginile randate. De exemplu, {{ .Site.Title }} îi cere lui Hugo să verifice fișierul config.toml și să preia valoarea mapată la cheia Titlu .

Deoarece configurația implicită a lui Hugo folosește Noul meu site Hugo ca titlu de site, asta arată bara laterală. Dacă schimbăm titlul site-ului în config.toml cu altceva, schimbarea se va reflecta și pe front-end.

Să mergem mai departe și să schimbăm parametrul de titlu în config.toml de la Noul site Hugo al meu în Site - ul Hugo al Kinsta .

Trecând la descrierea site-ului, puteți vedea că motorul de șabloane al lui Hugo acceptă logica condiționată. Tradus în limba engleză simplă, codul de mai jos îi cere lui Hugo să verifice dacă o valoare Params este atribuită cheii de descriere din fișierul config.toml . Dacă nu, iată un șir implicit de utilizat în schimb.

 {{ with .Site.Params.description }} {{.}} {{ else }} An elegant open source and mobile first theme for <a href="http://hugo.spf13.com">hugo</a> made by <a href="http://twitter.com/mdo">@mdo</a>. Originally made for Jekyll.{{end}}

Deoarece nu avem o descriere configurată în fișierul config.toml , Hugo redă implicit „O temă elegantă cu sursă deschisă și pe mobil primul pentru Hugo, realizată de @mdo. Făcută inițial pentru Jekyll.”

Acum să actualizăm fișierul config.toml din:

 baseURL = "http://example.org/" languageCode = "en-us" title = "Kinsta's Hugo Site" theme = "hyde"

La:

 baseURL = "http://example.org/" languageCode = "en-us" title = "Kinsta's Hugo Site" theme = "hyde" [params] description = "Kinsta is a premium managed WordPress hosting company."

După cum era de așteptat, modificările sunt acum vizibile și pe front-end:

Cum să eliminați paginile din fluxul de postări

Pe majoritatea blogurilor, este obișnuit ca fluxul de postări de pe pagina de pornire să afișeze numai postări. În mod implicit, tema Hyde include toate fișierele de conținut din fluxul de postare. Pentru a modifica acest comportament, va trebui să editați funcția range din șablonul index.html , care generează pagina de pornire.

Funcția de range a lui Hugo iterează peste un set definit de elemente și apoi face ceva cu datele. În mod implicit, șablonul index.html al temei Hyde se întinde pe .Site.RegularPages și filtrează date cum ar fi permalink, titlul postării și rezumatul postării înainte de a randa HTML.

Deoarece .Site.RegularPages include toate paginile obișnuite de pe Hugo, inclusiv postările și paginile, este redată pagina „Despre”. Schimbând elementele din range în .Site.RegularPages "Section" "posts" , îi putem instrui pe Hugo să filtreze numai prin paginile obișnuite din secțiunea de postări – fișierele de conținut din folderul de postări pe care l-am creat mai devreme.

Să facem această schimbare acum, editând șablonul din acesta:

 {{ define "main" -}} <div class="posts"> {{- range .Site.RegularPages -}} <article class="post"> <h1 class="post-title"> <a href="{{ .Permalink }}">{{ .Title }}</a> </h1> <time datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}" class="post-date">{{ .Date.Format "Mon, Jan 2, 2006" }}</time> {{ .Summary }} {{ if .Truncated }} <div class="read-more-link"> <a href="{{ .RelPermalink }}">Read More…</a> </div> {{ end }} </article> {{- end }} </div> {{- end }}

La acest:

 {{ define "main" -}} <div class="posts"> {{- range where .Site.RegularPages "Section" "posts" -}} <article class="post"> <h1 class="post-title"> <a href="{{ .Permalink }}">{{ .Title }}</a> </h1> <time datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}" class="post-date">{{ .Date.Format "Mon, Jan 2, 2006" }}</time> {{ .Summary }} {{ if .Truncated }} <div class="read-more-link"> <a href="{{ .RelPermalink }}">Read More…</a> </div> {{ end }} </article> {{- end }} </div> {{- end }}

După efectuarea acestei modificări, pagina de pornire va afișa numai postări de genul:

Cum se utilizează parțiale în Hugo

Una dintre cele mai puternice caracteristici de șabloane ale lui Hugo este parțiale – șabloane HTML încorporate într-un alt șablon HTML. Parțialele permit reutilizarea codului în diferite fișiere șablon fără a gestiona codul din fiecare fișier.

De exemplu, este obișnuit să vedeți diferite secțiuni de pagină (antet, subsol etc.) în fișierele lor parțiale separate, care sunt apoi numite în fișierul șablon baseof.html al unei teme.

În fișierul baseof.html din tema Ananke, puteți vedea un exemplu de parțial pe linia 18 – {{ partial "site-style.html" . }} {{ partial "site-style.html" . }} .

În acest caz, {{ partial "site-style.html" . }} {{ partial "site-style.html" . }} îi cere lui Hugo să înlocuiască conținutul liniei 18 cu site-style.html din folderul /layouts/partials . Dacă navigăm la /partials/site-style.html , vedem următorul cod:

 {{ with partialCached "func/style/GetMainCSS" "style/GetMainCSS" }} <link rel="stylesheet" href="{{ .RelPermalink }}" > {{ end }} {{ range site.Params.custom_css }} {{ with partialCached "func/style/GetResource" . . }}{{ else }} <link rel="stylesheet" href="{{ relURL (.) }}"> {{ end }} {{ end }}

Prin descărcarea acestui cod într-un fișier separat, fișierul șablon baseof.html poate rămâne organizat și ușor de citit. Deși parțialele nu sunt necesare, în special pentru proiectele de bază, ele sunt utile pentru proiecte mai mari cu funcționalități mai complexe.

Cum să utilizați codurile scurte în Hugo

Codurile scurte Hugo sunt similare cu cele parțiale, deoarece permit reutilizarea codului într-o varietate de pagini. Shortcode-urile sunt fișiere HTML care se află în folderul /layouts/shortcodes . Principala diferență este că parțialele se aplică șabloanelor HTML, în timp ce codurile scurte se aplică paginilor de conținut Markdown.

În Hugo, shortcode-urile vă permit să dezvoltați module de funcționalități pe care le puteți utiliza în paginile de pe site-ul dvs. fără a gestiona modificările codului pentru fiecare pagină.

Dacă conduceți un blog, sunt șanse să fie necesar să parcurgeți conținutul postărilor dvs. pentru a actualiza referințele anului la anul curent. În funcție de câte postări aveți pe site-ul dvs., această sarcină poate dura mult timp!

Folosind un cod scurt Hugo în fișierele dvs. de conținut, nu va trebui să vă faceți griji cu privire la actualizarea referințelor de an din nou!

Să începem prin a crea un cod scurt în /layouts/shortcodes/current_year.html cu conținutul de mai jos:

 {{ now.Format "2006" }}

Shortcode-urile pot fi încorporate în postări cu această sintaxă – {{< shortcode_name >}} . În cazul nostru, putem apela codul scurt current_year.html cu {{< shortcode_name >}} astfel:

 --- title: "2021 08 30 a Sample Post" date: 2021-08-30T13:44:28+09:00 draft: true --- This post was created in the year {{< current_year >}}. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur finibus, velit sit amet vulputate scelerisque, massa turpis fringilla nulla, commodo dapibus urna arcu at nunc. Mauris ultrices convallis ipsum eget facilisis. Curabitur ut rutrum sem. Praesent id nibh non enim mollis porta. Nam mollis, quam et vehicula tristique, lorem ante laoreet orci, sit amet congue tortor nibh sit amet leo. Curabitur lobortis neque tempor, vestibulum lacus nec, condimentum arcu. Nulla fringilla leo sit amet ipsum auctor sagittis. Vivamus aliquam iaculis posuere. Pellentesque malesuada neque sit amet consectetur fringilla. Curabitur felis tellus, mattis in dui vel, vestibulum tincidunt metus. Mauris eget elit dui. Etiam risus nulla, ultricies vitae molestie quis, placerat in magna. Proin interdum, orci ac auctor ullamcorper, tellus ex porta tortor, suscipit luctus libero odio quis arcu. Phasellus dapibus pellentesque ex eget pulvinar. Proin vitae elit risus. Sed justo nulla, pellentesque eu erat eu, luctus bibendum magna. Curabitur at mi id augue egestas condimentum sed quis lectus. Aenean fringilla nisl sed tincidunt tristique. Cras scelerisque laoreet sapien a faucibus. Vivamus a vehicula arcu. Duis rutrum, massa eu tincidunt eleifend, est nulla faucibus nisl, sit amet consectetur neque velit at velit. Integer fermentum augue ut orci iaculis aliquet. Ut in gravida magna.

Dacă vizualizați postarea în browserul web, ar trebui să vedeți anul curent în primul rând al postării astfel:

Cum să adăugați imagini la o postare în Hugo

Spre deosebire de WordPress și alte sisteme de gestionare a conținutului cu drepturi depline, Hugo nu include un sistem drag-and-drop pentru gestionarea imaginilor. Astfel, proiectarea unui sistem de management al imaginii este transferată utilizatorului final.

Deși Hugo nu are o modalitate standardizată de gestionare a imaginilor, o metodă populară se bazează pe stocarea imaginilor în folderul /static și referirea acestora în postări și pagini folosind un cod scurt. Să vedem cum puteți face organizarea de bază a imaginii în Hugo.

Primul lucru pe care trebuie să-l facem este să creăm o structură organizatorică pentru biblioteca noastră de imagini. Deși acest lucru sună complex, tot ceea ce este necesar este crearea a câteva directoare suplimentare în folderul /static .

Să începem prin a crea un folder de încărcări în /static . În dosarul de încărcări , creați un dosar numit 2021 pentru a păstra toate imaginile încărcate în 2021.

Apoi, să adăugăm două imagini ( blue1.jpg și blue2.jpg ) în folderul 2021 .

În HTML, imaginile sunt afișate folosind eticheta <img> . De exemplu, pentru a afișa blue1.jpg , putem folosi codul HTML de mai jos:

 <img src="/uploads/2021/blue1.jpg" alt="Blue is the warmest color!">

Deși este posibil să adăugați acest HTML direct la fișierul de conținut Markdown, este mai bine să creați un cod scurt pe care îl puteți utiliza pentru a afișa orice imagine din folderul de încărcări. În acest fel, dacă trebuie vreodată să actualizați eticheta img , puteți edita șablonul de cod scurt fără a edita fiecare instanță a etichetei img .

Pentru a crea șablonul de cod scurt, creați un fișier nou la /layouts/shortcodes/img.html cu conținutul de mai jos:

 <img src="/uploads/{{ .Get "src" }}" alt="{{ .Get "alt" }}

Apoi, adăugați codul scurt de mai jos la o postare de blog:

 {{< img src="2021/blue1.jpg" alt="Blue is also the coolest color!">}

În șablonul de cod scurt, {{ .Get "src" }} și {{ .Get "alt" }} instruiesc pe Hugo să preia conținutul parametrilor src< și alt< atunci când apelează un shortcode.

Acum, dacă reîncărcați postarea pe blog, ar trebui să vedeți imaginea astfel:

Cum să implementați un site Hugo

Până la această postare, ați învățat cum să instalați Hugo, să creați un site, să adăugați o temă, să faceți modificări de bază la fișierele de configurare și să extindeți funcționalitatea site-ului dvs. cu coduri parțiale și scurte. În acest moment, ar trebui să aveți un site funcțional care este gata să fie implementat online.

Deoarece Hugo este un generator de site static, puteți implementa HTML, CSS și JS pe care le generează oriunde cu un server web. Deoarece cerințele tehnice pentru difuzarea site-urilor statice sunt atât de scăzute, le puteți găzdui gratuit printr-o gamă largă de furnizori precum Netlify, Vercel, Cloudflare Pages și altele.

Anterior, am folosit hugo server -D pentru a crea un server de dezvoltare locală pentru a previzualiza modificările aduse site-ului nostru în timp real. Pentru a genera site-ul în întregime, putem folosi comanda hugo din directorul rădăcină al proiectului nostru. După ce generarea site-ului este completă, ar trebui să vedeți un nou folder public în directorul de proiect. În acest folder, veți găsi toate fișierele care trebuie încărcate pe un server sau serviciu de stocare în cloud precum Amazon S3.

Generarea site-ului dvs. local și încărcarea manuală a acestuia pe Amazon S3 sau pe un server care rulează Nginx este o modalitate de a implementa un site generat static. Cu toate acestea, nu este cel mai eficient, deoarece necesită să încărcați manual fișiere noi de fiecare dată când faceți o modificare.

În schimb, o opțiune mai bună este să conectați folderul proiectului Hugo la un depozit GitHub și să conectați depozitul GitHub la un serviciu de implementare automată precum Netlify. Cu această configurare, vă puteți edita site-ul, puteți introduce modificările în GitHub și puteți declanșa o nouă versiune și implementare pe Netlify fără nicio intervenție manuală. Acum, să vedem cum să facem toate acestea!

Cum să încarci proiectul tău Hugo pe GitHub

În primul rând, va trebui să creați un depozit GitHub pentru proiectul dvs. Pentru a face acest lucru, creați un cont GitHub (dacă nu aveți deja unul) și descărcați aplicația oficială pentru desktop GitHub. După instalarea aplicației GitHub, faceți clic pe Fișier în bara de meniu și selectați Depozit nou . Dați depozitului un nume pe care îl alegeți, lăsați celelalte opțiuni în stările implicite pentru moment și faceți clic pe Creare depozit .

În mod implicit (pe macOS), aplicația GitHub creează depozite noi în /Users/username/Documents/GitHub . Deoarece ne-am numit depozitul my-hugo-site , depozitul nostru poate fi găsit la /Users/brianli/Documents/GitHub/my-hugo-site .

Apoi, mutați toate fișierele din folderul original al proiectului în noul folder de depozit GitHub. Asigurați-vă că ștergeți folderul public , deoarece nu trebuie să încărcăm acel folder în GitHub.

Dacă navigați înapoi la aplicația GitHub, ar trebui să vedeți acum o listă de fișiere modificate. Pentru a încărca depozitul în GitHub, adăugați un rezumat, faceți clic pe Commit to main , apoi faceți clic pe Publicare depozit în colțul din dreapta sus.

By default, the “Keep this code private” option is checked. If you want your code to be open-source and publicly accessible, feel free to uncheck it. Finally, click Publish Repository once again.

Now, if you go to GitHub, you should see your repository online like so:

How to Link GitHub Repo to Netlify

If you don't already have a Netlify account, sign up for one here. To link a GitHub repository to Netlify, click New site from Git in the Netlify dashboard.

Under Continuous Deployment , select the GitHub option.

Next, use the search box to find your Hugo project repository.

Next, specify the settings for the continuous deployment. Since Netlify can detect a Hugo configuration, the default settings should work fine for a basic deployment.

As you get more familiar with Hugo, you may delve into environment variables, custom build commands, and more. For the time being, setting the build command to hugo and the public directory to public will allow you to deploy a simple Hugo site. After specifying the build command and public directory, click Deploy Site .

Deoarece Hugo este un generator de site static atât de rapid, implementarea ar trebui să dureze doar câteva secunde pentru un site de bază. Odată ce implementarea se termină, veți putea vedea o adresă URL de transfer în tabloul de bord Netlify. Faceți clic pe adresa URL pentru a vedea site-ul implementat.

Iată site-ul nostru Hugo pe Netlify. După cum puteți vedea, este identic cu site-ul din mediul nostru local:

În acest moment, puteți configura un domeniu personalizat și un certificat SSL pentru site-ul dvs. găzduit de Netlify. Pentru a face acest lucru, vă recomandăm să consultați documentația oficială Netlify.

Deoarece am conectat Netlify la GitHub, un nou angajare la proiectul Hugo GitHub repo va declanșa automat o nouă implementare pe Netlify!

rezumat

Hugo este unul dintre cei mai populari generatori de site-uri statice din lume și pentru un motiv întemeiat. Nu numai că are procesare super rapidă de construcție, dar este livrat și cu capabilități puternice de șabloane care acceptă coduri parțiale și scurte.

În acest tutorial, ați învățat cum să configurați Hugo, să creați un nou proiect, să adăugați fișiere de conținut, să editați fișiere cu tema și să implementați un site static finalizat. Vă recomandăm să parcurgeți documentația oficială Hugo pentru a afla mai multe despre Hugo și despre caracteristicile sale mai avansate, cum ar fi funcțiile personalizate, materia frontală și pachetele de compilare CSS/JS.

Ce părere aveți despre Hugo și alte generatoare de site-uri statice? Vă rugăm să ne anunțați în comentariile de mai jos!