Building a markdown blog


I have been using OneNote to collect technical notes and for blogging. The idea of combining both of them has been bugging my mind since the day I was introduced to Github Pages.

So the idea was to build a static website, where I can keep my notes.

Checklist ✓

1. Markdown 🗒

Considering the content lock-in I've experienced while using Blogspot. I decided to use markdown files for the post content.

2. GatsbyJs 🤩

ReactJs based static site generator with a huge user community and a great number of plugins.
Very awesome markdown support 👍

3. Netlify 🙌

The obvious choice in comparison to Github-Pages for the ease of convenience.

Tutorial Series

In this series, we will

  • start by

    • setting up a basic markdown blog without worrying about the looks.
  • then

    • deploy our blog to Netlify.
  • at last,

    • focus on enhancing the looks. [never ending process...]

Get Set, Go! 🚀

In this series, I'll write about each step in the journey of building this blog.

Below are the steps, which have been implemented on this site

  1. The Setup
  2. Markdown
  3. Site Configuration
  4. GraphiQL
  5. Blog Post List
  6. Blog Post Template
  7. Minimal layout using Tailwind
  8. Restructure index page
  9. Fix images not rendering
  10. Enable Gatsby incremental builds in Netlify
  11. Fix webpage title and favicon
  12. Adding a Header
  13. PostCSS Import
  14. Theming with tailwind
  15. Firebase Analytics


  • Use tags
  • Code Syntax Highlighting
  • 404 Page
  • Heading Links
  • & much more stuff

FYI, I am posting updates in this Twitter thread.


If you think this is helpful 🎈
Don't keep it to yourself 🙊

Share it with your lovely followers at twitter 🗽

lets connect viatwitter