Nový blog živě ve 30 minutách

Už nějaký čas jsem si pohrával s myšlenkou založit si takový “blogovací občasníček”. Jelikož jde obsahem o netechnické téma, tak to tady nebudu rozmazávat a podívám se jenom na technologické aspekty: co to znamená, založit si v dnešní době blog.

Blog ve 30 minutách

Vždycky, když vidíte podezřele malé číslo, má to svoje ale. Nejinak je tomu tady. Pokud však máte určité předpoklady (znalosti, zkušenosti, nástroje atd.), tak to číslo je reálný. Samozřejmě, počítáme s tím, že to dělá profík. 💪 (Takže doma to raději nezkoušejte. 🤭)

Definition of Done

Aby bylo jasné, o čem se bavíme — co by (po těch hypotetických) 30 minutách mělo být hotovo:

  • blog by měl být veřejně online,
  • měl by mít svoji doménu,
  • měl by být zapezpečený přes SSL.

A jen pro úplnost — bude se jednat o Jamstack.

A všechno by mělo být zdarma! (Teda, kromě domény. 😈)

Předpoklady

Abychom se vešli do zmíněného limitu, je potřeba mít svoji dílnu vybavenou nutnými nástroji — pokud nám něco z toho chybí a budeme si to teprve zařizovat, tak nám celkový čas odpovídajícím způsobem naroste.

Takže, budeme potřebovat:

  • účet u nějakého registrátora domény,
  • účet na nějaké public Git repository,
  • učet u nějakého poskytovatele CDN.

Co se týká znalostí a praxe je potřeba:

  • umět pracovat s Gitem na úrovni běžného kontributora (tj. clone, commit & push),
  • umět pracovat s nějakým Static Site Generatorem.

Nástroje

Výběr mých nástrojů je čistě subjektivní, založený na dobré zkušenosti, osobních preferencích a minimálním research. Všechny jsou “rock solid” a do velké míry zaměnitelné.

Začnu statickým generátorem. Blog SoftWare Samuraj píšu a generuju pomocí Hugo. Je napsaný v Golangu (pro který mám slabost), je rychlý jak sviňa, má vlastní templates (taky v Golangu) a použití je triviální. Zkrátka a dobře… pro nový blog jsem o ničem jiném ani neuvažoval.

Pokud volba statického generátoru není důležitá, volba Git repository už může být spřažená s určitým poskytovatelem CDN. Pokud má váš statický generátor stejně dobrou dokumentaci jako Hugo (viz Hosting & Deployment), není na škodu si v tom udělat jasno.

Pro Jamstack je totiž důležitá CI/CD, která je buď integrovaná v Git repository, poskytuje ji CDN provider, nebo je v některých případech úplně externí. Já jsem zvolil jednoduchost a osvědčenost: GitLab. Jednoznačně nejlepší CI/CD na trhu (GitLab Pipelines) a zároveň i podpora mnou zvoleného CDN poskytovatele.

U CDN jsem chtěl něco jednoduchého, co splní moje požadavky:

  • custom domény,
  • automatická podpora Let’s Encrypt,
  • a podpora daného CI/CD.

Nijak jsem to nezkoumal a vzal první vyhovující: Render.

Registrace domény

Tady to nebudu nijak detailně popisovat, protože jednak v tom nemám přehled a jednak si myslím, že se jednotlivý registrátoři dost liší v nabízených službách.

Můj registrátor má pro mne dvě stěžejní věci:

  • novou doménu si můžu registrovat online a hned ji zaplatit kartou,
  • umožňuje mi online spravovat DNS záznamy.

Nic víc nepotřebuju. Takže:

  1. Ověřil jsem si dostupnost domény.
  2. Doménu zaregistrovat a zaplatil.
  3. Za 10-15 minut byla doména online. 👍

Vygenerování lokálni site

Tady budu jenom parafrázovat, co říká Hugo ve svém Quick Start:

Vytvoření nové site:

hugo new site stepnibezec

Přidání nového tématu:

git init
git submodule add https://github.com/sw-samuraj/vienna.git themes/vienna
echo 'theme = "vienna"' >> config.toml

Vytvoření prvního článku:

hugo new 2020/stepni-bezec.md

Trochu poeditovat obsah (a odstranit z hlavičky proměnnou draft: true):

A vyzkoušet, že se nám to správně vygeneruje:

hugo server

Push to remote repository

Lokální Git repository už jsme si inicializovali (v části přidání nového tématu). Teď je potřeba všechny Hugem vygenerované soubory pushnout do vzdálené repository.

Založíme si na GitHubu, nebo GitLabu (obojí je podporováné Renderem) novou repository a lokální změny tam nahrajeme:

git remote add origin git@gitlab.com:sw-samuraj/stepnibezec.git
git add .
git commit -m "Initial import"
git push -u origin master

Založení statických stránek na Renderu

Pokud si čerstvě zakládáte účet na Renderu, jste vyzváni, ať si slinkujete GitHub, či GitLab, či oboje. Pak si vytvoříte New Web Service typu Static Site. Všechno je to intuitivní a na pár kliknutí. 👍

Potřebná konfigurace pak vypadá takto:

Render, konfigurace statických stránek

Render, konfigurace statických stránek

Velkou výhodou tady je, že Render dělá CI/CD out-of-the-box, takže to nemusíte nijak dále konfigurovat.

Přidání custom domény

Na stránce Settings vaší nové služby ve Renderu je dole sekce Custom Domains. Opět je to intuitivní, ale kdyby se v tom někdo ztrácel, je to přehledně zdokumentované.

Jakmile přidáme u našeho registrátora domény potřebné DNS záznamy, ještě se sem jednou vrátíme, abychom je potvrdili tlačítkem Refresh:

Render, konfigurace custom domény

Render, konfigurace custom domény

Přidání DNS záznamů

Tohle může být trochu oříšek — sám to málokdy dám na první dobrou a navíc, různí registrátoři poskytují různé možnosti ohledně DNS záznamů (například ten můj neumožňuje přidávat ANAME a ALIAS záznamy).

Takže, tady je to na vás. Ale trocha experimentování nikoho nezabije (ani nic nerozbijete, zatím 😉). Možná vás bude trochu frustrovat, než se DNS záznamy zpropagují na potřebné jmenné servery a vy si budete moci ověřit svůj úspěch.

Ale nakonec to dobře dopadne… věřte mi.

DNS záznamy

DNS záznamy

Čas otevřít šampáňo a sklízet benefity

Teď zadejte do browseru vaši zbrusu novou adresu a zmáčkněte stopky. Je to tam! 29 minut a 48 sekund. 🤯 Nový blog je na světě!

Opravdu jenom 30 minut? 🤔

Tak, a teď s pravdou ven — opravdu mi to trvalo jenom 30 minut? Čestný pionýrský? Odchovanci woodcraftu nelžou, takže…

Na blogu, který zde popisuju jsem strávil… půl dne. Protože některé věci mi nedají pokoj, dokud nejsou správně tak, jak mají být:

  • Ladil jsem Hugo konfiguraci
  • Ladil jsem téma/šablonu:
    • udělal jsem si fork,
    • fixoval jsem to-be-depracated Hugo funkce,
    • trošku jsem originál přiohnul svému vkusu,
    • pošteloval CSS,
    • vyrobil favicony,
    • natvrdo jsem téma přepnul do čestiny,
    • fixnul jsem nefunkční odkazy na tagy,
  • Založil jsem Twitter účet: @StepniBezec
  • Založil jsem Facebook stránku: @StepniBezec
  • A napsal jsem první článek.

Nicméně to všechno už je takové provozní blogování. Ten čistý čas — i když jsem ho neměřil — od prvního hugo příkazu, k zobrazení blogu na vlastní doméně, bych opravdu odhadnul na zhruba těch 30 minut.

Ale o to ani nejde. Vlastně mě překvapilo a potěšilo, jak snadné a rychlé je založit si vlastní blog, postavený a provozovaný na moderních technologiích. 👍

Související články

🏷️ blogging