Разве нельзя создать блог с контентом, взятым только с Github?

Question

Я борюсь с этим долгое время. Используя плагин gatsby-source-git, я могу получить весь контент уценки из репозитория, используя allMarkdownRemark в запросе graphQL - директива allFile не нужна.

Но есть проблемы с подходом Гэтсби. В моей конфигурации у меня есть:

{
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'markdown-pages',
        path: `${__dirname}/mdsource`,
      },
    },
    {
      resolve: 'gatsby-source-git',
      options: {
        name: 'cookie-content',
        remote: 'lets say for now it is some private repo on github',
        branch: 'main',
        patterns: ['en/**', 'images/**'],
      },
    },

1. Я не могу заменить 'mdsource' на '.cache / gatsby-source-git /', потому что когда gatsby develop запущен, такой путь еще не существует.
2. Когда я полностью удаляю ссылку на gatsby-source-filesystem из gatsby-config.js, все происходит сбой при сборке, и узлы graphQL не читаются должным образом.
3. В документации к плагинам gatsby-source это явно не указано, но это похоже, что они не являются автономными плагинами и требуют gatsby-source-filesystem для запуска.
4. Использование только gatsby-source-filesystem без какой-либо дополнительной настройки также приводит к поломке.
5. Все файлы из разных источников импортируются в одно огромное дерево graphQl, и в AllMarkdownRemark невозможно определить, откуда происходит файл уценки.

В моем файле gatsby-node.js есть функция создания слагов:

exports.onCreateNode = ({ node, getNode, actions }) => {
    const { createNodeField } = actions;
        if (node.internal.type === 'MarkdownRemark') {
            const slug = createFilePath({ node, getNode, basePath: 'mdsource' });
            createNodeField({
                    node,
                    name: 'slug',
                    value: slug,
            });
        }
};

После того, как я добавил репозиторий github в качестве дополнительного источника, я вижу, что эта функция неправильная, но я не знаю, должен ли я удалить ее полностью или изменить.

Итак, подведем итог: - как вести блог, если все данные контента извлекаются только из Github? - В чем разница между созданием страницы, созданием файла и созданием узла Markdown? Похоже, что все содержимое всех страниц существует в виде значений в json, поэтому нет необходимости физически хранить файл на диске.

Answer 1

Я не думаю, что есть какие-либо проблемы с Гэтсби или gatsby-plugin-git, но я понимаю, что шаги по получению контента из внешнего git хранилища могут быть трудными, когда вы только начинаете.

Взглянув на gatsby-source-git README , я смог создать сайт Gatsby, который извлекает всю уценку из репозитория, который вы предоставили .

Вот шаги, которые я предпринял:

1. Создание сайта Gatsby на основе gatsby-starter-default:

gatsby new my-site

Установить gatsby-source-git:

yarn add gatsby-source-git

Настроить gatsby-source-git в gatsby-config.js:

module.exports = {
  plugins: [
    // other plugins go here...
    {
      resolve: `gatsby-source-git`,
      options: {
        name: `cookie-education`,
        remote: `https://github.com/Polarisation/cookies.education-content.git`,
        // this pattern pulls everything in the `en` directory
        patterns: `en/**`,
      }
    }
  ]
};

При запуске gatsby-develop вы должны иметь возможность запрашивать сообщения с GraphQL (вы можете попробовать это с помощью GraphiQL Explorer в http://localhost: 8000 / ___ graphql ):

query AllMarkdownFromGit {
  allFile(filter: {sourceInstanceName: {eq: "cookie-education"}, extension: {eq: "md"}}) {
    nodes {
      name
      internal {
        type
      }
    }
  }
}

Используйте Gatsby's createPages API в gatsby-node.js, чтобы создать страницу для каждого исходного файла. Это может выглядеть примерно так:

exports.createPages = async ({ graphql, actions, reporter }) => {
  const { createPage } = actions
  // Query for markdown nodes to use in creating pages.
  const result = await graphql(
    `
      {
        allFile(filter: {sourceInstanceName: {eq: "cookie-education"}, extension: {eq: "md"}}) {
          nodes {
            name
          }
        }
      }
    `
  )
  // Handle errors
  if (result.errors) {
    reporter.panicOnBuild(`Error while running GraphQL query.`)
    return
  }
  // Create pages for each markdown file.
  const pageTemplate = path.resolve(`src/templates/page.js`)
  result.data.allFile.nodes.forEach(({ node }) => {
    const path = node.name
    createPage({
      path,
      component: pageTemplate,
      // In your blog post template's graphql query, you can use pagePath
      // as a GraphQL variable to query for data from the markdown file.
      context: {
        pagePath: path,
      },
    })
  })
}

Наконец, вам нужно создать шаблон страницы, который извлекает и отображает содержимое Markdown для каждого файла.

Конечно, вы захотите настроить его под свои нужды и на сайт. Вы хотите построить. Документы по Создание и изменение страниц - хорошее место для начала обучения!