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::

1

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

Uistite sa, že je všetko aktuálne a nainštalujte si Git

1
2

brew update
brew install git

Hugo

Inštalácia

Nainštalujte Huga pomocou Homebrew

1

brew install hugo

Po dokončení inštalácie môžete zadať príkaz:

1

hugo version

Aby bola inštalácia úspešná, musíte vidieť niečo ako:

Vytvorenie webovej stránky

1

hugo new site example.com

Úloha by sa mala ukončiť bez mihnutia oka. Príkay vytvorí nový adresár. Prejdite do tohto adresára pomocou príkazu:

1

cd example.com

Štruktúra adresárov

Spustenie generátora hugo new site z príkazového riadku vytvorí adresárovú štruktúru s nasledujúcimi prvkami:

1
2
3
4
5
6
7
8

.
├── archetypes
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes

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.

1

git init

Z úložiska CodeIT urobte submodul nášho adresára::

1

git submodule add https://github.com/sunt-programator/CodeIT.git themes/CodeIT

Príkaz git submodule add vytvorí priečinok CodeIT v priečinku /themes a vytvorí súbor .gitmodules, ktorý obsahuje:

1
2
3

[submodule "themes/CodeIT"]
path = themes/CodeIT
url = https://github.com/sunt-programator/CodeIT.git

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:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

baseURL = "http://example.com/"
defaultContentLanguage = "en"
languageCode = "en"
title = "My New Hugo Site"
theme = "CodeIT"

[params]
  version = "0.2.X"

[menu]
  [[menu.main]]
    identifier = "posts"
    pre = ""
    post = ""
    name = "Posts"
    url = "/posts/"
    title = ""
    weight = 1
  [[menu.main]]
    identifier = "tags"
    pre = ""
    post = ""
    name = "Tags"
    url = "/tags/"
    title = ""
    weight = 2
  [[menu.main]]
    identifier = "categories"
    pre = ""
    post = ""
    name = "Categories"
    url = "/categories/"
    title = ""
    weight = 3

[markup]
  [markup.highlight]
    noClasses = false

Lokálne spustenie webovej stránky

Spustite pomocou nasledujúceho príkazu:

1

hugo serve --disableFastRender

Ak je všetko v poriadku, uvidíte:

1
2
3
4
5
6
7

Built in 105 ms
Watching for changes in /Users/USER/example.com/{archetypes,content,data,layouts,static,themes}
Watching for config changes in /Users/USER/example.com/config.toml
Environment: "development"
Serving pages from memory
Web Server is available at localhost:1313
Press Ctrl+C to stop

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:

1

hugo new posts/blog-post-1.md

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:

1
2
3
4
5
6
7
8
9

---
title: 'Blog Post 1'
date: 2021-03-22T12:11:52+01:00
draft: false
---

# Test Header

Test text

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):

1

hugo

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.