Backendless website

Here I will post a story on how I made a website for my father's work that he could update and modify but it doesn't have backend or a database, so it is very cheap!

The resulting website can visited be found here

My father is an amazing artist, and quite a few years ago he ordered some domain and a custom website to some local web development company to display his art. A couple of years ago when I was visiting my parents I was helping them check their expenses and saw my father was being billed monthly for that website, and it was very expensive.

On top of that, the website did it's job back in the day, but it was originally built on flash and was not responsive, SEO friendly, and in fact it wasn't even running on most of browsers already. So I asked him to let me rebuild it from scratch, and I would pay for it this time, so he wouldn't have to pay anymore. I got some design ideas he had in mind and started to think on what would be the cheapest way to build a similar website.

By the time there was an idea I had read about and really wanted to try, because it lets you run websites for a really low price, it was about backendless websites running on AWS Cloudfront, here is an example on how cheap one of these websites can really be. I chose vuejs for the frontend and setup CI on AWS CodePipeline. I spent a bunch of days building the website, checking it was well displayed, paying attention to metadata for search engines and social media, lazy loading and optimizations, and got pretty good results on Google's PageSpeed Insights. Not bad for a couple of days of work.

These optimizations made the website appear as one of the top results when searching for my father's name, so I moved on to the actual elephant on the room, the "backend" part.

So one of the main features for this website, that my father already had on his old website, was that he was able to login into a custom crafted admin panel and load new pictures on the page, this wasn't easy to do on a frontend only website, so I had to get creative, and this is what I came up with. I moved all the page structure to JSON files and placed them on a CORS enabled public S3 bucket, then I used axios to query these files when loading the different sections on the website as if it was querying a backend server, the JSON files look something like this:

{
  "events": [
    {
      "name": "50m² III Bienal de acuarela Villa de Noja",
	  "subtitle": "Inauguración viernes 6 de Septiembre de 2019 a las 21:00",
	  "location" : "https://goo.gl/maps/8AaXbRPy2oyVXRf38",
	  "locationName" : "Palacio del Marqués de Albaicín, Noja, Cantabria",
	  "text": "La Bienal de Noja, que tiene lugar por tercera vez reúne un panorama representativo y actual de artistas muy destacados dentro de esta técnica. La característica distintiva de esta muestra es el gran formato de las obras, 1m² de donde viene su nombre. La exposición itinerará a lo largo de dos años por distintos centros expositivos tanto en España como en otros países.",
	"src": "https://cuadros-web-nueva.s3-eu-west-1.amazonaws.com/bienal.jpg-500.webp"
	},
  ]
}

The solution works and the website can be updated just by modifying files on S3 using the AWS Management Console.

This was my first idea, I made an account for my father on AWS, I explained him how to login, navigate to s3, upload images to the bucket and update a JSON file using Notepad, and no surprise here, it was a complete disaster. By the time he wanted to update the website, he did not remember his credentials, nor the AWS Management Console URL, and even less how to modify the JSON file, I had to think on something else.

After thinking for a while on complex solutions, then this came to my mind, what if I just provide him a simple .HTML file? It seemed so simple that I had to checked it worked several times, but it did! I crafted this very simple HTML file using Bootrstrap, JQuery (a long time had passed since the last time I used it) and AWS Javascript SDK, all queried from CDN urls, and then the file was ready in less than an hour.

I made a user with permissions to edit the content of the S3 Buckets that populate the website, and harcoded the credentials on the HTML markup, finally I sent my father the files by email, and it worked! He was able to customize the website with ease, not even logging in is required! The very last problem to solve was image optimization, it was a bit inconvenient to ask my father to resize and optimize every image before uploading it, so I used thumbor for that (I love it, I have been using it for so many years now) so it doesn't matter the size of format he uses when he uploads the image, it will be optimized and cropped when shown on the website.

And that's pretty much it! Even though I believe there are still some optimizations that could be done here, I was able to rebuilt my father's website in a bunch of days and now it has much more features and is several orders of magnitude cheaper. Success!