How can I structure my blog posts in a separate blog folder?

[nikolailehbrink]

I am working on a blog using Remix and MDX, inspired by this repository. I want to achieve better separation between my blog posts and the rest of the app. My goal is to place all blog .mdx files in a dedicated blog folder and have the corresponding URLs structured like /blog/post-name. Here’s how I would like the structure to look:

app/
  routes/
    blog/
      introduction.mdx → `/blog/introduction`
      another-post.mdx → `/blog/another-post`

I looked into using the remix-flat-routes package to achieve this clean structure but couldn’t figure out how to do it. Does anyone have a suggestion or know if this package can support my use case? According to the remix-routing demo, this could be achieved in v1.

Thanks in advance for any insights!

[zxlvera]

I had a similar issue and resolved using import.meta.glob('../blogs/*.mdx');

https://github.com/orgs/mdx-js/discussions/2542

[nikolailehbrink]

Thanks for the answer @zxlvera. My problem was just the creation of the blog folder and a file route inside that, which can be done by suffixing the + to blog+ like @kiliman mentioned in his answer 🙂

[kiliman]

For nested routing with remix-flat-routes, just name the folder to blog+, otherwise you'd need to update every file with blog. prefix (e.g, blog.introduction.mdx)

[nikolailehbrink]

Thanks @kiliman! Exactly, what I was looking for. Read the docs before, but seems like not attentive enough!