Install Gatsby in the /blog directory - github

Question

I created a Gatsby blog using the Netlify one-click button but wish to have my own home landing page using index.html and then then the Gatsby blog be built in the /blog directory of my site (example.com/blog)
I have looked into the config.js and gatsby-config.js files for settings to change the build location plus I have also tried a few different build commands in Netlify such as
Build command : gatsby build
Publish directory: public/articles
Can anyone help build this in a specific folder(directory) whilst leaving my own index.html in the root directory?

Answer 1

Have a look at this starter and have a read of Gatsby tutorial Part 7
gatsby-node.js
const replacePath = path => (path === `/` ? path : path.replace(/\/$/, ``))
const { createFilePath } = require(`gatsby-source-filesystem`)
const path = require("path")
exports.onCreateNode = ({ node, getNode, actions }) => {
const { createNodeField } = actions
if (node.internal.type === `MarkdownRemark`) {
const slug = createFilePath({ node, getNode, basePath: `blog` })
createNodeField({
node,
name: `slug`,
value: replacePath(slug),
})
}
}
exports.createPages = ({ actions, graphql }) => {
const { createPage } = actions
const postTemplate = path.resolve(`src/templates/postTemplate.js`)
return graphql(`
{
allMarkdownRemark(
sort: { order: DESC, fields: [frontmatter___date] }
limit: 1000
) {
edges {
node {
fields {
slug
}
}
}
}
}
`).then(result => {
if (result.errors) {
return Promise.reject(result.errors)
}
result.data.allMarkdownRemark.edges.forEach(({ node }) => {
createPage({
path: replacePath(node.fields.slug),
component: postTemplate
})
})
})
}
Here in onCreateNode, if the node's internal type is MarkdownRemark, a filepath is created with a base path of blog, and that new filepath is added to a new node field called slug.
This new field is now available in any graphQL queries.
So later in createPages, the new slug field is queried and used in the createPage path option.
So pages in your src/blog folder will remain to be served from the root, while posts generated by MarkdownRemark will be served from /blog/

Answer 2

In gatsby-config.js add this
module.exports = {
pathPrefix: `/blog`,
and while you building your app:
gatsby build --prefix-paths

Answer 3

You’ll need to tell Gatsby where you want the file. Netlify just wants to know where your public folder is.
gatsby build --output-dir public/articles
You can either then move your own index.html file into the directory created (public), or have it already there*.
I would also recommend looking at letting Gatsby run your whole site, and create a static file for your homepage, then your build process is much simplier, and you can run it locally.
* Not sure if that is allowed, Gatsby may require an empty or non-exisiting folder to build into.