CODEWITHSUNDEEP
githubgatsbynetlify
Gracie
Gracie

Reputation: 956

Install Gatsby in the /blog directory

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?

Upvotes: 1

Views: 877

Answers (3)

klijakub
klijakub

Reputation: 845

In gatsby-config.js add this

module.exports = {
  pathPrefix: `/blog`,

and while you building your app:

gatsby build --prefix-paths

Upvotes: 1

ksav
ksav

Reputation: 20840

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/

Upvotes: 1

Zoe Edwards
Zoe Edwards

Reputation: 13707

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.

Upvotes: 0

Related Questions