Ismerkedés a Hugo-val: Hogyan készítsünk egyszerű webhelyet

A Hugo egy statikus webhelygenerátor, amely lehetővé teszi webhely létrehozását csekély kódolási tapasztalattal vagy anélkül. Előre elkészített témákat használhat weboldala tervezésének alapjaként. Ez lehetővé teszi, hogy jobban összpontosítson a webhely tartalmával való feltöltésére.

Mivel a Hugo-t többnyire statikus webhelyekhez használják, tökéletes blogok, portfóliók vagy dokumentációs oldalak létrehozására.

Könnyedén beállíthat és létrehozhat egy Hugo webhelyet egy előre elkészített Hugo téma használatával. Néhány rövid lépéssel a Markdown segítségével tartalmat és oldalakat adhat hozzá webhelyéhez.

Hogyan telepítsük a Hugo-t

Telepíteni kell a Hugo statikus helygenerátor Hugo webhely létrehozásához, futtatásához és teszteléséhez. Szerint a Hugo dokumentáció, sokféleképpen telepítheti. Az alábbiakban bemutatunk néhány lehetőséget.

Mac

A Hugo-t a Homebrew segítségével telepítheti.

1. Nyissa meg a macOS terminált.
2. Telepítse a Homebrew csomagkezelőt.

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

3. Telepítse a Hugo-t.

   sörfőzés telepítés hugo

ablakok

Egyenértékű csomagkezelőre lesz szüksége a Windowshoz. Használhatja például a Scoop csomagkezelő.

1. Nyissa meg a Windows PowerShellt, amelynek már a Windows operációs rendszer részének kell lennie.
2. Ha először telepíti a Scoopot, előfordulhat, hogy be kell állítania a végrehajtási szabályzatot.

   Készlet-ExecutionPolicy RemoteSigned -hatálya Jelenlegi felhasználó

3. A Scoop telepítése:

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

4. A Hugo telepítése:

   gombóc telepítés hugo

Hogyan készítsünk Hugo projektet

Új Hugo projekt létrehozásához a beépített elemet kell használnia hugo új oldal parancs.

1. Nyissa meg a terminált vagy a parancssort. Keresse meg azt a mappát, ahol létre szeretné hozni a projektet.
2. Hajtsa végre a hugo új oldal parancs:

   hugo új webhely új-hugo-weboldal

3. Keresse meg a Hugo projekt helyét a fájlkezelőben.
4. Nyissa meg a projekt mappát. Látni fogja, hogy új Hugo webhelye rendelkezik a webhely működéséhez szükséges fájl- és mappastruktúrával.

Hogyan adjunk hozzá egy témát

Jelenleg a projekt csak a Hugo projekt fő alapmappáit tartalmazza. A webhely helyi futtatása ezen a ponton csak üres képernyőt jelenítene meg. Mivel még nem állított be HTML-, CSS- vagy UI-terveket a webhelyéhez, hozzá kell adnia azokat.

A Hugo már rendelkezik beépített könyvtárral Hugo témák fejlesztők készítettek.

1. Válasszon egy témát, amely tetszik. Az egyes témák némileg eltérő beállítási utasításokkal rendelkezhetnek, amelyek a megfelelő előnézeti oldalon láthatók. Ez az oktatóanyag a Mese téma mint például.
2. Navigáljon a projekt gyökérmappájához egy terminálban vagy parancssorban.

   CD új-hugo-weboldal

3. Futtassa a parancsot a Tale téma hozzáadásához. Hozzáadhatja a témát almodulként, amely létrehoz egy új mappát, melynek neve mese benne téma mappát.

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

   Alternatív megoldásként klónozhatja a GitHub mesetárat a projekt témák mappájába.

   git klón https://github.com/EmielH/tale-hugo.git themes/tale

4. Navigáljon a projekt mappájához. Kattintson a témákat mappát a megnyitásához. Függetlenül attól, hogy melyik parancsot használta, lesz egy új mese mappát, amely az újonnan letöltött témát tárolja.
5. Ban,-ben config.toml fájlt, adja hozzá a mese témát a konfiguráció részeként. Ez arra utasítja a Hugo-t, hogy használja a HTML, CSS és egyéb stílusokat, amelyeket a Tale téma tartalmaz.

   téma = "mese"

Oldalak hozzáadása a webhelyéhez

A tartalmat bármilyen formátumban megírhatja, amelyet Hugo elfogad. A Hugo ezután automatikusan HTML-fájlokká konvertálja a fájlokat, amikor kiszolgálja őket a felhasználónak. Ez gyorsítja a felépítést és a telepítést is. Ez a példa használni fogja Markdown, egy egyszerű szöveges nyelv, mint a tartalom formátuma.

A Markdown-t többnyire egyszerű angol nyelven írhatja, néhány hozzáadott szimbólummal a formázás megadásához. Ez magában foglalja a címsorok jelölésére szolgáló szimbólumok hozzáadását, a félkövér szavakat, vagy bármely más alapvető formázást, amelyre szüksége lehet.

Ha új aloldalt vagy bejegyzést szeretne hozzáadni webhelyéhez, új Markdown fájlt kell hozzáadnia a webhelyhez tartalom mappát. Minden bejegyzéshez vagy oldalhoz saját Markdown fájl tartozik.

1. Nyissa meg a tartalom mappát a Hugo projekten belül. Hozzon létre egy új Markdown fájlt myFirstPost.md.
2. Nyissa meg a fájlt bármely szövegszerkesztőben, például a Notepad++-ban vagy a Visual Studio Code-ban.
3. A fájl tetején adjon hozzá néhány metaadatot. Ez fontos információkat tartalmaz a bejegyzéssel kapcsolatban. Az Ön által használt téma bizonyos módon formázza ezt az információt az oldalon.

   
   szerző: "A neved"
   cím: "Első bejegyzésem"
   dátum: "2022-05-17"
   

4. A metaadatok hozzáadása után megkezdheti a tartalom hozzáadását a Markdown segítségével.

   Ez van a legelső bejegyzésem a Hugo weboldalamon!
   A Hugo témát használják számáraez Az oldal neve Tale.
   Azt van nagyon egyszerű telepíteni és Beállítás.
   # Alcím
   Ez van némi tartalom.
   # Egy másik alcím
   Ez van több tartalom.

5. Nyugodtan adjon hozzá további leértékelési fájlokat, hogy további oldalakat adjon webhelyéhez.

A Hugo webhely helyi futtatása és tesztelése

Webhelye futtatásához használja a hugo szolgálni parancs.

1. Nyisson meg egy terminált vagy parancssort.
2. Keresse meg a Hugo projekt gyökérmappáját.
3. Futtassa a hugo szolgálni parancs:

   hugo szolgálni

4. Várja meg, amíg a webhely befejezi az indítási folyamatot. Ha ez megtörtént, a terminál kinyomtat egy üzenetet arról, hogy melyik helyi címről érheti el a webhelyet. Általában ez http://localhost: 1313/.
5. Nyisson meg egy webböngészőt, és lépjen be http://localhost: 1313/, vagy a terminál által megadott címre. Látni fogja a Hugo webhely főoldalát.
6. Az oldalon minden leértékelési fájlhoz tartozó bejegyzések listája lesz. Ebben az esetben két leírófájl van tartalommal feltöltve. Ez magában foglalja a myFirstPost.md oldalt is, amelyet korábban készített. Tartalmaz egy új bejegyzést is, a bananaCakeRecipe.md.
7. Kattintson a címsor hivatkozására az egyik előnézeten. Ez az adott bejegyzés teljes oldalára viszi.

Hugo webhelyének tárhelye

A Hugo segítségével egy statikus webhely létrehozása és működtetése egyszerű és gyors. Használhat és konfigurálhat előre elkészített témákat, és tesztelés céljából helyileg futtathatja Hugo webhelyét. Tartalmi oldalakat is hozzáadhat webhelyéhez a Markdown segítségével.

Miután létrehozta Hugo webhelyét, elkezdhet többet megtudni a tárolásáról. Számos ingyenes webhelytárolási lehetőség közül választhat, például Dropbox, Google Drive vagy OneDrive.

Ingyenes webhelytárhely beszerzése a Dropbox, a Google Drive vagy a OneDrive segítségével

Olvassa el a következőt