Jak hostit statický web React s kontaktními formuláři zdarma

TLDR: můžete generovat web pomocí statických nástrojů pro generování webových stránek, jako jsou gatsbyjs, hostovat je zdarma na stránkách GitHub nebo firebase s HTTPS a přesměrování CloudFlare non-www na www. Kontaktní formulář lze snadno nastavit bez serverového kódu Formspree.

Před chvílí jsem se rozhodl vytvořit webovou stránku v javascriptu. Nechtěl jsem používat PHP a WordPress, jako obvykle pro jednoduchý prezentační web. Moje první volba byla nějaký javascriptový rámec na straně serveru pro nodejs (například sailsjs). Nechtěl jsem si stavět vlastní VPS, abych provozoval nodejs, takže bych musel platit za nějakou platformu, jako je Heroku. Ve srovnání se standardním hostingem PHP, kde mohu hostit web za 20 babek ročně, je však stále trochu drahý. Proto jsem se rozhodl postavit statický web a najít způsob, jak ho hostit zdarma, a to i pomocí kontaktních formulářů.

Technologie

Můžete pouze použít statické soubory HTML / CSS / JS, ale doporučuji použít statický generátor webových stránek, abyste mohli používat složitější funkce hned po vybalení. Existuje spousta možností. Někteří z nich:

  • gatsbyjs
  • next (má podporu statického exportu od verze 3.0)
  • nuxt (vue.js)
  • harfa
  • hexo (rámec blogu)

Můj vlastní osobní web je vytvořen pomocí gatsbyjs. www.mirokoczka.com (úložiště GitHub)

Kontaktní formulář

Kontaktní formuláře lze snadno vytvořit pomocí Formspree. Stačí změnit atribut akce formuláře na

https://formspree.io/your@email.com

a každý vstup s polem „jméno“ bude odeslán na váš e-mail. Takže váš formulář bude vypadat asi takto:

              

Můžete styl, jak chcete. Nezapomeňte nejprve potvrdit svou e-mailovou adresu. Více funkcí a dokumentace najdete na webových stránkách Formspree.

Hosting

Nyní budeme muset hostit naše statické soubory. Toto jsou pro mě dva zřejmé tipy pro hostování:

  1. Firebase
  2. Stránky GitHub

Pokud můžete svůj zdrojový kód zveřejnit (nebo již za účet GitHub platíte), můžete použít stránky GitHub. Nebo můžete použít bezplatný plán Firebase. Nebudu se zabývat podrobnostmi o jednom z nich, protože si můžete přečíst vše v jejich dokumentaci. Hostingové dokumenty Firebase, stránky Github.

Přesměrování vlastní domény, HTTPS a non-www na www

Pravděpodobně chcete, aby byl váš provoz přesměrován

https://www.yourwebsite.com

ze všech ne-https a non-www adres. K tomu použijeme CloudFlare. Nejprve nastavte svůj účet CloudFlare a přidejte svůj web. Poté nasměrujte DNS své domény na CloudFlare, zapněte režim FULL SSL a přidejte to do pravidel stránky.

A je hotovo. Máte statický web s kontaktním formulářem nasazeným do cloudu a poskytujícím ho https zdarma. Můžete také přidat nepřetržitou integraci svých sestav verzí s Travis-ci nebo Circle-ci, jak jsem to udělal zde.

Dejte nám vědět v komentářích, pokud chcete, abych se podrobněji věnovala některým z těchto témat a pokud budete mít jakýkoli dotaz, rád vám odpovím. Nezapomeňte mě sledovat pro další články. (většinou o JavaScriptu a Angular)