This blog

I'm trying to work in fast iterations with this project. This blog is no exception.

The problem, the spec

After a careful consideration, I came up with the following list of requirements for my blog workflow:

A fast place to throw some ideas on mobile

I often use my phone to do research for the game. I need a place to keep book of the links I'm reading so I can get that info into the blog post when I'm writing. For this I'm using Google Keep.

Markdown-driven blog posts

Writing and editing on mobile is still so painful that I want to avoid it at all costs, so I want to write the actual blog posts on my computer as Markdown files.

Max 500 words per blog post

I've written multiple blog in the past and I know a good blog post takes about six hours to write. Now I'd like to focus on the game development, not writing blog posts. The 500 word limit should keep the blog posts sharp and on-point.

Embedding full games to the blog

As I'm creating a game, I want to share parts of the game as playable demos inside the blog. This rules out all SaaS-based platforms pretty well, because I'd need to have a specific folder structure for my games to work.

React and TypeScript

That's what cool kids use nowadays, right? Well, I know one thing: I'm not going back to learning another template language after JSX. And type checking just helps a ton with a modern toolchain.

Onto coding!

The first thing I do is I ask help from people that have had the same problems. I want to thank my colleagues for the feedback I got — and started to prototype based on.

Gatsby

I have tried out Gatsby in the past, but always ruled it out as overengineered because of the forced GraphQL. Based on the feedback I decided to give it another shot.

I followed the official Gatsby + Markdown tutorial and added the most popular TypeScript plugin afterwards. The TypeScript plugin does not actually do any type-checking though.

45 minutes later and I’m still figuring out how the hell I’m supposed type my data coming from the Markdown plugin, through the GraphQL layer.

Final thoughts: Still over-engineered.

React-static

To be fair, I had done one project before with react-static, so I knew how the routing works. A lot of major versions had been passed since then, but the same idea still held up, and the TypeScript template setup was a delightful breeze.

45 minutes later I had coded a custom workflow that reads all Markdown files, converts them to HTML + metadata and passes those to react-static which builds them into a blog.

Final thoughts: 3.5/5 would use again, not too much magic at this point.

Total time from start to first blog post published to Netlify: 2 hours.