With Gatsby, you can create basic web sites rapidly that are pretty easy to setup the UI while not having to worry too much about site performance. Gatsby's approach is to create a static site from the input javascript/typescript that describes the pages, components, and styling of the site. It appears to have the right mix of simplicity while still be flexible (aka unopinionated in technical jargon). Gatsby also has a good design to keep a clean separation between data sources and front-end rendering of data. Also given everything is React and Node based there is some magic that I still don't fully understand for responsiveness of the layout and refreshing the screen with data updates without doing full page reloads.
What follows is my experience in getting going with Gatsby. Enjoy!
Step 1: Gatsby Environment Setup
One of the first steps in my quest to gain web development prowess was setting up the development environment for Gatsby. And let me tell you, it was a breeze! The Gatsby team provides a fantastic guide that made the entire process smooth and hassle-free. Even if you have limited knowledge of JavaScript, HTML, and CSS, you can easily get started with Gatsby. Just be careful to not add unnecessary modules until you start understanding things.
Step 2: Learn Gatsby Basics with a Tutorial Project
To get my hands dirty and dive , I embarked on doing a Gatsby provided tutorial. Little did I know that this project would take me on a day's journey exploring the fundamentals of React and HTML. I didn't have to but I have a need to understand at least the basic level of how the foundation works. I added learning React to my list of things to do later. I also realized how little I know of HTML5 and how much I want to puke on CSS or anything related to site styling (#not-an-artist). This is a good reminder just how deep the rabbit hole goes when it comes to web development.
As a former backend developer, JavaScript was not my primary language. However, I quickly grasped the core concepts, including creating functions and navigating the shorthand syntax. JavaScript's flexibility and object manipulation capabilities is important to understand as navigating data structure is a core element of front-end work to render data into a well-designed UI/UX. I'm only dealing with basic website so not too difficult yet.
Step 3: Using a Gatsby Starter Kit seems like a good idea
To get a head start on page layout and initial theming, I decided to pick a Gatsby starter kit for this blog. Within an hour, I had the starter site up and running, tailored to my original vision. The flexibility and customization options of Gatsby is impressive, but also looks to be some garbage templates so use caution pulling in stuff that adds tech that you are unfamiliar with that creates extra complexity. This is what happened to me so if the goal is mainly about learning over going fast maybe stay way from the starter kits.
Step 4: Deploying to Netlify is Effortless
With my bare bones blog website in hand, it was time to share it with the world. Netlify, a powerful hosting platform, provided the seamless deployment experience. After a simple setup connecting my GitHub account to Netlify, the deployment process became a breeze. I pushed my code to GitHub, and Netlify automatically took care of the rest to build and deploy the production site. Best of all, this service is free for my current needs.
Of course, I had a DNS minor hurdle to overcome. Configuring my recently purchased domain, wchadjohnson.me, with the right A record to work smoothly with Netlify took some time and tinkering. I discovered the domain registrar I chose lacked support for Alias or flattened CNAME so it took longer than it should have to configure the right DNS record entries to get picked up by Netlify.
Using AI to help me
In this learning process, GitHub Copilot was basically a big cheat code. It practically knew what code to write for the tutorial project, guessing accurately with every line of code I entered. It was like doing pair programming without a nerd that was WAAAAY ahead of me. I used ChatGPT to answer my questions about how stuff in React and JavaScript worked or give me code snippets to understand how stuff was working. Check out this screenshot of one example. It was honestly way easier to use this to ask questions instead of hunting down a good stack overflow article or a reference guide snippet online in docs. Yes, it's not always right but it's a good place to start to use the tool to my advantage.
What's Next?
As I continue this journey of learning modern web development there's so much more to explore. In upcoming posts, I'll share my experiences actually setting up the blog site.
Hint: I started over.