How to unpublish a gatsby page without deleting it? - reactjs

Question

I used a Gatsby starter for my static site, and one of the pages included in that starter is a demo page with all of the UI elements.
I want to keep the page (so I can copy and paste from the demo) but don't want to be publicly available. How do I "unpublish" without deleting the file?
Is there a way to tell gatsby-node.js to skip that page when generating the public facing site?

Answer 1

There are a bunch of Gatsby Node API helpers that you can use, one being deletePage.
If you have a page src/pages/demo.js, this will delete that page during creation.
// gatsby-node.js
exports.onCreatePage = async ({ page, actions: { deletePage } }) => {
if (page.path.match(/^\/demo/)) {
deletePage(page)
}
}

Answer 2

Lots of good options here, just wanna throw my hat in the ring for plugin options that prevent pages from being created in the first place:
If it is a page component, i.e inside src/pages folder, gatsby use a plugin called gatsby-plugin-page-creator to generate page, and it recently accept a ignore patterns.
There's a caveat, the built-in gatsby-plugin-page-creator doesn't take user options, so we'd have to rename the pages folder to ignore it.
root
└── src
- └── pages
+ └── screens <-- rename
└── index.js
└── ignore-file-name.js
And then in gatsby-config.js:
module.exports = {
plugins: [
{
resolve: `gatsby-plugin-page-creator`,
options: {
path: `${__dirname}/src/screens`,
ignore: [`ignore-file-name.js`],
},
},
]
}
If it is a programmatically page generated from markdown or json, you might be able to ignore it in gatsby-source-file-system, as pointed out in this github comment.
The example there even ignores file based on environment, which is more useful since you can still see your reference during development, but it won't show in build.
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/content`,
ignore: process.env.NODE_ENV === `production` && [`**/draft-*`]
}
}

Answer 3

An alternative would be to add a "published" attribute to the frontmatter assuming it's a markdown page that could be a true or false value. Then add logic into your gatsby-node.js file which looks at this to determine whether or not to run createPage().