Blog init

Through this short blog post I’ll go into details of why I wanted to create a personal blog, why didn’t I just use medium and why I chose Gatsby as the blog’s framework.

First things first

I wanted to create a blog to talk about the things I do and the ideas I have for over a year now, but I never got to it.

One reason was to structure my ideas or document code I write and reuse often in ways other people might find helpful. Another reason was that I wanted to try out static website generators for React and lastly because I wanted to have a portfolio of sorts, a presence in the web.

But Medium

Yeah, medium is nice and I read it a lot, but it has a limit on free articles, which I’m not a huge fan. Also every time I try to write something there I’m not truly engaged, which means I never finish a post. With my own personal website I can do whatever I want and style it the way I want it to be.

With medium I'm not truly engaged, which means I never finish a post.

It is also challenging to build something new, like this website, and I don’t see the time pass while writing here, since I’m pretty comfortable with my code editor interface and markdown.

And Gatsby

I had my eye on gatsby for quite a while now. The idea to pre-render react into static .html files is neat. Having worked with react for the past 3 years or so, I prefer it over frameworkless javascript for a series of reasons, most notably the ease to keep logical components apart from each other.

Gatsby also has over 1209 plugins. Wow! I’m using 24 of them as of now, though I’m always adding new ones. The best thing about adding plugins or packages to a Gatsby website is that plenty of them won’t impact the site’s speed for the end user, as you are pre-rendering the website before deploying. 👍

I’m also using gatsby-starter-blog, since this is a blog and this starter simplifies a lot of the boilerplate needed to parse .md files and image loading. It’s also what Dan Abramov uses in his blog overreacted. Which was an inspiration to create my own.

Styling

My way-to-go styling framework is styled-components, I just like the way you can write css in javascript, you can keep all your variables and theme colors and mixins in a single place. You can also use ThemeProvider to pass down all these variables to every styled-component in your component tree.

The only bad thing from using styled-components in Gatsby is that, if you use 2 or more themes, like this website does, and persist it in a variable on localStorage or similar, the website will first flash the default theme and only when components are re-hydrated the user-selected theme will show up. 😔

It’s a small setback, but it happens pretty fast and only a few users will be affected by it.

Deployment

I have not deployed this website as of writing this first post. But I’m tending towards ZEIT as my deployment provider. It seems fast, simple and free. Gatsby also integrates easily with it, so it’s a plus. It is as simple as npm install -g now and then running ZEIT cli command now. After verifying your account you are good to go.

Conclusion

Overall creating this was a nice exercise, I got to use new technologies and services I have not used before, as well as speak my mind in my own way and decide how everything would look.