Začíname s Hugom: Ako vytvoriť jednoduchý web

Hugo je generátor statických stránok, ktorý vám umožňuje vytvoriť webovú stránku s minimálnymi alebo žiadnymi skúsenosťami s kódovaním. Ako základ pre dizajn svojej webovej stránky môžete použiť vopred vytvorené témy. To vám umožní zamerať sa viac na vyplnenie stránky vašim obsahom.

Keďže Hugo sa väčšinou používa pre statické webové stránky, je ideálny na vytváranie blogov, portfólií alebo dokumentačných stránok.

Webovú stránku Hugo môžete jednoducho nastaviť a vytvoriť pomocou vopred vytvorenej témy Hugo. Pomocou niekoľkých krátkych krokov potom môžete pridať obsah a stránky na svoj web pomocou Markdown.

Ako nainštalovať Hugo

Potrebujete nainštalovať generátor statických stránok Hugo vytvoriť, spustiť a otestovať webovú stránku Hugo. Podľa Hugova dokumentácia, existuje mnoho spôsobov, ako ho môžete nainštalovať. Nižšie sú uvedené niektoré z možností.

Mac

Hugo si môžete nainštalovať pomocou Homebrew.

1. Otvorte terminál macOS.
2. Nainštalujte správcu balíkov Homebrew.

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

instagram viewer
3. Nainštalujte Huga.

   variť Inštalácia hugo

Windows

Budete potrebovať ekvivalentného správcu balíkov pre Windows. Môžete napríklad použiť Správca balíkov Scoop.

1. Otvorte prostredie Windows PowerShell, ktoré by už malo byť súčasťou vášho operačného systému Windows.
2. Ak inštalujete Scoop prvýkrát, možno budete musieť nastaviť pravidlá vykonávania.

   Set-ExecutionPolicy RemoteSigned -rozsah Súčasný užívateľ

3. Nainštalovať Scoop:

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

4. Nainštalujte Hugo:

   naberačka Inštalácia hugo

Ako vytvoriť projekt Hugo

Na vytvorenie nového projektu Hugo budete musieť použiť vstavaný hugo nová stránka príkaz.

1. Otvorte terminál alebo príkazový riadok. Prejdite do priečinka, v ktorom chcete vytvoriť svoj projekt.
2. Vykonajte hugo nová stránka príkaz:

   hugo Nový stránky Nový-webová stránka hugo

3. Prejdite do umiestnenia svojho projektu Hugo v prieskumníkovi súborov.
4. Otvorte priečinok projektu. Uvidíte, že vaša nová webová stránka Hugo má štruktúru súborov a priečinkov potrebnú na fungovanie vašej webovej stránky.

Ako pridať tému

V súčasnosti váš projekt obsahuje iba hlavné základné priečinky pre projekt Hugo. Spustenie vašej webovej stránky lokálne v tomto bode by zobrazilo iba prázdnu obrazovku. Keďže pre svoj web ešte nemáte nastavené žiadne návrhy HTML, CSS ani používateľského rozhrania, budete ich musieť pridať.

Hugo už poskytuje vstavanú knižnicu Témy Hugo vytvorené vývojármi.

1. Vyberte tému, ktorá sa vám páči. Každá téma môže mať mierne odlišné pokyny na nastavenie zobrazené na príslušnej stránke s ukážkou. Tento tutoriál bude používať Téma rozprávky ako príklad.
2. V termináli alebo príkazovom riadku prejdite do koreňového priečinka vášho projektu.

   cd Nový-webová stránka hugo

3. Spustite príkaz a pridajte tému Príbeh. Tému môžete pridať ako podmodul, čím sa vytvorí nový priečinok tzv rozprávka vnútri téma priečinok.

   git init
   git submodul add https://github.com/EmielH/tale-hugo.git themes/tale

   Prípadne môžete naklonovať úložisko príbehov GitHub do priečinka tém vášho projektu.

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

4. Prejdite do priečinka projektu. Klikni na témy priečinok, aby ste ho otvorili. Bez ohľadu na to, ktorý príkaz ste použili, bude existovať nový rozprávka priečinok, v ktorom je uložená novo stiahnutá téma.
5. V config.toml súbor, pridajte tému príbehu ako súčasť konfigurácie. Toto povie Hugovi, aby použil HTML, CSS a ďalšie štýly, ktoré obsahuje téma Tale.

   téma = "rozprávka"

Ako pridať stránky na svoj web

Svoj obsah môžete napísať v akomkoľvek formáte, ktorý Hugo akceptuje. Hugo potom automaticky skonvertuje vaše súbory na súbory HTML, keď ich doručí používateľovi. Vďaka tomu je rýchle zostavenie aj nasadenie. Tento príklad sa použije Markdown, jednoduchý jazyk čistého textu, ako formát pre váš obsah.

Markdown môžete písať väčšinou v obyčajnej angličtine s niekoľkými pridanými symbolmi na určenie akéhokoľvek formátovania. To zahŕňa pridávanie symbolov na znázornenie nadpisov, ktoré slová sú tučné, alebo akékoľvek iné základné formátovanie, ktoré môžete potrebovať.

Ak chcete na svoj web pridať novú podstránku alebo príspevok, budete musieť pridať nový súbor Markdown do obsahu priečinok. Každý príspevok alebo stránka bude mať priradený vlastný súbor Markdown.

1. Otvor obsahu priečinok vo vašom projekte Hugo. Vytvorte nový súbor Markdown s názvom myFirstPost.md.
2. Otvorte súbor v ľubovoľnom textovom editore, ako je napríklad Notepad++ alebo Visual Studio Code.
3. V hornej časti súboru pridajte nejaké metadáta. To bude obsahovať dôležité informácie o príspevku. Téma, ktorú používate, naformátuje tieto informácie určitým spôsobom na stránke.

   
   autor: "Tvoje meno"
   názov: "Môj prvý príspevok"
   dátum: "2022-05-17"
   

4. Po pridaní metadát môžete začať pridávať svoj obsah pomocou Markdown.

   Toto je môj úplne prvý príspevok na mojej stránke Hugo!
   Používa sa téma Hugo pretoto stránka sa volá Tale.
   to je veľmi jednoduchá inštalácia a konfigurovať.
   # Podnadpis
   Toto je nejaký obsah.
   # Ďalší podnadpis
   Toto je viac obsahu.

5. Ak chcete na svoj web pridať ďalšie stránky, môžete pridať ďalšie súbory so značkami.

Ako spustiť a otestovať svoj web Hugo lokálne

Ak chcete spustiť svoju webovú stránku, použite hugo slúžiť príkaz.

1. Otvorte terminál alebo príkazový riadok.
2. Prejdite do koreňového priečinka vášho projektu Hugo.
3. Spustite hugo slúžiť príkaz:

   hugo slúžiť

4. Počkajte, kým web dokončí proces spustenia. Po dokončení terminál vytlačí správu s informáciou, z ktorej miestnej adresy máte prístup na webovú stránku. Zvyčajne je to tak http://localhost: 1313/.
5. Otvorte webový prehliadač a zadajte http://localhost: 1313/alebo ktorúkoľvek adresu, ktorú vám terminál poskytol. Zobrazí sa vám hlavná stránka vášho webu Hugo.
6. Na stránke bude zoznam príspevkov pre každý súbor so znížením ceny, ktorý máte. V tomto prípade sú tam dva súbory markdown vyplnené obsahom. To zahŕňa stránku myFirstPost.md, ktorú ste vytvorili predtým. Obsahuje aj nový príspevok s názvom bananaCakeRecipe.md.
7. Kliknite na odkaz na nadpis v jednom z náhľadov. Dostanete sa na celú stránku daného konkrétneho príspevku.

Hosting vašej webovej stránky Hugo

S Hugom je spustenie statickej webovej stránky jednoduché a rýchle. Môžete použiť a nakonfigurovať vopred vytvorené témy a spustiť svoju webovú stránku Hugo lokálne na testovanie. Pomocou Markdown môžete na svoj web pridať aj stránky s obsahom.

Po vytvorení webovej stránky Hugo sa môžete dozvedieť viac o tom, ako ju hostiť. Existuje veľa bezplatných možností hosťovania webových stránok, z ktorých si môžete vybrať, ako napríklad Dropbox, Disk Google alebo OneDrive.

Ako získať bezplatný hosting webových stránok pomocou Dropboxu, Disku Google alebo OneDrive

Prečítajte si ďalej