Как да хостваме статичен уебсайт React с формуляри за контакт безплатно

TLDR: можете да генерирате уебсайт със статични инструменти за генериране на уебсайтове, като gatsbyjs, да го хоствате безплатно на GitHub-страници или firebase с HTTPS и CloudFlare без www към www пренасочване. Формата за контакт може да бъде лесно инсталирана без код от страна на сървъра Formspree.

Преди малко реших да създам уебсайт в javascript. Не исках да използвам PHP и WordPress, както обикновено правя за обикновен уебсайт за презентации. Първият ми избор беше някаква JavaScript рамка от страна на сървъра за nodejs (като sailsjs). Не исках да създавам собствен VPS, за да изпълнявам nodejs, така че ще трябва да платя за някаква платформа като Heroku. Все пак това е малко скъпо в сравнение със стандартен PHP хостинг, където мога да хоствам сайт за 20 долара годишно. Затова реших да създам статичен уебсайт и намерих начин да го хоствам безплатно, дори и с формуляри за контакт.

технология

Можете просто да използвате статични HTML / CSS / JS файлове, но бих препоръчал да използвате статичен генератор на уебсайтове, за да можете да използвате по-сложни функции извън кутията. Има много възможности. Някои от тях:

  • gatsbyjs
  • следващ (има статична поддръжка за износ от версия 3.0)
  • nuxt (vue.js)
  • арфа
  • хексо (блог рамка)

Моят собствен личен уебсайт е изграден с помощта на gatsbyjs. www.mirokoczka.com (хранилище на GitHub)

Форма за контакти

Формите за контакт могат лесно да се правят с Formspree. Можете просто да промените атрибута за действие във формата

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

и всеки вход с полето „име“ ще бъде изпратен на вашия имейл. Така че формулярът ви ще изглежда така:

              

Можете да го стилизирате, колкото искате. Не забравяйте първо да потвърдите имейл адреса си. Можете да намерите още функции и документация на уебсайта на Formspree.

Хостинг

Сега ще трябва да хостваме нашите статични файлове. Това са двете очевидни хостинг избори за мен:

  1. Firebase
  2. Страници на GitHub

Ако можете да имате своя изходен код публичен (или вече плащате за сметка в GitHub), можете да използвате GitHub-страници. Или можете да използвате безплатен план на Firebase. Няма да навлизам в подробности за нито едно от тях, защото можете да прочетете всичко в тяхната документация. Документи за хостинг на Firebase, Страници на Github.

Персонализиран домейн, HTTPS и пренасочване без www към www

Вероятно искате вашият трафик да бъде пренасочен към

https://www.yourwebsite.com

от всички не-https и не-www адреси. За това ще използваме CloudFlare. Първо настройте вашия акаунт в CloudFlare и добавете уебсайта си. След това насочете DNS на домейна си към CloudFlare, включете ПЪЛЕН SSL режим и добавете това към правилата на вашата страница.

И това е направено Имате своя статичен уебсайт с формуляр за контакт, разположен в облака и го обслужвате безплатно с https. Можете дори да добавите непрекъсната интеграция за вашите версии на версии с Travis-ci или Circle-ci, както направих тук.

Уведомете ме в коментарите, ако искате да се запозная по-задълбочено с някои от тези теми и ако имате някакъв въпрос, ще се радвам да отговоря. Не забравяйте да ме следвате за още статии. (най-вече за JavaScript и Angular)