Установите Gatsby в каталог / blog - PullRequest
Новая
       23

Установите Gatsby в каталог / blog

1 голос
/ 20 мая 2019

Я создал блог Gatsby с помощью кнопки Netlify одним щелчком мыши, но хочу, чтобы моя собственная целевая страница использовалась с помощью index.html, а затем блог Gatsby был встроен в каталог / blog моего сайта (example.com/blog).)

Я посмотрел в файлах config.js и gatsby-config.js параметры для изменения местоположения сборки, плюс я также попробовал несколько различных команд сборки в Netlify, таких как

Сборкакоманда: gatsby build

Опубликовать каталог: public / Articles

Может ли кто-нибудь помочь создать это в определенной папке (каталоге), оставив мой собственный index.html в корневом каталоге?

Ответы [ 2 ]

0 голосов
/ 21 мая 2019

Посмотрите на этот стартер и прочитайте Гетсби учебник Часть 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/

0 голосов
/ 20 мая 2019

Вам нужно сообщить Гэтсби, где вы хотите файл. Netlify просто хочет знать, где находится ваша общая папка. 

gatsby build --output-dir public/articles

Вы можете либо переместить свой собственный файл index.html в созданный каталог (public), либо уже иметь его там *.

Я бы также рекомендовал разрешить Gatsby запустить весь ваш сайт и создать статический файл для вашей домашней страницы, тогда процесс сборки будет намного проще, и вы сможете запускать его локально.

* Не уверен, разрешено ли это, Гэтсби может потребоваться пустая или несуществующая папка для встраивания.

...