How This Website Was Created

I created this website, I'm hosting it for $1 a month on Amazon Web Services. I've tried to make it as fast as I could. How? Read more.

Hugo is a static website generator. All of the pages are pre-generated locally using a text-based template and content management system. I created the templates for this site and I write the content in HTML locally on my computer.

I chose a static website generator because I was curious about the technology and how fast it could be. I sometimes get obsessed with speed and this seemed like a challenge. So far it has been interesting. Most everything I've wanted to do with their template system has been possible.

The way I use Hugo is too low-level for anyone non-technical. However, there are some easier-to-use front-ends for Hugo that I'm curious to learn more about.

Note, there are a lot of things that can't be done with static website generators. For the most part, there are no real "back-end" servers that can customize the content of the site based on the user's specific info. Any interaction with a database would usually be through Javascript requests from the static pages.

Despite that, it can be a great solution for sites like this one.

The great thing about using Hugo (or other static site generators) is that you can host directly on Amazon Cloudfront using Amazon S3 storage for your website files. Cloudfront is a "content delivery network" where the website assets (images, HTML, everything) are placed on servers geographically close to the user. When a user requests a web page, there is no server or database needed to produce that web page. It's pre-generated and served from a place nearby. Ok, technically there are servers, just not any you need to maintain.

The files are cached geographically close to the user for quick access. If those "edge locations" need to refresh their cache, they request the original file from the S3 storage bucket.

And it's costing me $1 a month because my traffic is low. The $1 is actually for my domain DNS via Route 53. It's really more like 6 cents per month.

So your files are statically generated, you have no real servers with databases, how can you perform any logic behind-the-scenes outside of the browser?. AWS Lambda provides a way to add logic to each server request. As well as creating some API endpoints that your site can interact with.

Specifically, you can add code to each request for URL Rewriting and other logic. Right now I'm redirecting any request to "bluevinestudios.com" to "www.bluevinestudios.com". You can also redirect to HTTPs and other similar logic.

Normally something like a contact form would be easy with your traditional server setup. It is still easy with a static website if you use a third-party service and their servers. I didn't want to spend the money on that or use their free versions so I did something in AWS Lambda.

AWS has a service called Simple Email Service or SES that can send lots of emails for free under a certain amount (10,000?) a month. Since I was only contacting myself via a contact form, there's no way I'd go over that limit.

There are definitely some tricks to getting this working. CORS restrictions need to be dealt with. But I like that it's server-less and I have control over it.

The Newsletter Signup does use a third-party service ( Mailchimp). It's free for folks that don't email a lot. Integrating that was easy, just copying and pasting the signup form. Sign up, I dare you!

I used Bulma for a CSS framework (akin to Bootstrap). I chose this framework mostly because of the native Flexbox support. It's not perfect and I had to work on overriding a number of features I disliked. In the future I might look into another framework.

I wanted a way to showcase the before/middle/after aspects of Color Cosm so I created the "sliders" using Canvas and Typescript. When I get a bit of time to polish up the code I hope to make that an open source project. You can interact with them on a desktop and hopefully mobile soon.

I spent the extra time to optimize the images to use the Webp format in browsers that support it. It's been a huge win for speed. The workflow I have is cumbersome (uses Photoshop) and I would love to streamline that.

I did get obsessed with speed. Using "critical CSS" on the home page, removing unused CSS, unused Javascript, a number of other things I'll elaborate on later.

I've learned a lot with this website and hope to elaborate more on how it was made. I think creating a user-friendly interface for creating a high-speed, highly-optimized site would be amazing.