DEV Community

loading...
Cover image for How I have rewritten Code4IT with Gatsby

How I have rewritten Code4IT with Gatsby

bellons91 profile image Davide Bellone Updated on ・2 min read

After months of work, I've finally completed the porting of my blog from WordPress to Gatsby 🎉🎉🎉🎉🎉

You can find it at Code4IT.dev. As you maybe know, my main focus is on .NET, C# and Azure.

First of all: what is Gatsby? I'm pretty sure you already have heard of it: it's a powerful (free and open source) framework that allows you to create static websites that you can deploy everywhere.

Why I moved to Gatsby

I noticed that WordPress is really powerful, and it makes easy to create great content. But with the free plan, you cannot customize that much. For instance, you can't adjust CSS as you want, and all the cover images must be imported into their CMS.

As you will notice if you have a look at the articles, I don't use stock photos, but I take those pictures by myself (just to make things a little less boring). Now I can change cover images just referencing a URL in my articles.

Also, I like to create content in MarkDown. It's easy and there are lots of tools that show a preview of what is the final result. Personally, I write all the articles with Visual Studio Code and use some extension. Finally, all my articles are controlled with GIT and stored on GitHub.

The hardest parts

I'm mainly a backend developer. I had some experiences with Angular, but... Gatsby is built with React. Luckily I found a template with most of the customizations already done, but I must admit that since I don't have experience with React, the whole site has been build with attempts just to figure out what was going on.

Now the site is on, so I must have understood something correct 😎 But... I still don't know how GraphQL injects its result into the component! No, seriously, I have no clue!

Lastly, I'm not a genius at CSS. And I don't have creativity, so the blog has a very simple structure. In the future, I'll rewrite the whole layout, but for now... well, it's fine.

The easiest parts

Since I have downloaded an existing layout, most of the configurations were already in place. I had to install more plugins (for Google Analytics, Disqus and RSS feeds), in general, I didn't have problems with them.

For the deployment part, I rely on GitHub actions and Netlify. So, every time I push code on the master branch, I have my updated code live in about one minute.

Where can you find my blog

As I said, you can find it here.
I'll keep working on it, so you'll see updates both on the UI and the functionalities. And, of course, in the content :) Feel free to contact me on Twitter if you have suggestions to make!

See you!

Discussion

pic
Editor guide