Noțiuni introductive cu Hugo: Cum să creați un site web simplu

Hugo este un generator de site static care vă permite să creați un site web cu puțină sau deloc experiență de codare. Puteți utiliza teme pre-construite ca bază pentru designul site-ului dvs. web. Acest lucru vă permite să vă concentrați mai mult pe popularea site-ului cu conținutul dvs.

Deoarece Hugo este folosit mai ales pentru site-uri web statice, este perfect pentru crearea de bloguri, portofolii sau site-uri de documentare.

Puteți configura și crea cu ușurință un site web Hugo folosind o temă Hugo preconstruită. Cu doar câțiva pași scurti, puteți adăuga conținut și pagini pe site-ul dvs. folosind Markdown.

Cum se instalează Hugo

Trebuie să instalați generatorul de site static Hugo pentru a crea, rula și testa un site web Hugo. In conformitate cu documentație Hugo, există multe moduri în care îl puteți instala. Mai jos sunt câteva dintre opțiuni.

Mac

Puteți instala Hugo folosind Homebrew.

1. Deschideți terminalul macOS.
2. Instalați managerul de pachete Homebrew.

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

instagram viewer
3. Instalează Hugo.

   bere instalare hugo

Windows

Veți avea nevoie de un manager de pachete echivalent pentru Windows. De exemplu, puteți utiliza Manager de pachete Scoop.

1. Deschideți Windows PowerShell, care ar trebui să facă deja parte din sistemul dvs. de operare Windows.
2. Dacă instalați Scoop pentru prima dată, poate fi necesar să vă setați politica de execuție.

   A stabilit-ExecutionPolicy RemoteSigned -domeniul de aplicare Utilizator curent

3. Instalați Scoop:

   iex (nou-object net.webclient).downloadstring('https://get.scoop.sh')
   

4. Instalați Hugo:

   chiuretă instalare hugo

Cum să creezi un proiect Hugo

Pentru a crea un nou proiect Hugo, va trebui să utilizați sistemul încorporat site nou hugo comanda.

1. Deschideți terminalul sau promptul de comandă. Navigați la folderul în care doriți să vă creați proiectul.
2. Executați site nou hugo comanda:

   hugo nou site-ul nou-hugo-site-ul web

3. Navigați la locația proiectului dvs. Hugo în exploratorul de fișiere.
4. Deschideți folderul de proiect. Veți vedea că noul dvs. site web Hugo are structura de fișiere și foldere necesare pentru ca site-ul dvs. să funcționeze.

Cum să adăugați o temă

În acest moment, proiectul tău conține doar folderele de bază principale pentru proiectul Hugo. Rularea site-ului dvs. web local în acest moment ar afișa doar un ecran gol. Deoarece nu aveți încă niciun design HTML, CSS sau UI configurat pentru site-ul dvs. web, va trebui să le adăugați.

Hugo oferă deja o bibliotecă de încorporate Teme Hugo creat de dezvoltatori.

1. Selectați o temă care vă place. Fiecare temă poate avea instrucțiuni de configurare ușor diferite, afișate pe pagina de previzualizare respectivă. Acest tutorial va folosi Tema de poveste ca exemplu.
2. Navigați la folderul rădăcină al proiectului dvs. într-un terminal sau linie de comandă.

   CD nou-hugo-site-ul web

3. Rulați comanda pentru a adăuga tema Tale. Puteți adăuga tema ca submodul, care va crea un folder nou numit poveste în interiorul temă pliant.

   git init
   submodulul git adaugă https://github.com/EmielH/tale-hugo.git themes/tale

   Alternativ, puteți clona depozitul de povești GitHub în folderul de teme al proiectului dumneavoastră.

   git clonare https://github.com/EmielH/tale-hugo.git themes/tale

4. Navigați la folderul proiectului dvs. Faceți clic pe teme folder pentru a-l deschide. Indiferent de ce comandă ați folosit, va exista o nouă poveste folderul care stochează tema nou descărcată.
5. În config.toml fișier, adăugați tema poveste ca parte a configurației. Acest lucru îi va spune lui Hugo să folosească HTML, CSS și alte stiluri pe care le include tema Tale.

   tema = "poveste"

Cum să adăugați pagini pe site-ul dvs. web

Vă puteți scrie conținutul în orice format acceptat de Hugo. Hugo va converti apoi automat fișierele dvs. în fișiere HTML atunci când le va furniza utilizatorului. Acest lucru îl face rapid atât pentru construirea, cât și pentru implementarea. Acest exemplu va folosi Markdown, un limbaj simplu de text simplu, ca format pentru conținutul dvs.

Puteți scrie Markdown mai ales în limba engleză simplă, cu câteva simboluri adăugate pentru a specifica orice formatare. Aceasta include adăugarea de simboluri pentru a reprezenta titluri, cuvintele care sunt aldine sau orice altă formatare de bază de care aveți nevoie.

Pentru a adăuga o nouă subpagină sau o postare pe site-ul dvs. web, va trebui să adăugați un nou fișier Markdown în conţinut pliant. Fiecare postare sau pagină va avea propriul său fișier Markdown asociat.

1. Deschide conţinut folder din interiorul proiectului tău Hugo. Creați un nou fișier Markdown numit myFirstPost.md.
2. Deschideți fișierul în orice editor de text, cum ar fi Notepad++ sau Visual Studio Code.
3. În partea de sus a fișierului, adăugați câteva metadate. Aceasta va include informații importante despre postare. Tema pe care o utilizați va formata aceste informații într-un anumit mod pe pagină.

   
   autor: "Numele dumneavoastră"
   titlu: "Prima mea postare"
   Data: "2022-05-17"
   

4. După ce ați adăugat metadatele, puteți începe să adăugați conținut folosind Markdown.

   Acest este prima mea postare pe site-ul meu Hugo!
   Se folosește tema Hugo pentruacest site-ul se numește Tale.
   Aceasta este foarte simplu de instalat și configurați.
   # Subtitlu
   Acest este ceva conținut.
   # Un alt subtitlu
   Acest este mai mult conținut.

5. Simțiți-vă liber să adăugați mai multe fișiere de reducere pentru a adăuga mai multe pagini pe site-ul dvs.

Cum să rulați și să testați site-ul dvs. Hugo local

Pentru a rula site-ul dvs., utilizați hugo serve comanda.

1. Deschideți un terminal sau o linie de comandă.
2. Navigați la folderul rădăcină al proiectului dvs. Hugo.
3. Rulați hugo serve comanda:

   hugo serve

4. Așteptați ca site-ul web să finalizeze procesul de pornire. Odată ce acest lucru este finalizat, terminalul va imprima un mesaj care spune de la ce adresă locală puteți accesa site-ul web. De obicei, asta este http://localhost: 1313/.
5. Deschideți un browser web și intrați http://localhost: 1313/, sau orice adresă ți-a dat terminalul. Veți vedea pagina principală a site-ului dvs. Hugo.
6. Pe pagină va fi o listă de postări pentru fiecare fișier de reducere pe care îl aveți. În acest caz, există două fișiere de reducere populate cu conținut. Aceasta include pagina myFirstPost.md pe care ați creat-o mai devreme. Include și o nouă postare numită bananaCakeRecipe.md.
7. Faceți clic pe linkul de titlu de pe una dintre previzualizări. Vă va duce la pagina completă a postării respective.

Găzduirea site-ului dvs. Hugo

Crearea unui site web static este simplă și rapidă cu Hugo. Puteți utiliza și configura teme predefinite și puteți rula site-ul web Hugo local pentru testare. De asemenea, puteți adăuga pagini de conținut pe site-ul dvs. folosind Markdown.

Odată ce ți-ai creat site-ul web Hugo, poți începe să înveți mai multe despre cum să-l găzduiești. Există multe opțiuni gratuite de găzduire a site-urilor web din care puteți alege, cum ar fi Dropbox, Google Drive sau OneDrive.

Cum să obțineți găzduire gratuită de site-uri cu Dropbox, Google Drive sau OneDrive

Citiți în continuare