How to Exclude Drafts from Your Production Site in GatsbyJS

In this quick tutorial, you’ll learn how to exclude drafts from your Gatsby website in production mode.

Start by opening your gatsby-config.js file.

Then go to gatsby-source-filesystem.

Now inside the options object, and right below path:, add this line:

 ignore: process.env.NODE_ENV === `production` && [`**/posts/drafts`],

My gatsby-source-filesystem looks like this:

resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content`,
        ignore: process.env.NODE_ENV === `production` && [`**/posts/drafts`],
      },

Your gatsby-config.js will now ignore any files inside the path specified above, /posts/drafts, when in production mode.

Your drafts will still show up on your local development server.

Now we just need to create a folder for our drafts in the correct location. Go to your Gatsby site’s posts directory and add a drafts folder.

Now when you’re working on an article, just make sure you do it inside your drafts folder, and then it won’t get published in production when you’re pushing updates to your Gatsby production server.

When you’re ready to publish, just drag your post from the /posts/drafts folder into /posts and it will get published online the next time you git push to production.

If you’re using relative paths inside your post metadata, e.g. for embedding a thumbnail, make sure that the path is correct when going from /posts/drafts to /posts.

Your thumbnail path might look like this while inside the drafts folder:

img: ../../../thumbnails/javascript.svg

When moving your article outside of the drafts folder, change this to:

img: ../../thumbnails/javascript.svg

_

Happy writing!