menu

Gatsby.js

Fast in every way that matters. Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps.

Channels
# All channels
view-forward
# General
view-forward
# I Made This
view-forward
# Meta
view-forward
# Themes
view-forward
Team

Have I got my structure wrong by not using MDX in pages directory?

February 18, 2020 at 11:06pm

Have I got my structure wrong by not using MDX in pages directory?

February 18, 2020 at 11:06pm (Edited 2 months ago)
I've learned Gatsby so far following the on-site tutorials and a great Udemy course. But I think I've messed up something on my set up so far and looking some feedback on what others do?
I have a few small marketing sites and I've some stand-alone pages in the "pages" directory and then a few sections that I'm creating dynamically using gatsby node and a template.
The template files all use MDX for their content but the stand-alone pages I use regular HTML i.e. no MDX. I've done it this way as I thought that any content outside of the pages folder needed markdown or similar.
Ideally, I would like all content to have the same approach, so should I look to use the MDX plug on the content inside "pages" directory too or will this cause issues with the default gatsby set up?

Example structure

pages
  • index.js (html)
  • about.js (html)
  • contact.js (html)
content (dir)
  • case study (dir)
    • case study 1 (dir)
      • case study 1 content.mdx (mdx)
      • case study 1 photo.jpg
    • case study 2 (dir)
      • case study 2 content.mdx (mdx)
      • case study 2 photo.jpg

February 19, 2020 at 8:44pm
Your structure looks fine to me. What is it that's happening that makes you think you messed up?
You can use .mdx files in your pages directory, too, but it will be more difficult to process them correctly. It shouldn't cause issues, necessarily, with gatsby's default set up, but I don't think the results will be what you want them to be without playing with the configuration and gatsby-node.
I think one way to look at the structure you currently have is that pages is essentially your site infrastructure. So it's the foundation for your site, and your content is what stacks on top of it. Your index page could be used to display an actual index/listing of your content directory, for example.
  • reply
  • like

February 20, 2020 at 11:03pm
Thanks jeremy that helps.
most tutorials go into a homepage or folio and then a blog that use markdown like I am using the content folders.
I've not seen many that deal with other static pages like "about us" or "Contact Etc" I guess most people would have them more unique and built up of components, rather than templated content.
  • reply
  • like
That's usually true, since those pages are usually going to be fairly unique, and hence not very easy to use with a template.
However, if you put .mdx files in your pages directory, they will still get created as pages. They just won't be rendered with the template you use for your other posts. So, if you create an .mdx in pages with the same kind of general page structure, like:
<Layout>
... content
</Layout>
Then it will look much like your other pages. It will just make it harder to utilize additional logic that you would usually put in the body of the render function, or in other parts of the React component lifecycle.
You can even customize the page generation behavior, using gatsby-plugin-page-creator. That's what Gatsby uses internally to generate pages out of the pages dir. If you change the name of the pages directory, you can then use that plugin to create standard pages out of specific subfolders, and use gatsby-source-filesystem to source .mdx files out of other subfolders, and a whole lot of other things. Gatsby is actually really flexible.
  • reply
  • like