Programio

Netlify: hosting statických stránek

Na Netlify.com jsem narazil nedávno, když jsem hledal, kde bych mohl hostovat své statické stránky, protože mi GitHub Pages přestávaly stačit. V článku vám zkusím popsat, co vám taková služba, která se zaměřuje výhradně jen na statické weby, může nabídnout a proč je to lepší než běžný hosting, na který nahráváme obsah přes ef-té-pé.

Abychom si ujasnili terminologii: statický web je web, pro jehož běh není potřeba žádný serverový jazyk jako třeba PHP. V podstatě se jedná o již vygenerované neměnné HTML stránky, jako se kdysi dělaly třeba ve FrontPage, blahé paměti. Proč byste v dnešní době neměli používat serverový jazyk, když ho nabízí i nejlevnější hosting za deset korun měsíčně? Důvody si můžete přečíst třeba právě na Netlify a tam si také můžete přečíst seznam deseti nejpoužívanějších nástrojů na vytváření statických webů, o jednom z nich, Hexo, jsem i já napsal sérii článků.

Netlify je potom něco jako GitHub Pages na steroidech. Začátek je stejný:

  1. Dostaňte kód webu do nějakého repozitáře (to už stejně máte, že?) na GitHubu nebo třeba na BitBucket.
  2. Přihlašte se na Netlify, vytvořte nový projekt a slinkujte ho se svým repozitářem na GitHubu/BitBucketu. V kroku “Configure …” nechte výchozí hodnoty.
  3. There is no step three.

V tuto chvíli se Netlify stáhne z repozitáře soubory, vytvoří nějakou náhodnou subdoménu r-daneel-olivaw.netlify.com a na této adrese máte dostupný svůj web. Ani to nebolelo, že? V administraci si můžete místo r-daneel-olivaw zvolit libovolné jiné jméno. V tuto chvíli kdykoliv pushnete do masteru nějakou změnu, automaticky se promítne na webu – každý váš push vyvolá nový deploy u Netlify. Ten je navíc atomický. Nestane se vám, jako u nahrávání obsahu přes FTP, že během nahrávání je web v nekonzistentním stavu, protože už se nahrály html soubory, ale obrázky ještě ne, například.

Ok, co dál?

  • Vlastní doména: toto je samozřejmost. Pokud máte vlastní doménu, můžete projekt u Netlify nastavit tak, aby se zobrazoval na této doméně, např. tento blog je na doméně programio.havrlant.cz, ale je hostován u Netlify. Postup si přečtěte v manuálu. Není to úplně triviální, protože musíte hrabat do nastavení DNS, což může skončit katastrofou, ale s tím se nedá nic dělat.
  • HTTPS: Váš web by měl samozřejmě běžet na HTTPS, i když jde jen o statický web. Netlify využívá letsencrypt.org, což jednoduše řečeno pro vás znamená, že v administraci jednou kliknete na tlačítko a váš web běží na https, podruhé kliknete a http se automaticky přesměruje na https. Https funguje i na vlastních doménách, což třeba GitHub pages aktuálně nepodporují.
  • Historie změn: Cože? Publikovali jste něco špatného a chcete se rychle vrátit k předchozí verzi? Není problém, v administraci se můžete vrátit se kterémukoliv staršímu deployi, který jste provedli. Nemusíte provádět žádný revert v repozitáři. Opět – jeden klik a máte na webu verzi z minulého měsíce. Dokonce se můžete podívat i na náhled, jak web v předchozí verzi vypadal.
  • Snippet injection: Typicky když vyvíjíte, nepotřebujete mít v HTML měřicí skripty jako třeba Google Analytics, zatímco na webu je chcete. Netlify vám proto nabízí, že vám při publikaci “injectne” před </body> nějaký vlastní kód.
  • Vlastní build skripty: statický web musí něco vygenerovat, často se používají softy jako třeba zmíněné Hexo. Máte pak dvě možnosti, jak daný web publikovat: buď u sebe vygenerujete celý web a do repozitáře pushnete už vygenerované HTML, nebo do repozitáře pushnete zdrojové kódy (například v Markdownu) a necháte Netlify, aby web vybuildilo samo. Při zakládaní projektu máte možnost zapsat nějaký skript, který bude spuštěn při každé publikaci webu. Pokud používáte hexo, můžete tam napsat skript hexo generate a při každém pushi se na servrech Netlify spustí Hexo a až tam se vygeneruje finální podoba webu. GitHub pages mají něco podobného, akorát podporují pouze jeden “redakční systém”, Jekyll. U Netlify můžete použít libovolný RS, klidně i vlastní. Můžete si napsat vlastní generátor a jako příkaz pro generování webu můžete napsat npm install && node app.js a spustí se váš skript napsaný v NodeJS.

Toto je výčet těch nejzákladnějších věcí, které asi použije skoro každý a Netlfiy je poskytuje i ve free verzi. Netlify toho umí samozřejmě mnohem více, jen stručně: vlastní 404 stránky, vlastní rewrity URL, password protection, prerendering pro single page aplikace, CLI nástroj a mnoho dalšího.

Co se týče trafficu, žádný limit jsem na webu nenašel a na můj dotaz mi odpověděli, že když přesáhnu 1 TB / měsíc, tak už po mně asi budou chtít, ať přejdu z free účtu na nějaký placený účet :-). Chcete-li příklad nějakého webu, který jede na Netlify, koukněte na lodash, dokumentaci asi nejpoužívanější JS/NodeJS knihovny.

Máte-li tak nějaký statický obsah a nevíte-li, kam s ním, zkuste Netlify. Je to jednoduché a funguje to. Co víc chtít?

…a hlavně mi netvrďte, že existuje 150 dalších služeb, které tohle všechno nabízí :-P