An Interest In:
Web News this Week
- April 26, 2024
- April 25, 2024
- April 24, 2024
- April 23, 2024
- April 22, 2024
- April 21, 2024
- April 20, 2024
Show Dev: I built a personal blog for displaying mdx articles
MDX Blog
A lazily named blog that hosts markdown files
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-blogcd mdx-blog
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 directorynpm install # Install dependenciesgatsby develop # Run the local dev server$EDITOR . # Open in your preferred editor, TIP: Hot Reload!
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.
2KAbhishek / mdx-blog
A lazily named blog that hosts markdown files
Original Link: https://dev.to/2kabhishek/show-dev-i-built-a-personal-blog-for-displaying-markdown-articles-using-gatsby-js-v3-4n2f
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To