Semi-static Website Hosting in AWS S3 Buckets: SanAngeloSheep.info

Amazon Web Service’s S3 object storage is a fantastically easy and robust way to host a simple website. The only catch is that it’s an object storage so you can’t use any server side scripting like php or python; Simple object storage also means you can’t use any databases either so your data must reside in simple files, such as text or html files. By leveraging javascript, JSON, and a little bit of trickery we can host a website in AWS S3 that’s easy to maintain and update, in early 2015 I did exactly that and created a site sanangelosheep.info to utilize Google Maps locating fiber glass Sheep Statues around San Angelo, Texas, this post covers some of the technical details and challenges for that site.

Data Storage

logo-jsonThe first challenge is data storage, I had a collection of 40+ statues (and growing…) that had various details: name, description, latitude and longitude, and a variety of notes. Typically, this kind of information would be stored in a database and then accessed by the various pages as needed. In S3 there are no database libraries you can utilize, so to overcome this, I used a JSON file to store the objects and their attributes. JSON made perfect sense, it’s often utilized by APIs to pass information from APIs to servers, uses plaintext, and didn’t require any specialized libraries. The sheep listing page and the Locations of Sheep Statues Map page from a data layer are almost identical, it’s the display of that data where the difference lies. By using a JSON file as a central data repository I have one location to add or edit, plus by separating out data and display, I have no HTML or display rules to muck with, only pure data, the various pages handle the “how it looks” which is always a good design principle.

Passing the Buck: Server Side to Client Side

Again, S3 doesn’t allow any server side scripting, so any dynamic content would have to be rendered on the client side by the browser. Obviously Javascript is well-known and excels in this regard, and I took the obvious choice to leverage javascript and jQuery to handle any of my scripting needs, which primarily consisted of reading the data from the JSON file and manipulating it for display. As an added bonus, the basic jQuery library also has a JSON parser built in, making data access that much simpler.

Leverage Third Parties for any heavy lifting.

With one arm tied behind your back it’s essential to get help and pass that heavy lifting off. In rapid fire, here’s how I managed to include some core functionality by leveraging third parties.

  • jQuery – As already discussed, a simple library for JSON data parsing, rendering, and controlling how we display our data.
  • Google Maps API v3 – The Google Map of the statue locations is the main focus and centerpiece for the site, using the Google Maps API v3 is a no brainer. I went pretty simple here, standard layout, pop-out, and a custom pin is just a bit into the vast ocean of the Google Maps API. I kept it simple and familiar.
  • Google Forms for Contact – As a site that is a repository for information about a very niche topic I of course needed a way for users to pass on updates and development. With no mailserver, no scripting, and not wanting the headache of spam filtering and captcha, I went with Google Forms here wrapped up in an iFrame. It’s not perfect and the display gets a bit wonky when rendered on the iPhone, but a livable compromise.
  • Google Analytics – Another simple choice for tracking visitors and getting insight into referrals, SEO, and ways to focus our information.

Mobile Friendly: check!

A core requirement is the site needed to be mobile friendly, it’s a website about essentially a scavenger hunt to find statues around San Angelo, mobile is the prime audience. After some trial and error, some reinventing of the wheel, and some WAY over complication with jQuery, I settled on using a lightweight and responsive web template from Free Responsive Templates. It was easily to manipulate, not filled with extra divs and placeholders for modules like others I found. The CSS is a small footprint as well as the HTML framework. It leverages HTML 5 which was a bonus in my book and I was not trying to write the site to decay gracefully on old browsers, as I said, it’s mobile so we’re going to see modern browsers and the oldest device we’ll see is like 3 to 4 years old. The only stipulation with the template was that I had to leave the credit in on the footer, which was an acceptable compromise for not having to struggle with testing on various devices and writing a mobile template, it’s not my strong point, and I knew it was more time effective for me to focus on the parts I was the most skilled in.

Future improvements

The end product is something I am proud of, it met the main goal and works well in the various areas we discussed, but like most coders there’s a couple aspects I’m not 100% satisfied with and I’d like to redo or tweak some parts. Here’s a quick list of future todo’s and things to rework:

Reusable Headers and Footers – Right now the menu, headers and footers are rewritten on every page. I have the ago old motto: if you write the same thing more than twice, it should be in a module somewhere. That applies here as well, I’d like to take the headers and footers and move them to some sort of include file and pass along a variable to have the proper titles, keywords, and highlighted links appear. At 6 pages, this isn’t a painful point but any core changes have to be propagated across 6 pages which is annoying and error prone.

Little CSS errors – The map buttons are distorted, I’m pretty sure it’s my CSS rules but I haven’t tracked it down. It’s mostly workable and your average user won’t notice it, but it bugs me.

Guestbook – I’ve been weighing the idea of a guestbook and if I think the site could benefit from it. It’s kind of an antiquated feature from the 1990s but for a community / “Geocaching-esque” site I think it would be positive to the user experience, rather than novelty.

The Article image with the bucket on the sheep’s head is from the DailyMail

Leave a Reply

Your email address will not be published. Required fields are marked *