Začínáme s Hugem: Jak vytvořit jednoduchý web

Hugo je generátor statických stránek, který vám umožňuje vytvářet webové stránky s minimálními nebo žádnými zkušenostmi s kódováním. Jako základ pro návrh webu můžete použít předem vytvořená témata. To vám umožní více se zaměřit na zaplnění webu vaším obsahem.

Protože se Hugo většinou používá pro statické weby, je ideální pro vytváření blogů, portfolií nebo dokumentačních webů.

Web Hugo můžete snadno nastavit a vytvořit pomocí předem vytvořeného tématu Hugo. Pomocí několika krátkých kroků pak můžete přidat obsah a stránky na svůj web pomocí Markdown.

Jak nainstalovat Hugo

Musíte nainstalovat generátor statického webu Hugo vytvořit, spustit a otestovat web Hugo. Podle Dokumentace Hugo, existuje mnoho způsobů, jak jej nainstalovat. Níže jsou uvedeny některé z možností.

Mac

Hugo můžete nainstalovat pomocí Homebrew.

1. Otevřete terminál macOS.
2. Nainstalujte správce balíčků Homebrew.

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

3. Nainstalujte Hugo.

   vařit Nainstalujte hugo

Okna

Budete potřebovat ekvivalentního správce balíčků pro Windows. Můžete například použít Scoop správce balíčků.

1. Otevřete prostředí Windows PowerShell, které by již mělo být součástí operačního systému Windows.
2. Pokud instalujete Scoop poprvé, možná budete muset nastavit zásady provádění.

   Soubor-ExecutionPolicy RemoteSigned -rozsah Současný uživatel

3. Nainstalovat Scoop:

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

4. Nainstalujte Hugo:

   lopatka Nainstalujte hugo

Jak vytvořit projekt Hugo

Chcete-li vytvořit nový projekt Hugo, budete muset použít vestavěný hugo nový web příkaz.

1. Otevřete terminál nebo příkazový řádek. Přejděte do složky, ve které chcete vytvořit projekt.
2. Proveďte hugo nový web příkaz:

   hugo Nový místo Nový-hugo-web

3. Přejděte do umístění vašeho projektu Hugo v průzkumníku souborů.
4. Otevřete složku projektu. Uvidíte, že váš nový web Hugo má strukturu souborů a složek potřebnou pro fungování vašeho webu.

Jak přidat motiv

V tuto chvíli váš projekt obsahuje pouze hlavní základní složky pro projekt Hugo. Spuštění vašeho webu lokálně v tomto okamžiku by zobrazilo pouze prázdnou obrazovku. Vzhledem k tomu, že pro svůj web ještě nemáte nastavené návrhy HTML, CSS ani uživatelského rozhraní, budete je muset přidat.

Hugo již poskytuje vestavěnou knihovnu Témata Hugo vytvořené vývojáři.

1. Vyberte motiv, který se vám líbí. Každé téma může mít mírně odlišné pokyny k nastavení zobrazené na příslušné stránce náhledu. Tento tutoriál bude používat Téma pohádky jako příklad.
2. Přejděte do kořenové složky vašeho projektu v terminálu nebo na příkazovém řádku.

   CD Nový-hugo-web

3. Spuštěním příkazu přidejte motiv příběhu. Motiv můžete přidat jako submodul, který vytvoří novou složku s názvem příběh uvnitř téma složka.

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

   Případně můžete naklonovat úložiště příběhů GitHub do složky témat vašeho projektu.

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

4. Přejděte do složky projektu. Klikněte na témata složku pro její otevření. Bez ohledu na to, který příkaz jste použili, bude nový příběh složku, ve které je uložen nově stažený motiv.
5. V config.toml přidejte téma příběhu jako součást konfigurace. Tím Hugo řeknete, aby použil HTML, CSS a další styly, které téma Příběh obsahuje.

   téma = "příběh"

Jak přidat stránky na váš web

Svůj obsah můžete napsat v jakémkoli formátu, který Hugo akceptuje. Hugo poté automaticky převede vaše soubory na soubory HTML, když je poskytuje uživateli. Díky tomu se rychle sestavuje i nasazuje. Tento příklad bude použit Markdown, jednoduchý jazyk prostého textu, jako formát pro váš obsah.

Markdown můžete psát většinou v jednoduché angličtině s několika přidanými symboly pro určení libovolného formátování. To zahrnuje přidávání symbolů reprezentujících nadpisy, která slova jsou tučná nebo jakékoli jiné základní formátování, které můžete potřebovat.

Chcete-li na svůj web přidat novou podstránku nebo příspěvek, budete muset do souboru přidat nový soubor Markdown obsah složka. Každý příspěvek nebo stránka bude mít svůj vlastní soubor Markdown.

1. Otevři obsah složku uvnitř vašeho projektu Hugo. Vytvořte nový soubor Markdown s názvem myFirstPost.md.
2. Otevřete soubor v libovolném textovém editoru, jako je Notepad++ nebo Visual Studio Code.
3. Na začátek souboru přidejte nějaká metadata. To bude obsahovat důležité informace o příspěvku. Motiv, který používáte, naformátuje tyto informace na stránce určitým způsobem.

   
   autor: "Tvé jméno"
   titul: "Můj první příspěvek"
   datum: "2022-05-17"
   

4. Po přidání metadat můžete začít přidávat svůj obsah pomocí Markdown.

   Tento je můj úplně první příspěvek na mém webu Hugo!
   Používá se téma Hugo protento místo se jmenuje Tale.
   To je velmi jednoduchá instalace a konfigurovat.
   # Podnadpis
   Tento je nějaký obsah.
   # Další podnadpis
   Tento je více obsahu.

5. Chcete-li na svůj web přidat další stránky, můžete přidat další soubory markdown.

Jak provozovat a testovat svůj web Hugo lokálně

Chcete-li provozovat svůj web, použijte hugo sloužit příkaz.

1. Otevřete terminál nebo příkazový řádek.
2. Přejděte do kořenové složky vašeho projektu Hugo.
3. Spusťte hugo sloužit příkaz:

   hugo sloužit

4. Počkejte, až web dokončí proces spouštění. Jakmile to bude dokončeno, terminál vytiskne zprávu, ze které místní adresy můžete na web přistupovat. Obvykle to tak je http://localhost: 1313/.
5. Otevřete webový prohlížeč a zadejte http://localhost: 1313/nebo kteroukoli adresu, kterou vám terminál poskytl. Zobrazí se hlavní stránka vašeho webu Hugo.
6. Na stránce bude seznam příspěvků pro každý soubor markdown, který máte. V tomto případě jsou dva soubory markdown naplněny obsahem. To zahrnuje stránku myFirstPost.md, kterou jste vytvořili dříve. Zahrnuje také nový příspěvek s názvem bananaCakeRecipe.md.
7. Klikněte na odkaz nadpisu v jednom z náhledů. Dostanete se na celou stránku daného konkrétního příspěvku.

Hosting vašich webových stránek Hugo

S Hugem je zprovoznění statického webu jednoduché a rychlé. Můžete používat a konfigurovat předem vytvořená témata a provozovat web Hugo lokálně pro testování. Pomocí Markdown můžete na svůj web také přidat stránky s obsahem.

Jakmile vytvoříte své webové stránky Hugo, můžete se začít učit více o tom, jak je hostovat. Existuje mnoho bezplatných možností hostování webových stránek, ze kterých si můžete vybrat, jako je Dropbox, Disk Google nebo OneDrive.

Jak získat bezplatný hosting webových stránek pomocí Dropboxu, Disku Google nebo OneDrive

Přečtěte si další