How I Built My Blog Using Gatsby and Netlify

In this post i am excited to share you on how i built my blog site and also provide you some of the resources which i personally found useful. If you are person who is willing to have your personal blog , I hope this post will help you to get going.

Lets jump into it straight away then.🏃‍♂️

Introduction

While i was in search of some of the templates to start off with my blog site. I found this beautiful Gatsby starter template ❤️ by Majid Hajian which was primarily using styled components and typescript. It also includes some of the great features such as SEO, PWAs, Light/Dark theme etc.Coming from a .NET background i always love working on typescript as it is statically typed and it brings familiar OOPs concepts to JavaScript. These things altogether just drove me to start using it.

Demo

Source Code

What is Gatsby ? 🙄

For those of you have not heard of this word yet, Gatsby is a static site generator that uses React. Everything is configured out of the box including React, Webpack, Prettier and many more.

If you haven’t used React before there is definitely a learning curve but there are plenty of well written tutorials that makes learning React very accessible. Not to mention the official React documentation is very well written.

If you want to know more about Gatsby and interested in building something , You can follow this documentation.

Netlify ?? 🤔

While i was working on my portfolio, I have used GitHub pages for hosting website because it’s free and fairly easy to set up. Although I still think GitHub pages is a great tool, Netlify takes the process one step further to make the developer experience even more efficient. You can find more differences between these two here

Once you’ve hooked up Netlify to your repo, each push to your GitHub repository, automatically builds your website according to the static site generator you’re using and deploys it to production. Here is the step by step guide to get started.

Although i am currently using Netlify only for static site hosting, it supports cloud functions, domain management (with SSL), form submissions, a/b testing and more.

Besides features, Netlify’s web interface is clean and easy to use. Coming from using AWS past projects, the difference i feel is night and day. While AWS has it’s advantages being highly configurable, the large portion of us developers are unlikely to use these functionality.

The best part about Netlify is that it’s free. If you’re in a large team or need more resources for cloud functions, form submissions and more they do have paid options. If you plan on building a small blog like me, it’s unlikely you’ll need to pay for anything.

Conclusion

Gatsby and Netlify are the one of easiest ways to build and publish a static website. Personally i have learned many things while i was working on and i hope that this will help you as well. Good luck. 🤝

If you find this post useful, please help others spreading the word. Leave your suggestions and feedback.