Kako začeti s Hugo: Kako ustvariti preprosto spletno mesto

Hugo je generator statičnega spletnega mesta, ki vam omogoča ustvarjanje spletnega mesta z malo ali brez izkušenj s kodiranjem. Vnaprej izdelane teme lahko uporabite kot osnovo za oblikovanje vašega spletnega mesta. To vam omogoča, da se bolj osredotočite na zapolnitev spletnega mesta s svojo vsebino.

Ker se Hugo večinoma uporablja za statična spletna mesta, je kot nalašč za ustvarjanje blogov, portfeljev ali strani z dokumentacijo.

Spletno mesto Hugo lahko preprosto nastavite in ustvarite z vnaprej izdelano temo Hugo. S samo nekaj kratkimi koraki lahko nato na svoje spletno mesto dodate vsebino in strani z uporabo Markdowna.

Kako namestiti Hugo

Namestiti morate generator statičnih mest Hugo ustvariti, zagnati in preizkusiti spletno mesto Hugo. Glede na Hugo dokumentacija, obstaja veliko načinov, kako ga lahko namestite. Spodaj je nekaj možnosti.

Mac

Hugo lahko namestite z uporabo Homebrew.

1. Odprite svoj terminal macOS.
2. Namestite upravitelja paketov Homebrew.

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

3. Namestite Hugo.

   zvarka namestite hugo

Windows

Potrebovali boste enakovrednega upravitelja paketov za Windows. Na primer, lahko uporabite Upravitelj paketov Scoop.

1. Odprite Windows PowerShell, ki bi moral biti že del vašega operacijskega sistema Windows.
2. Če prvič nameščate Scoop, boste morda morali nastaviti svojo politiko izvajanja.

   Set-ExecutionPolicy RemoteSigned -Obseg Trenutni uporabnik

3. Namesti Scoop:

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

4. Namesti Hugo:

   zajemalka namestite hugo

Kako ustvariti projekt Hugo

Če želite ustvariti nov projekt Hugo, boste morali uporabiti vgrajeno hugo novo spletno mesto ukaz.

1. Odprite svoj terminal ali ukazni poziv. Pomaknite se do mape, v kateri želite ustvariti svoj projekt.
2. Izvedite hugo novo spletno mesto ukaz:

   hugo novo spletno mesto novo-hugo-spletna stran

3. V raziskovalcu datotek se pomaknite do lokacije vašega projekta Hugo.
4. Odprite mapo projekta. Videli boste, da ima vaše novo spletno mesto Hugo strukturo datotek in map, ki je potrebna za delovanje vašega spletnega mesta.

Kako dodati temo

Trenutno vaš projekt vsebuje samo glavne osnovne mape za projekt Hugo. Lokalno zagon spletnega mesta bi na tej točki prikazal samo prazen zaslon. Ker za vaše spletno mesto še nimate nastavljenih oblik HTML, CSS ali uporabniškega vmesnika, jih boste morali dodati.

Hugo že ponuja vgrajeno knjižnico Hugo teme ustvarili razvijalci.

1. Izberite temo, ki vam je všeč. Vsaka tema ima lahko nekoliko drugačna navodila za nastavitev, prikazana na ustrezni strani za predogled. Ta vadnica bo uporabljala Tema pravljice kot primer.
2. V terminalu ali ukazni vrstici se pomaknite do korenske mape vašega projekta.

   cd novo-hugo-spletna stran

3. Zaženite ukaz, da dodate temo Tale. Temo lahko dodate kot podmodul, ki bo ustvaril novo mapo z imenom zgodba znotraj temo mapo.

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

   Lahko pa tudi klonirate skladišče zgodb GitHub v mapo s temami svojega projekta.

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

4. Pomaknite se do mape vašega projekta. Kliknite na teme mapo, da jo odprete. Ne glede na to, kateri ukaz ste uporabili, bo nov zgodba mapo, v kateri je shranjena na novo prenesena tema.
5. V config.toml datoteko, dodajte temo zgodbe kot del konfiguracije. To bo Hugu povedalo, naj uporabi HTML, CSS in druge sloge, ki jih vključuje tema Tale.

   tema = "zgodba"

Kako dodati strani na svoje spletno mesto

Svojo vsebino lahko napišete v kateri koli obliki, ki jo Hugo sprejme. Hugo bo nato samodejno pretvoril vaše datoteke v datoteke HTML, ko jih bo serviral uporabniku. To omogoča hitro tako gradnjo kot uvajanje. Ta primer bo uporabljen Markdown, preprost jezik golega besedila, kot format za vašo vsebino.

Markdown lahko napišete večinoma v navadni angleščini z nekaj dodanimi simboli, da določite poljubno oblikovanje. To vključuje dodajanje simbolov, ki predstavljajo naslove, katere besede so krepke, ali katero koli drugo osnovno oblikovanje, ki ga morda potrebujete.

Če želite na svoje spletno mesto dodati novo podstran ali objavo, boste morali v datoteko dodati novo datoteko Markdown vsebino mapo. Vsaka objava ali stran bo imela svojo datoteko Markdown, povezano z njo.

1. Odprite vsebino mapo v vašem projektu Hugo. Ustvarite novo datoteko Markdown z imenom myFirstPost.md.
2. Odprite datoteko v katerem koli urejevalniku besedil, kot je Notepad++ ali Visual Studio Code.
3. Na vrhu datoteke dodajte nekaj metapodatkov. To bo vključevalo pomembne informacije o objavi. Tema, ki jo uporabljate, bo te informacije oblikovala na določen način na strani.

   
   avtor: "Tvoje ime"
   naslov: "Moja prva objava"
   datum: "2022-05-17"
   

4. Ko dodate metapodatke, lahko začnete dodajati svojo vsebino z uporabo Markdowna.

   tole je moja prva objava na moji spletni strani Hugo!
   Uporabljena je tema Hugo zato stran se imenuje Tale.
   To je zelo enostaven za namestitev in konfigurirati.
   # Podnaslov
   tole je nekaj vsebine.
   # Še en podnaslov
   tole je več vsebine.

5. Dodajte več datotek za znižanje vrednosti, da dodate več strani na svoje spletno mesto.

Kako zagnati in preizkusiti svoje spletno mesto Hugo lokalno

Za zagon svojega spletnega mesta uporabite hugo služi ukaz.

1. Odprite terminal ali ukazno vrstico.
2. Pomaknite se do korenske mape vašega projekta Hugo.
3. Zaženite hugo služi ukaz:

   hugo služi

4. Počakajte, da spletno mesto zaključi postopek zagona. Ko je to končano, bo terminal natisnil sporočilo, s katerega lokalnega naslova lahko dostopate do spletnega mesta. Ponavadi je to http://localhost: 1313/.
5. Odprite spletni brskalnik in vnesite http://localhost: 1313/, ali kateri koli naslov, ki vam ga je dal terminal. Videli boste glavno stran vašega spletnega mesta Hugo.
6. Na strani bo seznam objav za vsako markdown datoteko, ki jo imate. V tem primeru sta dve datoteki markdown napolnjeni z vsebino. To vključuje stran myFirstPost.md, ki ste jo naredili prej. Vključuje tudi novo objavo, imenovano bananaCakeRecipe.md.
7. Kliknite povezavo naslova na enem od predogledov. Popeljal vas bo na celotno stran za to objavo.

Gostovanje vaše spletne strani Hugo

Zagon in delovanje statičnega spletnega mesta je s Hugo preprostim in hitrim. Uporabite lahko in konfigurirate vnaprej izdelane teme ter zaženete svoje spletno mesto Hugo lokalno za testiranje. Na svoje spletno mesto lahko dodate tudi strani z vsebino z uporabo Markdowna.

Ko ustvarite spletno mesto Hugo, se lahko začnete učiti več o tem, kako ga gostiti. Izbirate lahko med številnimi brezplačnimi možnostmi gostovanja spletnih mest, kot so Dropbox, Google Drive ali OneDrive.

Kako pridobiti brezplačno gostovanje spletnih mest z Dropboxom, Google Drive ali OneDrive

Preberite Naprej