About This Site

This site was created in Aug 2020, here are a few details about how it was put together.

Theme

When I decided to redsign the site, I wanted to go with a simpler theme and make it as clean as possible. I also built my first ever branding guide to try and be more consistent as opposed to adding elements as I go.

I also decided for the first time to do a dark theme along with the light. As of this writing, it isn't yet implemented, but when it is, the default theme will be dark.

Tech Stack

My previous site was originally written in Gatsby using a WordPress backend as the CMS. I much prefer Vue over React, so this site uses Gridsome to generate the static site, and I am now using my own custom CMS built on AWS & Netlify.

Public Site

The static site is hosted in AWS using S3 for storage and CloudFront as a CDN. I have two pipelines defined using Azure DevOps, one for internal testing and one for production, which only shows published posts.

CMS

Why make my own CMS? It allows me to flag content as premium and only allow certain people to view it. It also lets me have a completely customized workflow without the burden of having to learn the paradigms set by another headless CMS.

Here is the list of services, how they are used in the CMS, and why I chose to use them;

  • Vue + Vuetify, Web App - I've worked with all three big frameworks (Vue, React, & Angular) and Vue is by far the one I am most comfortable in. I implemented Vuetify to speed up adding new functionality to the app so I dont have to worry about styling too much, considering this is only used by me for the time being.
  • Netlify, App Hosting - I chose Netlify over S3/CloudFront since I can deploy updates using a single command from my workstation. Deploying to Netlify automatically handles invalidating cached items so its less that I need to worry about doing when updating the app.
  • AWS API Gateway & Lambda, API - I built the API using the Serverless Framework. All operations from the front end go through the APIs defined.
  • Cognito, Authentication - All API endpoints are protected by a Cognito Authorizer.
  • DynamoDB, Storage - Data is stored in DynamoDB, which currently includes the body of each post or item in the CMS. I eventually will implement versioning and store the body of the items in S3, with pointers stored in Dynamo.
  • S3, Blob Storage - Images uploaded are stored in S3 which my CloudFront CDN points to. This is the same CDN used by the public site.

I currently store records for three entities in the CMS.

  • Posts
  • Portfolio Items
  • Series Meta

As the CMS is iterated on, much more content will be stored here, including video content that premium site members will have access to.

Source

Currently, this site is not open source. I like to publish alot of my side projects as a means to help other developers, but this site is desiged to set me apart from potential competition.

Attributions

Social media icons were sourced from icons8.com.