How I built this Website
Since joining AWS in 2015, I’ve been keeping a record of all of the work I’ve done as an AWS Press Spokesperson as well as the independent thought-leadership I’ve written. I decided last year to put all of this content in one place rather than have it scattered around the web. So I decided to build this website.
I knew I wanted a simple website that didn’t suffer a similar fate to my Wordpress websites (they got constantly hit by DDoS attacks), so I looked into building a static website generator. I started to write something in Perl, but quickly realised there were much better options out there, so after a couple of weeks of experimenting, I settled on using Hugo as my preferred website generator.
So, then I turned to the goals I had for the website:
- Achieve > 90/100 on Usability
- Achieve > 90/100 on Accessibility
- Achieve > 90/100 on Best Practice
- Achieve > 90/100 on SEO
- Be easy to maintain and update from any device - laptop, iPad, iPhone
- Collate all of my content together into a single place
- Be static to ensure no issues with people trying to bring the site down
- Custom design that was easy to maintain
- No-class CSS (a new trend I’d seen - see https://css-tricks.com/no-class-css-frameworks/ for more info)
- Clean HTML
- Semantic HTML
- Support for Schema.org, OpenGraph and anything else that would aid search engine optimisation
- Minimal embeds (only YouTube and Twitter, and where possible use facades)
I knew my skills in CSS and HTML were a litle rusty, and I certainly didn’t know any Go (used for the templating in Hugo). So, I had to go back to basics and came up with a pretty simple design, which I asked a small web agency in my home town to clean up and turn into a working style sheet and sample pages.
Hosting the website
The website is stored in a Git repository which allows me to keep track of changes between versions and where necessary undo anything I break. Once the Git repository is cloned to my laptop, I use Hugo to deploy the static website to an Amazon S3 bucket which is fronted by a CloudFront distribution with an SSL certificate.
My domain name - mariothomas.com - is hosted in Amazon Route53.
Sometimes, I deploy from my iPhone or iPad (if I’m writing things on the move), so for this, I use AWS CloudShell to deploy anything I submit to the Git repository.
Use of Generative AI on this website
One of the fun things I’ve been doing recently at work is making use of generative AI, I wanted to see where I could use it to improve the user experience on my website. I’m a terrible graphic artist and I knew having some stock images on the website would elevate the content, but I didn’t have time to search the stock photo websites. So instead, I decided to use generative AI to generate images to accompany posts where I didn’t have original photography or videos.
The written content of posts on this website is original and created by me. When other authors contribute, they will be appropriately cited. Some images on this site are generated using AI. In such cases, the alt or title text will reference the specific AI model used.
NoClassMT Style Sheet
If you’re interested in the no-class CSS for your own project, you can find it and view a demo here.