Note: This was a blog post I originally published on my personal site back in June of 2018. I've decided to write here instead, and now some parts are wrong (particularly the last paragraph). Most of it is still relevant.
This story starts with a web developer who had a desire to learn new skills, and practice and reinforce old ones.
First, he tried to contribute to open source. It was a bit intimidating, and he didn't feel comfortable with it (may have been a small case of imposter syndrome). Next, he tried to find opportunities at work to learn new skills. This proved difficult as well, because he didn't have the freedom to choose how his work got done. Finally, a voice spoke to him, "Build a portfolio website/blog. All the cool kids are doing it. Plus, you can start building a personal brand. Score!" And that's just what he set out to do.
With an idea in hand, and a thirst for knowledge, his focus shifted from "What?" to "How?". The "How?" question was almost as tricky as the "What?" question, and itself posed a "What?" question. "What do I know, and what do I want to learn?", he asked himself. "Well, I'm pretty comfortable with React and its ecosystem. Let's start there."
The developer started like many people do in this situation, he fired up VS Code, initialized a new project, installed all of the necessary dependencies, etc. After about 30 minutes, voila, a React project shell was born. His pomodoro timer said it was time for a break, and he rested.
Upon returning to the task at hand, he began to research how others were building blog sites in React, at which point he stumbled upon Gatsby. Gatsby is a static-site generator for React which handles a lot of the boilerplate necessary to get a site up and running, and has a GraphQL data/configuration layer to make programmatic page generation easy. This revelation, while a huge time-saver in the long run, meant that he had to tear down the existing project and start over. So after deleting the "old" project, initializing a new one, and installing one or two dependencies, he was ready to go. For real this time, and quicker than before.
He read through a bunch of the tutorials on Gatsby's site, learned about all the cool things Gatsby could do, and pushed them to the back of his brain for later consumption. Now that Gatsby was handling all the tricky stuff, our developer was free to focus on what he was comfortable with, building a site with React. The components were coming along nicely, and he had a basic layout built, but he needed to make it look pretty. This meant taking a journey into a place he was less familiar with, CSS Land. He read about UX patterns, and anti-patterns, and anti-anti-patterns. How much padding this or that element needed, and what borders are okay to use. He read about media queries so that mobile users would have a nice experience too. He refreshed his memory of Font Awesome to add nice icons for social sites, and then he got to work on making the site pretty.
At this point in our story, the site was built, and looked kinda pretty, but it wasn't accessible to the world. This meant he had another question to answer, "How do I host this, and how do I get it there?" Many options were available to him: use a GitHub Pages repository, use a static web host and FTP the files there, use a VPS, but ultimately he decided to go back to the second question "What do I want to learn?" He decided that cloud hosting and provisioning was a gap in his skill set that needed addressing. To remedy this, he chose to use AWS S3 to host the site, with a plethora of other AWS services (Cloudfront, Route53, etc.) to support it. Using the AWS CLI along with the web interface, he was able to create the infrastructure needed, put files where they belonged, and show off his new site to the world.
He still wasn't satisfied. The developer had recently been to a meetup where he was introduced to the concept of infrastructure as code, using Terraform to provision AWS infrastructure. This was another opportunity to learn a new skill, and the developer seized it. He tore down his existing AWS infrastructure, re-provisioned it using Terraform, and wrote a script to automate the Gatsby build, and AWS/Terraform deploy process. The script was run, and a fully functional site was available to the world, and it was good.
The developer looked back on this project, and was relatively pleased with the results. He now had a fully functional portfolio site/blog, and a new set of skills acquired in the process. Starting with knowledge of React and a touch of CSS, he learned Gatsby, more in-depth CSS, AWS, and Terraform. Knowing that no work is ever truly complete, he continues to look for areas of improvement to this day.
My name is Scott Wagner, and I am that developer. The site you are on (scottwagner.io) is the site built in this story. I wanted to share my experience building this site and learning a bunch of neat stuff along the way, so I started writing, and it came out as a third person story. I'll be adding more content in the coming weeks/months on a variety of software-related topics. Stay tuned sports fans.
Top comments (0)