Question

我使用Netlify一键式按钮创建了一个盖茨比博客，但希望使用index.html创建自己的主页登录页面，然后在我网站的/ blog目录（example.com/blog）中建立盖茨比博客。）

我查看了config.js和gatsby-config.js文件中用于更改构建位置的设置，此外，我还在Netlify中尝试了一些不同的构建命令，例如

构建命令：gatsby构建

发布目录：公共/文章

任何人都可以帮助在特定的文件夹（目录）中进行构建，而将我自己的index.html保留在根目录中吗？

Answer 1

您需要告诉Gatsby文件在哪里。 Netlify只想知道您的公用文件夹在哪里。

gatsby build --output-dir public/articles

您可以将自己的index.html文件移至创建的目录（public）中，也可以将其保存在该目录中*。

我还建议您考虑让Gatsby运行您的整个网站，并为您的主页创建一个静态文件，然后您的构建过程会更加简单，并且可以在本地运行。

*不确定是否允许，Gatsby可能需要将一个空的或不存在的文件夹内置到其中。

Answer 2

看看this starter并阅读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
      })
    })
  })
}

在onCreateNode中，如果节点的内部类型为MarkdownRemark，则将使用基本路径blog创建一个文件路径，并将该新文件路径添加到名为的新节点字段中。 slug。

此新字段现在在所有graphQL查询中都可用。

因此，稍后在createPages中，将在slug路径选项中查询并使用新的createPage字段。

因此，src/blog文件夹中的页面将保留从根开始提供，而MarkdownRemark生成的帖子将从/blog/提供

Answer 3

在gatsby-config.js中添加此

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

在构建应用程序时：

gatsby build --prefix-paths

在/ blog目录中安装Gatsby

3 个答案: