Building A Marketing Blog with React.js

Posted: April 29, 2022

I'm learning to use Gatsby. It's been two weeks. I spend an hour or two every day working through it. I spent a week refreshing myself with JavaScript and learning react. I've learned I don't want to use react for traditional websites, marketing sites, blogs, etc. It doesn't do well with SEO. So i spend a few days going back and forth deciding between two frameworks that sit on top of react to build static sites: Gatsby VS Next.js.

Originally, I wanted to build the site with Jekyll. Reading up on Jekyll, I realize i don't want the added complexity of adding Ruby to my stack. I do want to publish to Github Pages. I do want to create blog posts using markdown. Ideally, i want to do those two things in a react native framework. As luck has it, good and bad, i have choices. Ultimately, i land on Gatsby. A lot of people like Next.js. I might regret this choice. That is the price of experience. I like Gatsby overall, but what put it over the top is that it has a native data layer that I believe will meet my needs better.

I started with the Gastby Tutorial Walkthru as a starting point to build out my blog. This is the finished product.

Every tutorial on working with dynamic Images in Gatsby uses a blog post page as a demo. These examples only use one image per post. I need to include multiple images on my index page. These have to be dynamic, one for each post. I read through the documentation but ultimatly it is the JavaScript that i was caught on.

I need to learn a CSS tool. I land on Tailwind. Mostly because my friend uses it. I get caught on FlexBox so i spend some more time learning it.

For my troubles i come across Post CSS. That is something to look into later.

I'm done with version one. I still need to publish my site to Github Pages, but I will save that for another post that focuses on Git & Github.

Resources: