Building a Blog Using React and AWS
March 02, 2020
No one ever said that developing a website using a tool you are unfamiliar with was easy…and things get a bit more challenging when you give yourself an unrealistic deadline to not only learn and develop everything but to also create content. I want to tell you all the story of how I did exactly this without knowing much about the tools I used.
First off, why create this blog?
Being a developer is hard. It’s very easy to become stale in one’s skills. I believe this is the key attribute that truly separates a career in software engineering from the others. There is always so much to learn; I would say endless learning.
This is why it’s crucial to always discover new ways to work, new technologies to use, and different perspectives on your career. The field of computer science truly has explosive growth, and I am taking it upon myself to help the everyday developer navigate through this chaotic rise of computer science.
So that is what led me to create this blog. I have always wanted a way to try to navigate some of the newer technologies and ways of working, but I couldn’t seem to find any newsletter or blog that was the right fit. In comes “The Everyday Developer.” This blog is a way for me to aggregate overviews on some of the new technologies and my ideas regarding the field which are all aimed at this persona: the everyday developer.
Moving on to the website
Okay, great. I have a goal I want to accomplish, but how am I going to do this? I could go through some service like BlueHost or WordPress, but I thought that would be a total waste of the skills I’ve worked hard to get (and I didn’t want to pay for that). So then I thought about the classic static html web pages paired with css and a little javascript. Again, not quite what I wanted.
That’s when I started to explore some popular web frameworks. I already had experience with Google’s Angular (it’s a part of my job); however, I noticed that there was something a little more interesting out there: a javascript library, developed by Facebook, called React.
As I stated before, I had been using Angular and I was starting to get pretty good at it, but a few of my friends started talking about React and how it was “SOOO much better.” I will usually advise people to be wary whenever people compare apples to apples in the programming world. Usually, there are subtle differences in code syntax or something similar, but they accomplish the same thing in a slightly different way. After looking into React more, I noticed there is a huge differentiating factor that React has over Angular: intuition.
React is significantly easier to pick up than Angular, and I learned this first hand. To put this into perspective, it took me a few months to feel relatively comfortable with Angular. With React, it took me a few days.
For that reason, and because I wanted to learn more about how to use React, I realized I had found the tool that I would use to create the front-end of my blog. So I dove right in. I created prototypes quickly and loved the flow of my web apps. I was glad I gave it a chance.
What’s a development project without a little over-engineering?
Up to this point, I had been learning these tools as I went along, and when it came to the back end, I wanted to continue learning. That’s when I decided it would be the perfect opportunity to integrate Amazon Web Services (AWS) into my website.
Yes, I know, integrating AWS into a simple blog is a bit excessive, but I wanted to learn. I cannot get myself to learn anything without actually experimenting with it. Additionally, AWS has some really interesting technologies that can make a huge difference in a more complex application.
As I linked the front end with the back end, I learned a tremendous amount about several AWS technologies including Lambda, API gateway, and DynamoDB. I essentially used AWS as my content management system where I had a blog post template and retrieved the markdown posts from DynamoDB via an API call to a lambda function. As I finished up everything I needed for the blog, I slowly started to realize that maintaining the blog was going to be a lot more challenging than simply writing javascript and creating blog posts…
That’s when I discovered Gatsby and Netlify
A week before my blog was set to release, one of my high school friends, Matt Crowder, helped point me in the right direction. Rather than continuing with AWS, he told me to check out Netlify.
Netlify truly is amazing. It simplifies deploying your website so you can focus on code. Additionally, it also provides an abstraction over AWS lambda functions so it’s simple to write them and link them to your front end. Additionally, Netlify automatically assigns SSL certificates using Let’s Encrypt…for free!
Netlify also led me to rethink my front end design as well. I found another tool that I can pair with React: Gatsby. It’s a framework based on React that helps me easily manage my blog posts. It’s essentially a cleaner way of doing what I accomplished with AWS. Gatsby made developing a blog much simpler. To put this into perspective, it took me about a month to get my React app the way I wanted, but it took me a few days to get my Gatsby app looking good and working well.
So what’s next?
After learning all I did to create my blog, I plan to do the same every week to help developers worldwide. I’m going to use the same focus I had when I created this blog to learn about new technologies and share my ideas for my fellow developers.
Being a developer is hard. I want to make it a bit easier.
Look for my articles once a week.