Znáte to: chcete vytvořit jednoduchou prezentační stránku, pár statických souborů nebo možná jeden jediný. Osobní stránku, landing page nějakého projektu a podobně. Jenomže kam s tím? Aby to bylo bezpečné, spolehlivé a pokud možno neprůstřelné – bezpečné a kapacitně zvládající případnou vysokou zátěž nebo i DoS útoky. A to celé pokud možno zdarma… Odpovědí je kombinace dvou bezplatných služeb: GitHub Pages a CloudFlare.

Naznal jsem, že po několika letech by kovářova kobyla ajťácký valach měl přestat chodit bos a že bych si měl udělat aktuální domovskou stránku na www.rider.cz. A ačkoliv mám k dispozici kdejakou infrastrukturu od vlastních serverů po Microsoft Azure, vydal jsem se právě naznačenou cestou. Moje požadavky byly následující:

GitHub Pages

Většina programátorů zná GitHub jako platformu pro verzování zdrojového kódu a týmovou spolupráci. Nicméně GitHub nabízí i možnost hostingu statických stránek, třeba osobních stránek programátorů nebo softwarových projektů. Pokud stačí statická stránka, je to velice dobrá varianta, protože infrastruktura GitHubu je daleko lepší, než má většina z nás k dispozici. V tomto článku budu popisovat tři možnosti, jak si vytvořit vlastní domovskou stránku na GitHubu (nejsou jediné, přehled najdete v nápovědě):

  1. "Hlavní" stránka uživatele, nativně na adrese username.github.io.
  2. Stránka "projektu" (repozitáře) vytvořená ze složky /docs,  nativně na adrese username.github.io/repository-name.
  3. Publikování celého repozitáře, nativně opět na adrese username.github.io/repository-name.

Hlavní stránka uživatele na adrese username.github.io

Tuto stránku doporučuji vytvořit vždy, protože i když tak neučiníte (a budete využívat ostatní možnosti), stejně tuto adresu budete potřebovat a budete ji – minimálně při testování funkčnosti – využívat. Jinak je vhodná v případě, že potřebujete nějaký jednoduchý web, ale nemáte nebo nechcete použít vlastní doménu.

Stránky na výchozí adrese username.github.io si vytvoříte velice jednoduše: stačí vytvořit repozitář téhož jména. Moje uživatelské jméno na GitHubu je ridercz, takže jsem si založil repozitář jménem ridercz.github.io. Nic dalšího není třeba nastavovat. Obsah tohoto repozitáře bude dostupný na adrese https://ridercz.github.io/ (včetně podpory HTTPS), root na root. Vytvoření nemusí být okamžité, pokud to nefunguje, minutku počkejte.

S repozitářem pracujete standardním způsobem, takže prostě nahrajte soubor index.html a hotovo. Přesně to vidíte v citovaném repozitáři. V mém případě obsahuje jediný soubor, kterým je index.html a který obsahuje META REFRESH přesměrování na mou skutečnou homepage, na adresu https://www.rider.cz/.

Stránka projektu na adrese username.github.io/repository-name

Tato možnost se vám hodí v případě, že chcete vytvořit prezentační stránku projektu, který je hostovaný na GitHubu (repozitář tedy obsahuje kód a další informace) a chcete to udržovat všechno při jednom. Tento postup používám třeba ve svém projektu AutoACME: web https://www.autoacme.net/ je hostován na GitHubu a v repozitáři projektu samého. Chcete-li se vydat touto cestou, postupujte následovně:

  1. Vytvořte v repozitáři svého projektu složku docs.
  2. Do ní nahrajte soubory, které mají být vidět na webu. Tato složka bude rootem webu, takže do ní nejspíš chcete umístit soubor index.html.
  3. V repozitáři klepněte na ikonku Settings a poté najděte sekci GitHub Pages.
  4. V rozbalovacím seznamu Source zvolte možnost master branch /docs folder.
  5. Hotovo. Obsah adresáře bude dostupný na adrese username.github.io/repository-name. Opět platí, že vytvoření nemusí být okamžité, pokud to nefunguje, minutku počkejte.

Vše uvedené (včetně adresy) bude fungovat, i když nemáte svou osobní stránku na username.github.io. Pokud zadáte tuto adresu, server vrátí chybu, že stránka neexistuje. Pokud zadáte adresu včetně repozitáře, vše bude fungovat.

Publikování celého repozitáře na adrese username.github.io/repository-name

Tento postup se hodí, pokud chete mít pro web samostatný repozitář, kde nebude nic jiného. Použil jsem ho pro svou osobní stránku na www.rider.cz, protože jsem si nechtě "zabrat" hlavní stránku s výchozí adresou na doméně github.io, kdybych ji někdy potřeboval. Takže jsem vytvořil nový repozitář jménem HomePage (může se jmenovat jakkoliv).

Dále je postup velmi podobný tomu, co bylo popsáno výše. Tj. nahrajte do repozitáře obsah svého webu – root na root. V Settings ale jako Source zvolte master branch. Stránka bude dostupná na adrese username.github.io/repository-name.

Jak na vlastní doménu

Ve všech výše zmíněných případech můžete web publikovat i na jiné adrese, třeba na vlastní doméně. Pokud tak chcete učinit, musíte provést nastavení na straně GitHubu i na straně DNS.

Nastavení na straně GitHubu je jednoduché – stačí vytvořit v rootu projektu textový soubor jménem CNAME (bez přípony), jehož jediným obsahem bude adresa, na které má být stránka publikována. V mém případě tedy jediným obsahem souboru bude text www.rider.cz. Ve vlastním zájmu nepoužívejte "holou doménu" (např. rider.cz), neboť by vám to výrazně zkomplikovalo další nastavení.

Postup nastavení na straně DNS serveru závisí na tom, jaký server nebo poskytovatele používáte. Ať už je to jakkoliv, potřebujete vytvořit záznam typu CNAME, který bude zdrojovou adresu (v mém případě www) překládat na username.github.io, tj. v mém případě ridercz.github.io. Neřešíte, jestli je za lomítkem rozlišovací název repozitáře nebo ne, alias je vždy na adresu bez lomítka (ono to v DNS ani jinak nejde, logicky). GitHub si požadavky routuje sám právě pomocí záznamu v CNAME souboru.

A je hotovo. Jakmile se změny v DNS propíší (což může trvat několik sekund i několik dnů, v závislosti na nastavení TTL na serveru), budou stránky fungovat na nové adrese.

Stránka musí mít vždy právě jednu adresu, soubor CNAME nesmí obsahovat víc než jednu hodnotu. Pokud chcete, aby byl web dostupný na více adresách (třeba ve verzi s www na začátku i bez něj), musíte si přesměrování zajistit mimo GitHub Pages, třeba na vlastním serveru nebo u poskytovatele hostingových služeb, nebo třeba pomocí CloudFlare.

GitHub vám zároveň automaticky a zdarma zajistí certifikát od certifikační autority Let's Encrypt a zpřístupní váš web přes HTTPS.

CloudFlare

CloudFlare nabízí celou řadu užitečných služeb, například:

To vše nabízí zdarma. Má i placené programy, které toho umí víc, ale pro naše nároky bude stačit ten bezplatný.

Jako první krok musíte převést svou doménu na DNS servery CloudFlare, což bude vyžadovat i změnu u vašeho registrátora. Na straně CloudFlare je na to hezký a dle mého názoru naprosto blbuvzdorný průvodce. Na straně svého registrátora domény si s tím musíte poradit sami. CF podporuje i DNSSEC a ačkoliv je tato technologie dle mého názoru mrtvě narozené dítě, můžete to nastavit.

V CloudFlare potom nastavte patříčné DNS záznamy. Zde vidíte moje nastavení:

Screenshot CloudFlare

Ikonka oblaku v pravé části pak určuje, jak se bude s DNS záznamem zacházet. Pokud je oranžová (jako na obrázku), budou požadavky směrovány na servery CloudFlare. Pokud na ni kliknete, obláček zešediví, šipka ho obejde a CloudFlare bude působit jenom jako obyčejný DNS server. My chceme využívat služeb CloudFlare (přidání HTTPS), takže obláček zůstane oranžový.

V sekci Crypto můžete nastavit další podrobnosti.

Prvním je režim, v ajkém bude podpora HTTPS fungovat:

Dále pak můžete zaškrtnout Always Use HTTPS, čímž způsobíte, že se všechny požadavky na nešifrovanou (HTTP) verzi automaticky přesměrují na šifrovanou (HTTPS).

Konečně můžete nastavit i parametry HTTP Strict Transport Security. Pokud nevíte co to je, podívejte se na záznam mé přednášky HTTPS už máte, tak ještě aby vám k něčemu bylo.

Nevýhody tohoto řešení

Mnou popisované řešení má samozřejmě i nevýhody a není vhodné ve všech případech.