TLDR: этот пост является репостом моего поста в блоге с моего сайта Serving Niches. Если вы сталкивались с подобными проблемами при работе с Гэтсби, вы можете увидеть, как ярешил их.

https://servingniches.org/posts/2018-02-20___the_blog_is_live/

После нескольких недель возни и работы над ошибками этот блог на GatsbyJS наконец-то готов к работе в прайм-тайм. Весь код для этого сайта является открытым исходным кодом и может быть найден здесь.

Возникшие проблемы:

  • Проблема 1: разветвленное репо, которое этот сайт использовал в качестве отправной точки, необходимо было перенести на Gatsby V2.
  • Исправление: ознакомьтесь с действительно хорошей официальной документацией по переносу с Gatsby V1 на V2 здесь. Функциональность макета пришлось переместить под компоненты и рассматривать как еще один компонент, а не как шаблон, который применяется ко всем страницам. Функциональность макета из Gatsby v1 можно воссоздать с помощью плагина gatsby-plugin-layout.
// File: gatsby-config.js   
{
  resolve: `gatsby-plugin-layout`,
  options: {
     component: require.resolve(`${__dirname}/src/components/layouts/index.jsx`),
   },
},

Проблема 2: изображения в уценке не отображаются

Исправлено: изображения в файлах уценки (.md) не отображались. Проблема была двоякой.

1. Не удалось найти изображения обложки.
2. Изображения в записи блога вернули ошибку 404.

Исправление включало добавление двух плагинов gatsby — gatsby-remark-copy-images и gatsby-remark-images.

"gatsby-remark-copy-images": "^0.2.1",
"gatsby-remark-images": "^3.0.3",
// File: gatsby-config.js
{
      resolve: 'gatsby-transformer-remark',
      options: {
        plugins: [
          'gatsby-remark-copy-images',
        ],
      },
},
{
      resolve: 'gatsby-remark-images',
},

GraphQL должен возвращать поле publicURL, которое будет содержать URL-адрес изображения, которое вы пытаетесь отобразить в своем компоненте.

...
cover {
       id,
       publicURL, 
       name
},
...
export const query = graphql`
  query {
    allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) {
      edges {
        node {
          id
          fields {
            slug
          }
          frontmatter {
            title
            subTitle
            cover {
              id
              publicURL
              name
            }
            categories
            date
          }
          excerpt
          headings {
            value
            depth
          }
          html
          rawMarkdownBody
          fileAbsolutePath
        }
      }
    }
  }
`;

Добавлены функции:

  • Функция 1: Добавлен раздел блога. За исключением стиля, все остальное точно соответствует информации, найденной по ссылкам ниже.
  • Официальная документация GatsbyJS по созданию блога
    https://www.gatsbyjs.org/blog/2017-07-19-creating-a-blog-with-gatsby/
  • Серия БЕСПЛАТНЫХ видео от Egghead.io о создании блога с Гэтсби
    https://egghead.io/courses/build-a-blog-with-react-and-markdown-using-gatsby
  • Функция 2: отдельные сообщения в блоге генерируются из уценки.
  • Технически это не отдельная функция, но, поскольку первоначальная идея заключалась в том, чтобы отдельные посты оформлялись по-разному, я оставлю это здесь.
  • Программно создавать страницы из данных
    https://www.gatsbyjs.org/tutorial/part-seven/

Полезные ссылки

Источник изображения обложки

Источник изображения: Фликр