So hosten Sie statische React-Website mit Kontaktformularen kostenlos

TLDR: Sie können eine Website mit statischen Tools zum Generieren von Websites wie gatsbyjs erstellen, sie kostenlos auf GitHub-Seiten oder in der Firebase mit HTTPS hosten und CloudFlare ohne WWW-Weiterleitung. Ein Kontaktformular kann ohne serverseitigen Code Formspree einfach eingerichtet werden.

Vor einiger Zeit habe ich beschlossen, eine Website in Javascript zu erstellen. Ich wollte PHP und WordPress nicht wie gewohnt für eine einfache Präsentationswebsite verwenden. Meine erste Wahl war ein serverseitiges Javascript-Framework für Nodejs (wie sailsjs). Ich wollte kein eigenes VPS für die Ausführung von Node-Js erstellen, daher musste ich für eine Plattform wie Heroku bezahlen. Es ist jedoch immer noch ein wenig teuer im Vergleich zu einem Standard-PHP-Hosting, bei dem ich eine Site für 20 Dollar pro Jahr hosten kann. Deshalb habe ich beschlossen, eine statische Website zu erstellen und einen Weg gefunden, diese auch mit Kontaktformularen kostenlos zu hosten.

Technologie

Sie können nur statische HTML- / CSS- / JS-Dateien verwenden, ich würde jedoch die Verwendung des statischen Website-Generators empfehlen, damit Sie komplexere Funktionen sofort verwenden können. Es gibt viele Möglichkeiten. Manche von ihnen:

  • gatsbyjs
  • next (unterstützt statischen Export ab Version 3.0)
  • nuxt (vue.js)
  • Harfe
  • hexo (Blog-Framework)

Meine persönliche Website wird mit gatsbyjs erstellt. www.mirokoczka.com (GitHub-Repository)

Kontakt Formular

Kontaktformulare können einfach mit Formspree erstellt werden. Sie können das Formularaktionsattribut einfach in ändern

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

und jede Eingabe mit dem Feld "Name" wird an Ihre E-Mail gesendet. Ihr Formular sieht also ungefähr so ​​aus:

              

Sie können es stylen, wie Sie möchten. Denken Sie daran, zuerst Ihre E-Mail-Adresse zu bestätigen. Weitere Funktionen und Dokumentationen finden Sie auf der Formspree-Website.

Hosting

Jetzt müssen wir unsere statischen Dateien hosten. Dies sind die zwei offensichtlichen Hosting-Tipps für mich:

  1. Feuerbasis
  2. GitHub-Seiten

Wenn Sie Ihren Quellcode öffentlich haben können (oder bereits für ein GitHub-Konto bezahlen), können Sie GitHub-Seiten verwenden. Oder Sie können Firebase Free Plan verwenden. Ich werde nicht auf Details eingehen, da Sie alles in der Dokumentation lesen können. Firebase-Hosting-Dokumente, Github-Seiten.

Benutzerdefinierte Domain, HTTPS und Weiterleitung von Nicht-WWW- zu WWW-Adressen

Sie möchten wahrscheinlich, dass Ihr Datenverkehr weitergeleitet wird

https://www.ihrewebsite.de

von allen Nicht-https- und Nicht-WWW-Adressen. Wir werden CloudFlare dafür verwenden. Richten Sie zuerst Ihr CloudFlare-Konto ein und fügen Sie Ihre Website hinzu. Zeigen Sie dann mit Ihrem Domain-DNS auf CloudFlare, aktivieren Sie den VOLLSTÄNDIGEN SSL-Modus und fügen Sie diesen Ihren Seitenregeln hinzu.

Und es ist geschafft. Sie haben Ihre statische Website mit Kontaktformular in der Cloud bereitgestellt und können diese kostenlos mit https versorgen. Sie können sogar eine fortlaufende Integration für Ihre Release-Builds mit Travis-ci oder Circle-ci hinzufügen, wie ich es hier getan habe.

Lassen Sie mich in den Kommentaren wissen, ob ich auf einige dieser Themen näher eingehen soll und ob Sie Fragen haben, die ich gerne beantworten werde. Vergessen Sie nicht, mir für weitere Artikel zu folgen. (hauptsächlich über JavaScript und Angular)