Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/2kabhishek/mdx-blog
A blog that hosts markdown files ✍📑
https://github.com/2kabhishek/mdx-blog
blog gatsbyjs gatsbyv3 graphql markdown react static-site theme-ui
Last synced: about 2 months ago
JSON representation
A blog that hosts markdown files ✍📑
- Host: GitHub
- URL: https://github.com/2kabhishek/mdx-blog
- Owner: 2KAbhishek
- License: gpl-3.0
- Created: 2021-07-12T09:33:31.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-04-26T04:27:37.000Z (8 months ago)
- Last Synced: 2024-05-01T16:27:03.853Z (8 months ago)
- Topics: blog, gatsbyjs, gatsbyv3, graphql, markdown, react, static-site, theme-ui
- Language: MDX
- Homepage: https://2kabhishek.github.io/mdx-blog
- Size: 2.42 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## 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:
```bash
git clone https://github.com/2kabhishek/mdx-blog
cd mdx-blog
```
## Using mdx-blog
Clone this to your local and run the following to run the server and play around with the code.
```bash
# From the cloned directory
npm install # Install dependencies
gatsby 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.
## More Info
[Article on Dev.to](https://dev.to/2kabhishek/show-dev-i-built-a-personal-blog-for-displaying-markdown-articles-using-gatsby-js-v3-4n2f)
