DevAMountain As a developer you can create and host a static site for free and forget about all the infrastructure issues and the interesting part is that it isn’t so static!
Suppose you are a developer or someone who knows the basics of git.
Suppose you want to create a web application where the primary aspect is not complex server side logic but content, exactly like a blog!
Suppose you don’t want to struggle with hosting issues (security, system updates, server configurations).
Suppose you would like it to be ready to scale if needed (special bonus: auto scaling without even configuring it).
Suppose you want to reduce the costs to…zero (at least until you hit such a traffic volume that you’ll be happy to pay)!
Well, you can! Read further and discover how.
NOTICES:
- this is not a code-technical post. You can find a lot of technical articles for any of aspects we will discuss. This article serves as a guideline and to let you know what you can build today with great benefits
- why a bonfire photo? Come on, it’s obvious: since i don’t have to care about infrastructure issues i can go out in the wild and enjoy outdoor fire :)
Project’s goals
I want to create devamountain, a blog where i can add contents and since i’m a developer it would be beautiful to write articles as markdown files and use git as versioning and deploying tool!
I want it to be costless and especially i want to avoid headaches due to infrastructures.
Project’s results
- a simple way to add articles in a very comfortable way with an excellent workflow (write markdown files extensible with html code if needed, commit them, push them to remote repo and see everything deployed in few instants)
- static site but dynamic contents and behaviours like:
- comments using Disqus platform
- contact forms
- custom email addresses to receive and send emails
- additional user data saved to datastore (user’s email but currently i’m not using them)
- content served via CDN with great speed and reliability and under https (can migrate that content in the future easily to another hosting platform if needed)
- capability to serve an incredibly scalable amount of traffic
All of this for free…OMG!
Tasty ingredients
- static site generation (Hugo is what i choosed)
- static site hosting (Netlify)
- server side logic hosting (Google Cloud Functions)
- mail delivery and inbounding with custom domain (Mailgun)
- recaptcha (Google Recaptcha)
- comments (Disqus)
- optional ingredients (recommended but optional)
- versioning tool (git, that’s obvious)
- repository hosting (bitbucket was my choice, but gitlab or github are the same)
- datastore if want (Google cloud datastore)
TOTAL COST: 0$
Well, not exactly, you have still to buy a domain and pay for it :D
Mixing ingredients
You can create your static content the way you like. You may create a SPA using React, Vue, or by editing html, js and css files by hand.
Or, as it was my case, you can use a static site generator. I choosed Hugo since it is a robust platform, based on a robust language and as a developer it is quite easy to customize.
That said, after installing Hugo and customizing a theme (it is easier that with Wordpress!) you can build your static content.
Deploying it on Netlify it’s really easy and that gives you the possibility to deploy your static content via git using one of the most known repository hosting provider (Bitbucket, Gitlab, Github).
At this point you can follow instructions on how to add a custom domain and voilà, you have a static site generated and published simply via a git push command and the site is served through a CDN and under https…all for free, all without headaches.
That is so impressive. And you don’t have to think anymore about common infrastructure issues (certificates renewal, wordpress updates, security issues on your server, database management and so on).
Add spicy dynamics
Ok that was already good enough for me but there may be still the need to provide something dynamically.
Ok commenting systems are a breeze to configure on Hugo (they are already integrated) so go for Disqus.
But what about simple contact form? Well, there are some out-of-the-box working solutions for that like formspree.io but i wanted to do something where i have more control, something like server side logic.
Here you are Google Cloud functions. I did create a function that accept my contact form content (safely under Recaptcha v3) and send me an email with the form content. I was able to integrate Mailgun in a few minutes. And what was best is that Mailgun let you even receive emails on you custome domanins. All of these for free :D (well the free tier is exceptionally generous).
And to let the code be more interesting, i was able to save user’s email to Google Cloud datastore.
So now i’m sure that if i need to add some server side logic, i can easily throw some Cloud Functions and manage that content too.
And it costed me only the cost of the domain reservation…that was crazy.
Final considerations
I’m a java developer and i build complex java web applications. I often have to struggle with server infrastructure issues. And at least you have to pay a few bucks for a simple EC2 istance or droplet on DigitalOcean.
Today i was able to create a blog site that is under my control using free (tiered) resources. And even i’m not a fan of javascript i was able to easily develop simple Cloud Functions using nodejs ver.8.
I’m not saying this is the solution to any web application problem, but definitely, one should check and consider it a great solution simply because it alleviates all the pain of self hosting a web application.
Considering the project’s target someone may argue that Wordpress.com hosting would be a good solution too and that’s right but if you want wordpress to be hosted by someone else and pay little to nothing and have the ability to customize the service as you want (adding the server side logic you may need in future), well i don’t think you would be able to do it.
So i think it should be kept in mind when developing something and consider it can be hosted as a static site that refers to some serverless functionality.
Resources links
- Hugo static site generator
- Netlify
- Google Cloud Functions
- Mailgun (if you want to receive emails, remember to add also a root domain and not only the sub domain mg.yourdomain.com…you’ll understand this when you will do it!)
- Recaptcha v3
- Google Cloud Datastore
