Static Hugo Site Deployed with AWS CDK
How/Why I built this Website
Along with hundreds if not thousands of engineers, I started to notice I had a lot of jumbled up projects that were either 70% or 80% completed. They were stored over various GitHub repos, saved locally on my old school computer, my personal laptop, or my home desktop, creating a fractured conglomorate of my abilities without the discipline to see them across the finish line.
So I decided to change that this year and built a website to act as a centralized display case of what I have acomplished academically and professionally over the years. I felt confiident enough to pull the trigger after I passed my Solutions Architect Associate exam last winter as I wanted to have more in-depth and practical hands-on experience using the services I had just spent 2 months learning.
Many times I will catch myself working on a project with an extreme amount of interest, only to all of a sudden turn cold on it and be pulled into starting something else that has captured my hyperfixation. However, I started to notice that the points where I fell short were the areas that I found the most daunting and “less relevant” to what I wanted to actually do. For example, in building the Golden Cross project, I was able to build out the entire backend and analysis in just a few days. Then I was dragging my feet making the Angular application design look good, building out the selections components, and other developer aspects that were outside my comfort zone.
I have always resisted creating a website because I wanted to make it entirely mine and build it from scratch to “showcase my ability” and it felt like cheating using a template. But the idea of trying to build an entire webpage myself? My excitment and eagerness to work in technology comes from drawing conclusions in analytics and data rather than the pure software engineering. The two areas are extremely intertwined and both necessary yet there is an obvious difference.
This lead me to the conclusion that I shouldn’t fret the small stuff and get something up where I can organize and “publish” the projects I actually do like to work on and spend my time doing.
Anyways, I digress. This is how I built this site.
I build the webpage using a template from Hugo. Once I have built the site, I have a AWS cdk application create a cloudformation stack and deploy to AWS.
I was blown away at how quickly things came together once I finally sat down to create it.
Creating the Hugo Website
Quick Start guide here.
-
Create hugo site with Toha theme.
% hugo new site quickstart % cd quickstart % git submodule add https://github.com/hugo-toha/toha themes/toha
-
I replaced the config.toml file with a config.yaml file.
-
I used this example repo to modify my site to match the example static site.
Note: If files are placed in the created hugo app (NOT THE THEME SECTION) then it will override the defaults provided by the theme. Therefore, do NOT EDIT anything in the themes
folder.
Creating the CDK App
Sources: Your first AWS CDK app
-
Make a directory then create cdk app inside
% mkdir website_cdk % cdk init app --language python
Note: this may create a venv by default. I deleted this and use a venv one level up for the entire project
-
Check out cdk template
% cd website_cdk % cdk synth
This will display the template file that the CDK will use to deploy resouces. Essentially checks to make sure everything is set up correctly.
-
(if needed) bootstrap env in AWS
% cdk bootstrap
Background:
cdk bootstrap is a tool in the AWS CDK command-line interface responsible for populating a given environment (that is, a combination of AWS account and region) with resources required by the CDK to perform deployments into that environment.
This deploys the CDK toolkit stack into AWS. It creates a CloudFormation stack in the environment passed on the command line. The only resource in that stack is an S3 bucket that holds the file assets and the resulting CloudFormation template to deploy.
Only needs to be run one time per account/region
-
Deploy cdk
% cdk deploy
Deploys stack to AWS account.
This is a very rough and generic description of how I got up and running but if you want more detailed information you should check out the sites listed above.