DEV Community

loading...
Cover image for Show Dev: I built a personal blog for displaying mdx articles βœπŸΌπŸ’€

Show Dev: I built a personal blog for displaying mdx articles βœπŸΌπŸ’€

Abhishek Keshri
Software Craftsperson πŸ’Ό | Learner πŸ“š | Maker πŸ‘¨πŸ»β€πŸ’» | Explorer πŸ”Ž
・2 min read

MDX Blog

A lazily named blog that hosts markdown files βœπŸΌπŸ’€

MDX Blog Screenshot

Inspiration

I have been hearing a lot about static site generators and wanted to try them, this was a exploratory POC created for learning purposes.

What it does

mdx-blog is a lazily named blog that hosts markdown files (surprisingly!) built using Gatsby JS.

Prerequisites

Before you begin, ensure you have met the following requirements:

  • You have installed the latest version of node, npm

Getting mdx-blog

To install mdx-blog, follow these steps:

git clone https://github.com/2kabhishek/mdx-blog
cd mdx-blog
Enter fullscreen mode Exit fullscreen mode

Using mdx-blog

Clone this to your local and run the following to run the server and play around with the code.

# From the cloned directory
npm install # Install dependencies
gatsby develop # Run the local dev server
$EDITOR . # Open in your preferred editor, TIP: Hot Reload!
Enter fullscreen mode Exit fullscreen mode

How it was built

mdx-blog was built using Gatsby JS v3, behind the scenes it's also using React, Graph QL, Theme UI etc.

Challenges faced

While building mdx-blog the main challenges were mostly conceptual, really understanding the benefits and drawbacks of static site generators.

Also faced a minor issue with MDX rendering initially.

What I learned

While building mdx-blog I learned about:

  • Static site generators in general
    • When to use and when not to use
  • Gatsby JS: A great tool for quickly building static sites
    • Very extensible
    • Has great documentation
  • GraphQL (and the GraphiQL tool)
    • Really love the specificity and usability of this
    • Side tracked a bit and learned about Hasura as well
  • Theme UI didn't play much with it, but really love the idea behind centralized styling.
  • React ;)

What's next

Want to add syntax highlighting for code blocks.

To-Do

  • Add better MDX rendering

Hit the ⭐ button if you found this useful.

GitHub logo 2KAbhishek / mdx-blog

A blog that hosts markdown files βœπŸ“‘

Discussion (0)