Home  |  Notes  |  Builds  |  Photos
Shihao Cao

Shihao Cao

How I Made This Website

Back to notes

TLDR: NextJS, AWS DNS, and Vercel

I made this iteration of my website in mid-Spring 2022.

I chose NextJS because I wanted something responsive and minimalistic. I have AWS DNS because it was a hold-over from my last website. I used to use AWS S3 bucket static hosting, but now I use Vercel, which also takes care of my continuous deployment. Vercel saves me so much time, and it's free.

Tutorials I used:

You can find the source code for my current website on this github repo.

Feel free to use parts of it lol. Just "change it up a bit", so it doesn't look like you copied my homework.

2016 Website

Before this iteration of the website I used to use an HTML5-up template, and AWS for my DNS and hosting.

The HTML5-up template was nice, but it was too inflexible. Conforming content to a "theme" got in the way of the information.

AWS S3 bucket was sufficient for hosting, but updating was always a very manual process of literally drag and drop uploading. Being able to push with ease on Vercel is a life-saver. Anything that decreases cycle-times is invaluable to engineers.

2022 Mardown Blog Upgrade

As I headed into the Summer of 2022, I found myself writing much more frequently, atleast once a week. Typically my workflow for writing was to first draft the actual content in Google Docs.

But there were still additional hoops to put the writing on my website:

  1. Use online converters to turn it into html tags
  2. Paste into VSCode and edit the crap out of it
  3. Insert images
  4. Publish and push to Github/Vercel

The second step of the above four would usually take an hour, which is atrocious! Time spent "pushing papes"/"moving code around" should be several orders of magnitude below the time spent writing.

The worst part is if I made any large changes to the Google Docs source (such as to do edits/revisions), I would have to go through the above plumbing steps all over again. This overhead actively discouraged edits and improvements, which sucked.

Thus, I upgraded my website to use the code presented in the NextJS MD to HTML blog example.

Now my workflow is much better:

  1. Use the GoogleDocs to Markdown extension to generate .md
  2. Paste into VSCode directly with no edits
  3. Insert images
  4. Publish and push to Github/Vercel

The above steps take 5 minutes tops. This is soooo much better.

It took me about 2 hours to figure out how to add the automatic MD to HTML generation to my website, so as soon as I write two more pieces, I'll be net positive! And as soon as I write two more after that, I'll have justified my investment!

← Back to home                                                                                                                                                         Source