Početak rada s Hugom: Kako napraviti jednostavnu web stranicu

Hugo je generator statičkog web-mjesta koji vam omogućuje izradu web stranice s malo ili bez iskustva kodiranja. Možete koristiti unaprijed izrađene teme kao osnovu za dizajn vaše web stranice. To vam omogućuje da se više usredotočite na popunjavanje stranice svojim sadržajem.

Budući da se Hugo uglavnom koristi za statična web-mjesta, savršen je za izradu blogova, portfelja ili stranica za dokumentaciju.

Možete jednostavno postaviti i izraditi Hugo web stranicu koristeći unaprijed izgrađenu Hugo temu. Sa samo nekoliko kratkih koraka možete dodati sadržaj i stranice na svoju web stranicu pomoću Markdowna.

Kako instalirati Hugo

Morate instalirati generator statičkih stranica Hugo za izradu, pokretanje i testiranje Hugo web stranice. Prema Hugo dokumentacija, postoji mnogo načina na koje ga možete instalirati. U nastavku su neke od opcija.

Mac

Možete instalirati Hugo koristeći Homebrew.

1. Otvorite svoj macOS terminal.
2. Instalirajte Homebrew upravitelj paketa.

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

instagram viewer
3. Instalirajte Hugo.

   skuhati instalirati hugo

Windows

Trebat će vam ekvivalentni upravitelj paketa za Windows. Na primjer, možete koristiti Upravitelj paketa Scoop.

1. Otvorite Windows PowerShell, koji bi već trebao biti dio vašeg Windows operativnog sustava.
2. Ako prvi put instalirate Scoop, možda ćete morati postaviti svoju politiku izvršavanja.

   Set-ExecutionPolicy RemoteSigned -opseg Trenutni korisnik

3. Instaliraj Scoop:

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

4. Instaliraj Hugo:

   mjeriti instalirati hugo

Kako stvoriti Hugo projekt

Da biste stvorili novi Hugo projekt, morat ćete koristiti ugrađeni hugo nova stranica naredba.

1. Otvorite svoj terminal ili naredbeni redak. Dođite do mape u kojoj želite stvoriti svoj projekt.
2. Izvršite hugo nova stranica naredba:

   hugo novi mjesto novi-hugo-web stranica

3. Dođite do lokacije vašeg Hugo projekta u vašem File Exploreru.
4. Otvorite mapu projekta. Vidjet ćete da vaša nova Hugo web stranica ima strukturu datoteka i mapa potrebnu za funkcioniranje vaše web stranice.

Kako dodati temu

Trenutno vaš projekt sadrži samo glavne osnovne mape za projekt Hugo. Lokalno pokretanje vaše web stranice u ovom trenutku prikazalo bi samo prazan zaslon. Budući da još nemate HTML, CSS ili UI dizajn postavljen za svoju web stranicu, morat ćete ih dodati.

Hugo već nudi ugrađenu biblioteku Hugo teme kreirali programeri.

1. Odaberite temu koja vam se sviđa. Svaka tema može imati malo drugačije upute za postavljanje, prikazane na njihovoj stranici za pregled. Ovaj vodič će koristiti Tema priče kao primjer.
2. Dođite do korijenske mape vašeg projekta u terminalu ili naredbenom retku.

   CD novi-hugo-web stranica

3. Pokrenite naredbu za dodavanje teme Tale. Možete dodati temu kao podmodul, koji će stvoriti novu mapu pod nazivom priča unutar tema mapu.

   git init
   git podmodul dodaj https://github.com/EmielH/tale-hugo.git themes/tale

   Alternativno, možete klonirati GitHub repozitorij priča u mapu tema vašeg projekta.

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

4. Idite do mape vašeg projekta. Klikni na teme mapu da biste je otvorili. Bez obzira koju ste naredbu koristili, bit će nova priča mapu koja pohranjuje novo preuzetu temu.
5. U config.toml datoteku, dodajte temu priče kao dio konfiguracije. To će reći Hugu da koristi HTML, CSS i druge stilove koje uključuje tema Tale.

   tema = "priča"

Kako dodati stranice na svoju web stranicu

Možete napisati svoj sadržaj u bilo kojem formatu koji Hugo prihvaća. Hugo će tada automatski pretvoriti vaše datoteke u HTML datoteke kada ih posluži korisniku. To ga čini brzim i za izgradnju i za implementaciju. Ovaj primjer će koristiti Markdown, jednostavan jezik običnog teksta, kao format za vaš sadržaj.

Markdown možete pisati uglavnom na običnom engleskom jeziku s nekoliko dodanih simbola kako biste odredili bilo koje oblikovanje. To uključuje dodavanje simbola za predstavljanje naslova, koje su riječi podebljane, ili bilo koje drugo osnovno oblikovanje koje vam može zatrebati.

Za dodavanje nove podstranice ili objave na svoju web stranicu, morat ćete dodati novu Markdown datoteku u sadržaj mapu. Svaki post ili stranica imat će svoju Markdown datoteku povezanu s njim.

1. Otvori sadržaj mapu unutar vašeg Hugo projekta. Napravite novu datoteku Markdown pod nazivom myFirstPost.md.
2. Otvorite datoteku u bilo kojem uređivaču teksta kao što je Notepad++ ili Visual Studio Code.
3. Na vrh datoteke dodajte neke metapodatke. To će uključivati ​​važne informacije o objavi. Tema koju koristite će formatirati ove informacije na određeni način na stranici.

   
   Autor: "Tvoje ime"
   titula: "Moj prvi post"
   datum: "2022-05-17"
   

4. Nakon što dodate metapodatke, možete početi dodavati svoj sadržaj pomoću Markdowna.

   Ovaj je moj prvi post na mojoj Hugo web stranici!
   Koristi se Hugo tema zaovaj stranica se zove Tale.
   To je vrlo jednostavan za instalaciju i konfigurirati.
   # Podnaslov
   Ovaj je neki sadržaj.
   # Još jedan podnaslov
   Ovaj je više sadržaja.

5. Slobodno dodajte još datoteka za smanjenje da biste dodali više stranica na svoju web stranicu.

Kako pokrenuti i testirati svoju Hugo web stranicu lokalno

Za pokretanje vaše web stranice upotrijebite hugo poslužiti naredba.

1. Otvorite terminal ili naredbeni redak.
2. Idite do korijenske mape vašeg Hugo projekta.
3. Pokrenite hugo poslužiti naredba:

   hugo poslužiti

4. Pričekajte da web stranica završi proces pokretanja. Kada se to završi, terminal će ispisati poruku s koje lokalne adrese možete pristupiti web stranici. Obično je ovo http://localhost: 1313/.
5. Otvorite web preglednik i unesite http://localhost: 1313/, ili koju god adresu dao terminal. Vidjet ćete glavnu stranicu vaše Hugo web stranice.
6. Na stranici će biti popis postova za svaku markdown datoteku koju imate. U ovom slučaju, postoje dvije datoteke za smanjenje sadržaja popunjene sadržajem. Ovo uključuje stranicu myFirstPost.md koju ste ranije napravili. Također uključuje novi post pod nazivom bananaCakeRecipe.md.
7. Kliknite na vezu naslova na jednom od pregleda. Odvest će vas na cijelu stranicu za taj određeni post.

Hostiranje vaše Hugo web stranice

Postavljanje i pokretanje statične web stranice s Hugom je jednostavno i brzo. Možete koristiti i konfigurirati unaprijed izrađene teme i pokrenuti svoju Hugo web stranicu lokalno za testiranje. Također možete dodati stranice sa sadržajem na svoju web stranicu pomoću Markdowna.

Nakon što izradite svoju Hugo web stranicu, možete početi učiti više o tome kako je hostirati. Postoji mnogo besplatnih opcija za hosting web stranica koje možete izabrati, kao što su Dropbox, Google Drive ili OneDrive.

Kako dobiti besplatan hosting web stranica s Dropboxom, Google Driveom ili OneDriveom

Pročitajte dalje