Gatsby Flexiblog 테마 gatsby-config.js 설정 및 RSS 설정하는 방법

Flexiblog를 매뉴얼에 따라 설치를 하더라도, 기능을 추가하거나 수정하는 시간이 매우 오래 걸립니다.

제가 설치한 플러그인과 적용방법을 보시면 좀더 편하게 수정할 수 있습니다.

기본 매뉴얼을 통해 기본적인 설치 및 설정을 할 수 있습니다. (링크)

Flexiblog 테마는 로컬 데이터(Markdown), Contentful CMS, Sanity CMS를 소스로 쓸 수 있습니다.

저는 로컬에서 Markdown 파일을 생성해서 Github로 보낸 후 Vercel과 연동하여 배포하고 있습니다.

Thirdparty API로는 Algolia 검색, Disqus 댓글을 쓰고 있습니다. 물론 Web App Manifest (PWA)도 적용해두었습니다.

추가한 플러그인

RSS 데이터 생성 : gatsby-plugin-feed

구글 분석도구 : gatsby-plugin-google-analytics

Sitemap(sitemap.xml) 생성 : gatsby-plugin-sitemap

PWA 오프라인 기능 활성화 : gatsby-plugin-offline

그리고 위 플러그인들을 추가해줬습니다.

설치하는 방법은

cd site
yarn add gatsby-plugin-feed gatsby-plugin-google-analytics gatsby-plugin-sitemap gatsby-plugin-offline

위와 같이 설치 후

/site/gatsby-config.js 파일을 아래와 같이 설정했습니다.

require("dotenv").config()

module.exports = {
  // Customize your site metadata:
  siteMetadata: {
    //General Site Metadata
    siteUrl: "https://blog.wsgvet.com",
    title: 'Woosung Blog',
    name: 'Woosung',
    lang: 'ko',
    description: '많은 정보를 나누고 싶은 우성짱의 블로그입니다.',
    address: 'Gimhae, South Korea',
    email: '',
    phone: '',
 
    //Site Social Media Links
    social: [
      {
        name: 'Github',
        url: 'https://github.com/woosungchoi'
      },
      {
        name: 'Homepage',
        url: 'https://www.wsgvet.com'
      }
    ],

    //Header Menu Items
    headerMenu: [
      {
        name: 'Home',
        slug: '/'
      },
      {
        name: 'About Me',
        slug: '/about'
      }
    ],

    //Footer Menu Items (2 Sets)
    footerMenu: [
      {
        title: 'Topics',
        items: [
          {
            name: 'Gatsby',
            slug: '/category/gatsby/'
          },
          {
            name: 'Ubuntu',
            slug: '/category/ubuntu/'
          },
          {
            name: 'ghost',
            slug: '/category/ghost/'
          },
          {
            name: 'Gnuboard',
            slug: '/category/gnuboard/'
          },
          {
            name: 'Google Cloud',
            slug: '/category/google-cloud/'
          },
        ]
      },
      {
        title: 'Tags',
        items: [
          {
            name: 'Nginx',
            slug: '/tags/nginx/'
          },
          {
            name: 'SSL',
            slug: '/tags/ssl/'
          },
        ]
      }
    ]
  },
  plugins: [
    {
      resolve: "@elegantstack/gatsby-theme-flexiblog-personal",
      options: {
        services: {
          disqus: true,
          algolia: true,
        },
        sitePaths: {
          category: "/category",
          author: "/author",
          tag: "/tags",
        },
        siteUrl: "//blog.wsgvet.com",
      },
    },
    {
      resolve: "gatsby-plugin-algolia",
      options: {
        appId: process.env.GATSBY_ALGOLIA_APP_ID,
        apiKey: process.env.ALGOLIA_ADMIN_KEY,
        chunkSize: 10000,
        queries: require("@elegantstack/algolia-blog/src/queries"),
      },
    },
    {
      resolve: "gatsby-plugin-disqus",
      options: {
        shortname: process.env.DISQUS_SHORTNAME,
      },
    },
    {
      resolve: "gatsby-plugin-manifest",
      options: {
        name: `Woosung Blog`,
        short_name: `Woosung Blog`,
        description: `Gatsby js로 만든 우성짱의 블로그입니다. 많은 정보를 나누고 싶습니다.`,
        start_url: `/`,
        icon: `content/assets/favicon.png`,
        display: `minimal-ui`,
        theme_color: `#ffffff`,
        background_color: `#f8f8f8`,
        lang: `ko`,
        screenshots: [
            {
                src: `content/assets/screenshot-1280x800.png`,
                sizes: `1280x800`,
                type: `image/png`,
            },
            {
                src: `content/assets/screenshot-750x1334.png`,
                sizes: `750x1334`,
                type: `image/png`,
            },
        ],
        orientation: `any`,
      },
    },
    {
      resolve: `gatsby-plugin-sitemap`,
      options: {
        output: `/sitemap.xml`,
      }
    },   
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        trackingId: process.env.GOOGLE_ANALYTICS_TRACKINGID,
      }
    },
    {
      resolve: `gatsby-plugin-feed`,
      options: {
        query: `
        {
          site {
            siteMetadata {
              title
              description
              siteUrl
              site_url: siteUrl
            }
          }
        }
      `,
        feeds: [
          {
            serialize: ({ query: { site, allArticle } }) => {
              return allArticle.edges.map(edge => {
                return Object.assign({}, edge.node.frontmatter, {
                  title: edge.node.title,
                  description: edge.node.excerpt,
                  date: edge.node.date,
                  url: site.siteMetadata.siteUrl + edge.node.slug,
                  guid: site.siteMetadata.siteUrl + edge.node.slug,
                  custom_elements: [{ "content:encoded": edge.node.html }],
                })
              })
            },
            query: `
              {
                allArticle(sort: {order: DESC, fields: date}) {
                  edges {
                    node {
                      title
                      slug
                      excerpt
                      date
                   }
                  }
                }
              }
            `,
            output: "/rss.xml",
            title: "Woosung Blog RSS Feed",
            match: "^/",
          },
        ],
      }
    },
    'gatsby-plugin-offline',   
  ]
}

RSS 부분은 물어봐도 안가르쳐주더라구요 -_-;;

그래서 어쩔 수 없이 공부해서 넣었습니다. ㅎㅎ 잘 작동합니다.

상세 내용은 gatsby-plugin-feed 플러그인을 참조하세요.

Sitemap URL : /sitemap.xml

RSS URL : /rss.xml

설정이 잘 되었다면 위 경로로 접근할 수 있습니다.

.env 파일 내용

그리고 gatsby-config.js 파일에 보면 process.env.로 시작하는 부분이 있습니다.

숨기고 싶은 요소들을 넣어두는 곳이라고 보면 됩니다.

/site/.env 파일

GATSBY_ALGOLIA_APP_ID=
GATSBY_ALGOLIA_SEARCH_KEY=
GATSBY_ALGOLIA_INDEX_NAME=
ALGOLIA_ADMIN_KEY=
DISQUS_SHORTNAME=
GOOGLE_ANALYTICS_TRACKINGID=

저는 위와 같이 넣어줬습니다.

구글 분석도구 에러 수정 방법

The plugin gatsby-plugin-google-analytics@2.3.17 is using the API "pluginOptionsSchema" which is not available in your version of Gatsby.

위와 같이 Gatsby 버전이 낮아서 구글 분석 도구 플러그인이 에러날 수 있습니다.

2.3.17 버전부터 생긴 pluginOptionsSchema 때문인데요. Gatsby의 버전을 높이면 자동으로 해결됩니다.

/site/package.json 파일을 열어서

dependencies 부분에

"gatsby": "^2.24.11",

위 내용을

"gatsby": "^2.24.69",

위와 같이 2.24.69 이상으로 넣어주면 됩니다.