How to host static React website with contact forms for free
TLDR: you can generate a website with static website generator tools such as gatsbyjs, host it for free on GitHub-pages or firebase with HTTPS, and CloudFlare non-www to www redirect. A Contact form can be easily setup without server-side code Formspree.

A while ago I decided to build a website in javascript. I didn’t want to use PHP and WordPress as I usually do for a simple presentation website. My first choice was some server side javascript framework for nodejs (such as sailsjs). I didn’t want to build my own VPS to run nodejs, so I would need to pay for some platform like Heroku. However, it is still a little expensive compared to a standard PHP hosting, where I can host a site for 20 bucks a year. So I decided to build a static website and found a way to host it for free, even with contact forms.
Technology
You can just use static HTML/CSS/JS files, but I would recommend using static website generator so you can use more complex features out of the box. There are plenty of options. Some of them:
My own personal website is built using gatsbyjs. www.mirokoczka.com (GitHub repository)
Contact form
Contact forms can be easily done with Formspree. You can just change the form action attribute to
https://formspree.io/your@email.comand every input with the “name” field will be sent to your email. So your form will look like something like this:
<form action="https://formspree.io/your@email.com"
method="POST">
<input type="text" name="name">
<input type="email" name="_replyto">
<input type="submit" value="Send">
</form>You can style it however you want. Remember to confirm your email address first. You can find more features and documentation on Formspree website.
Hosting
Now, we will need to host our static files. These are the two obvious hosting picks for me:
If you can have your source code public (or you already pay for GitHub account) you can use GitHub-pages. Or you can use Firebase free plan. I won’t go into details about either one of these because you can read everything in their documentation. Firebase Hosting Docs, Github Pages.
Custom domain, HTTPS, and non-www to www redirect
You probably want your traffic to be redirected to
https://www.yourwebsite.comfrom all non-https and non-www addresses. We will use CloudFlare for this. First setup your CloudFlare account and add your website. Then point your domain DNS to your CloudFlare, turn on FULL SSL mode and add this to your page rules.

And it’s done. You have your static website with contact form deployed to the cloud and serving it with https for free. You can even add continuous integration for your release builds with Travis-ci or Circle-ci as I have done here.
Let me know in the comments if you want me to go more in-depth to some of these topics and if you’ll have any question I will be glad to respond. Don’t forget to follow me for more articles. (mostly about JavaScript and Angular)
