Vytvorte si bezplatný blog pre vývojárov pomocou aplikácie Hugo

Úloha Huga
Po dlhom hľadaní a študovaní som sa rozhodol pre moj blog použiť Huga. Hugo je generátor statických stránok s otvoreným zdrojovým kódom. Generátor statického webu vytvorí webovú stránku iba raz, v okamihu, keď vytvárame alebo upravujeme nový obsah.
Statická webová stránka nám poskytne 100% kontrolu nad našim obsahom a webovým dizajnom. Pretože Hugo je predovšetkým o statickej webovej stránke, má menej bezpečnostných problémov. Na strane servera nebeží žiaden backend. Nie je spustené ani len PHP. Nič.
Vďaka tomu je statická webová stránka celkom odolná proti narušeniu bezpečnosti.
Používanie Huga
Ako už bolo spomenuté, Hugo má otvorený zdrojový kód a dá sa nainštalovať pomerne ľahko. Ak používate Mac (ako ja), môžete Huga nainštalovať pomocou aplikácie Homebrew:
Homebrew & Git
Ak nemáte nainštalovaný Homebrew, môžete ho nainštalovať pomocou::
|
|
Uistite sa, že je všetko aktuálne a nainštalujte si Git
|
|
Hugo
Inštalácia
Nainštalujte Huga pomocou Homebrew
|
|
Po dokončení inštalácie môžete zadať príkaz:
|
|
Aby bola inštalácia úspešná, musíte vidieť niečo ako:
Vytvorenie webovej stránky
|
|
Úloha by sa mala ukončiť bez mihnutia oka. Príkay vytvorí nový adresár. Prejdite do tohto adresára pomocou príkazu:
|
|
Štruktúra adresárov
Spustenie generátora hugo new site
z príkazového riadku vytvorí adresárovú štruktúru s nasledujúcimi prvkami:
|
|
Pre nás je najdôležitejší súbor config.toml
, kde musíme špecifikovať všetky naše nastavenia.
Používanie témy
Pretože chceme tráviť všetok voľný čas so svojimi rodinami a už pracujeme viac ako osem hodín denne, je použitie témy tou najlepšou voľbou na začiatok. Osobne som strávil niekoľko hodín hľadaním najlepšej témy blogu pre mňa. Napokon som sa rozhodol pre CodeIT tému.
Najskôr som skúsil použiť tému LoveIT, ale táto téma sa už neudržuje a zistil som, že CodeIT áno. Existuje veľa tém, ktoré sú takmer rovnaké, či už s malými alebo väčšimi zmenami, ale táto sa mi páči najviac. Ako som teda tému použil pre moje potreby?
Pretože som chcel mať svoj kód hostovaný na Githube a vy určite chcete tiež, musíte najskôr inicializovať úložisko git.
|
|
Z úložiska CodeIT urobte submodul nášho adresára::
|
|
Príkaz git submodule add vytvorí priečinok CodeIT v priečinku /themes
a vytvorí súbor .gitmodules
, ktorý obsahuje:
|
|
Teraz máme tému načítanú a na jej použitie stačí upraviť súbor .config.toml
.
Tu je základný súbor .config.toml
na testovanie našej témy:
|
|
Lokálne spustenie webovej stránky
.Scratch
dôrazne sa odporúča pridať parameter --disableFastRender
do príkazu hugo serve
pre živý náhľad stránky, ktorú upravujeme.Spustite pomocou nasledujúceho príkazu:
|
|
Ak je všetko v poriadku, uvidíte:
|
|
Prejdite na adresu localhost:1313 a pozrite si svoju bežiacu stránku.

Pridanie prvého príspevku
Nový obsah môžete vytvoriť príkazom:
|
|
Príkaz vytvorí súbor blog-post-1.md
v priečinku /content/posts
.
Podľa potreby upravte obsah nového súboru. Uložte a zatvorte súbor a Hugo automaticky zistí zmenu novo pridaného blogového príspevku:
Napríklad:
|
|

Keď máte web presne taký, aký ho chcete, zabite démonový server pomocou kombinácie klávesov [Ctrl] + a vytvorte web pomocou príkazu (spusteného z koreňového adresára):
|
|
Stránka sa veľmi rýchlo vytvorí a vytvorí nový verejný priečinok vo vnútri koreňového adresára dokumentu. Nahrajte tento priečinok na svoj hosting a máte funkčnú stránku.
Záver
A to je pre začiatok všetko. Takto jednoducho je možné vytvoriť staticku stránku pomocou Huga. Ak sa vám podarilo prejsť celým týmto príspevkom, tak gratulujem! V nasledujúcom blogovom príspevku sa budem venovať tomu, ako získať zadarmo hosting blogu pomocou služby Netlify.
Netlify poskytuje služby nepretržitého nasadenia, globálne CDN, ultrarýchle DNS, SSL jedným kliknutím, rozhranie založené na prehliadači, CLI a mnoho ďalších funkcií pre správu nášej statickej web stránky pomocou Huga.