This is my first post to a blog/website that I have created using vanilla HTML/CSS and JavaScript built on top of the Hugo static site generator. The purpose of this site and blog is to document my work, explore new ideas, and create something unique and personal to myself. I’ve broken the content of this site into two primary sections:

1. An informal blog
   • Intended to consist of (almost) daily summaries of my work and ideas. I’m challenging myself to produce one post daily, which would ideally motivate me to engage more critically with my interests and force me to work incrementally and measurably.
2. A collection of projects
   • This will be the “content” of the site and consist of more self-contained report-style pages that outline various projects I undertake. A gallery of past/current projects.

The Stack

On top of the base HTML/CSS and JavaScript that create the foundations of the site, I am using Hugo as a site generator. While I have committed to restricting myself from using other coding frameworks, I made an exception in this case in order to split content from site functionality. Content, such as blog posts, pictures, project summaries, etc. are not related to the technical components that build this website. Hugo allows me to define HTML/CSS templates to wrap content in and have them organized into a structured static website.

Once rendered, the files are uploaded to Amazon S3 and distributed using AWS CloudFront. A detailed article of the process can be read here. This architecture is almost serverless and offers a cheap, easily scalable distribution to this simple, static website.

What is ‘vanilla’ and why?

This question could be discussed at greater length in a future post but I will address it briefly here and explain why I chose it for this site. “Vanilla” in this context, refers to things being built outside of existing coding frameworks. React.js, jQuery, Angular are just a few JavaScript frameworks that exist to help people create responsive websites. They offer immense functionality that intend to make web development easier and less repetitive. Frameworks are a collection of standardized procedures and practices; working outside of a framework means architecting and writing my own functions, templates, and assets using only the coding languages involved.

The primary motivation for going vanilla was my general unease with the trade-offs of having to learn a new framework and the benefits that it might provide. As a web developer, I’m still relatively new to the fundamentals of JavaScript as a language as well as the myriad of HTML/CSS tags and properties. Having to catch up on all of that and learn a new framework seemed like an unnecessary learning curve. I decided that sticking with bare HTML/CSS and JavaScript was the best way to solidify my foundational skills. If the time arises, I would pick up a framework only when the situation would call for one.

Until then, vanilla HTML/CSS and JavaScript is the perfect tool for this project and suites my needs completely.

Update 10/15/20

Daily posts proved to be overly ambitious and didn’t work as intended. I’m choosing to lessen the frequency in favor of more focused/meaningful posts keeping the blog still informal but also wrapping old “project” reports into it as well. I intend to showcase projects by linking to repos or websites making the Project page more of a browsable gallery.