Inexpensive static site
Old story new plot.
Before you jump straight into building your static website, take a few minutes to make sure you’re using the right method to build and deploy it.
I’ve spent some time working on few websites before starting to build Credit Saison India website. Believe me, it can cost you months of revenue, effort and time. Luckily, I’ll share what decisions I took and you can decide which way to go.
Credit Saison India website is a purely static website designed using Vue — this means the website runs without a dedicated server. In order to host our website to the outside world I used an AWS S3 bucket while keeping the bucket private. One may ask — how is the website available if it’s a private bucket. Here comes the magic of AWS Cloudfront. Cloudfront creates a distribution of our site and makes it accessible to the outside world. I gave certain bucket policies to Cloudfront and Voila!, our Cloudfront has access to our S3 bucket even when it’s private. One final thing to do in our Cloudfront is the CNAME record that’s our Route53 URL or the website URL.
I’ve used NuxtJs for creating a front end using Vue.js. Nuxt will reduce your development time by providing generating static site for you. Use the following command to generate static site:
nuxt generate
It’s not all Static!
Now if you view Credit Saison India website, we have a form in the ‘contact us’ page. This page initiates a post request. But again, this request is a serverless function or an AWS Lambda being served via the AWS API Gateway. So what will this post request do? Will it save the information in our database? Well yeah! But in AWS DynamoDB ;). Notably I am not only saving the data in our database but also sending this information to the configured email id using the AWS SES. So the Credit Saison India person handling email requests is well informed about the queries being posted.
Seems simple so far. But hey what if some Bot starts posting countless requests on the ‘contact us’ page. What do we do? Well we all are aware about captcha. But wait, we didn’t see any captcha on the website. Hold your horses, I have added Google recaptcha V3 in our Vue project, which can work without asking anything from the user and apply their little algorithm in the background to check if the user is human or not. It generates a token from the front end and the same token gets verified in the backend(Lambda) using Google’s API. Google’s algorithm generates a score each time a user hits the send message button, If score matches with the required threshold value it allows the user’s info to be saved in our database or else throws back an error.
There you have it — A simple static website, with a few dynamic functions, inexpensive to host, secure and scalable. Go build your own!
Do visit our website at creditsaison.in and let us know your thoughts on the website.
Want to know about our design aesthetics, please read The recipe for an effective landing page by Akanksha Dutta.
