Creating this blog

I used to have a ghost blog hosted on Digital Ocean with a low cost of 5 USD/month. Well... In the beginning I was posting almost every Friday and it was usually a post with some interesting articles/projects I saw in the week (personally, I enjoyed doing that! I was often visiting those posts to re-read some of the articles). But, as usually, I stopped writing on it (maybe because only me was reading? hehe)

So, even 5 bucks/month (55/year) will not, thankfully, be such a huge difference, is still 5 bucks/month! So, let's save it, right? But, I have a bigger plan in my mind! I use so much of the developers community to code and grow as a person and professional that I really want to give it back somehow! How? Trying to teach other people what I know (as I learn from other people that knows more and different stuff than me).

So, I'll try my best to explain what I did to have this blog up and running in a github-netlify environment free of charge (thanks github and netlify to allow us to host open source codes freely).

Technical details

This blog is developed using GatsbyJS. Why?

  • with a feel tweaks (or even none if you prefer to use their awesome (starter-kits templates)[]) you have a blog up and running
  • it uses ReactJS, so it's a good way to learn and improve this skill
  • it's well known for generating fast & seo-friendly static websites (all a blog needs and wants)
  • I can host it on github for free and use netlify to deploy it
  • If I want, there's a ready CMS UI (netlify-cms) that's it's almost plug-and-play

And the process I took to develop/style was:

  • I started with the starter default because I wanted to learn some inner details of how it works and what I would have to do to implement anything on it
  • As my first contact with GraphQL, I felt it would be a good idea to have it configured to me already
  • It's a started default, so it's configured correctly to work

After following the instructions to start the default template, I followed all 8 steps from the tutorial pages to learn the basics of gatsby (and after finishing it, I had this blog ready and running - and a really good feeling about GatsbyJS!)

I'll use their implementation idea for the blog posts:

  • all blog posts will be a .md (or .mdx if needed to use any component in the post) and they will be place under /src/pages folder
  • for images, I'll host them under /src/assets/images
  • Styling will be done using TailwindCSS

In a nutshell

  • blog created with GatsbyJS
  • style using TailwindCSS (basically a copy&paste from their blog! No shame on that as I suck on styling, so copied from the best!)
  • deploy with netlify
  • hosted on github