The birth of a website.

The Beginings.

I attended hack salem, and now here I am: building a website in a language I don't know, hosting it on a platform I've never used.

Uh oh, there's no spell check built into Visual Studio Code. This might be an issue.

So yeah, I went to HACK SALEM. Genehack gave a talk about how he built his new blog using terraform. The talk was inspiring. I had been meaning to dive into AWS, but didn't really know where to start. My webpage before this was just my domain parked at cheapdomains, and redirecting to a free wordpress that hosted basically nothing. Some old college essays. Wordpress of course had ads on my website, and that was annoying. I didn't want to pay to have them removed. And, wordpress themes are pretty restrictive and annoying. So! My new goal was to build a website with tools I want to learn anyway for my desired DevSecOps dream job.

I went home, and created a github. I even watched some github videos on plural site. I didn't know 'git' was a general version control, and github was a 'brand' of version control. I thought it was just one big thing. Yes, that is how no0b I am. I wasn't sure how github worked, or the etiquette. Something that helped me understand it was this blog post.

I have a general idea now: it basically acts like revision history in a google document. Snapshots of a thing. so if I push this website and it worked fine in my dev localhost output, but it was completely broken on aws, I could just push a previous branch that I know worked. Makes life easier. I could also create another second branch for testing stuff. Like if I wanted crazy wacky colors. Or another feature. I could keep all that work out of the main branch, and then merge them when it was time to go live. Pretty intuitive stuff. The forking / pull request lingo wasn't as intuitive to me.

Fork makes sense: it's like a fork in the road. But pull request is hard to infer. From my understanding now, it means you can request to change the code, and basically fix it? Then the owner of the repo can approve it. I might be wrong. I'm leaving this here though, since this is a learning blog for myself. I should be able to laugh at this in a few months. That's the plan.

After creating github, I created a free tier AWS account. I now had the accounts to start building the website!

Teraform

Luckily, Genehack posted the terraform code he used to build up aws here.

I had no idea what terraform was. "Infrastructure as code" makes sense maybe for some people, but I didn't understand how code could plug in a hard drive or another stick of ram. Which, of course it doesn't, but that's the first thing I thought of.

My understanding is it of course doesn't do anything to layers 1-4 of the osi model or hardware. It's more about software of infrastructure. Virtual machines, software configs. So instead of going through and clicking on the web ui to do everything I needed to do to set up aws, tereaform took the code from genehack's script and told aws to do those things. Lets take a quick snippet out to investigate:

// Create a Cloudfront distribution for the static website
resource "aws_cloudfront_distribution" "website_cdn" {
  enabled             = true
  is_ipv6_enabled     = true
  price_class         = var.price_class
  http_version        = "http2"
  default_root_object = var.default_root_object
  aliases             = [var.domain]

This is just what it looks like, with wonderful notes in the script itself. The above code will create a cloudfront distribution for the static website. So instead of going to cloudfront, opening the webui, creating a new one, and manually selecting all these options, terraform does all that using the AWS CLI. Just simple variables declared and passed on.

Teraform was absolutly not needed for this project. I can see how wonderful this tool would be if i was needing to create dozens of websites a week, or dozens of s3 buckets a week. But honestly, for a one time launch of a website, it was more work to learn terraform than it would have been to go through and click the buttons on the website. But, to be honest, watching a website get built through a CLI was worth it. And now i'm thinking of what other projects I can use terraform for. To deep dive further, i'll consult this guide

Small roadblocks I hit wile using this tool not documented elsewhere:

• I needed to install aws cli, and set it up with my creds.
• I wasn't sure if terraform would prompt me for the variables of my domain names, or if I needed to modify the code. Protip: it prompts you.

Static site builders (Gatsby)

Before I actually made an AWS account, I built a website in html and css in visual studio code. A simple thing. Dark colors, simple layout. I took an html class for WGU last semester, so it was all pretty fresh in my head. But then I realized that I wanted something that had tags and was a little dynamic in a few ways: i wanted to front page to update with the latest blog post automatically, i wanted things to go to archive automatically.

That's where gatsby comes in. And this theme. I borrowed the hello friend theme (becasue mr robot is the best tv show in just about ever). I then imported it into gatsby, and spent some time figuring it out. It seems pretty easy. Kind of like cheating. You still get to use an IDE, so you can at least pretend to be coding. I guess there is a bit of coding in the MD files I create. But the hard work was really done by the theme builder. I just need to put a post in the 'posts' file, and it'll automatically show up in the front page! How amazing! Otherwise, If I kept just a basic html/css site, i'd need to manually update the front page everytime.

Small roadblocks here:

• This theme doesn't have an archive section, so i will need to dive in and figure out react/gatsby in at least enough depth to automatically pull all posts and link them there. Should be able to reverse engineer the code used on the front page and reuse it to automatically configure the archive section.

CD/CI

I wanted to be able to push a new post to github and have it push to my s3 account automatically.

but I haven't done this yet. It seems simple enough to do using amazon's code pipeline. But that costs money. So for now, I'm just manually pushing to my s3 bucket using a gatsby plugin. This site isn't going to github yet. I am using a local git thing though!

odds and ends

• migrating dns from namecheap to route53 broke my custom email (me@myfullname.com) so I had to build that again. I should have known! I found someone made a terraform script to do it as well, here and I thought that was cool.