高木のブログ

Gatsbyでブログを作ってやったことのまとめ

2020/12/07

この記事は、「Jamstackその2 Advent Calendar 2020」7日目です。

はじめに

$ gatsby new takagi_blog https://github.com/gatsbyjs/gatsby-starter-blog

このコマンドを叩いて作り始めた、このブログでやったことをまとめる。

いろいろやったけど、また新しくブログを作った時にもやると思うことをピックアップしている。
タグページについてはそれだけで1記事になりそうなので、気が向いたら書くことにする。

やったこと

lang属性をjaに

src/components/seo.js
SEO.defaultProps = {
- lang: `en`,
+ lang: `ja`,
  meta: [],
  description: ``,
}

参考: Gatsby で gatsby-theme-blog を使うときの tips | gotohayato.com

日付フォーマット変更

src/pages/index.js
          frontmatter {
-           date(formatString: "MMMM DD, YYYY")
+           date(formatString: "YYYY/MM/DD")
            title
            description
          }
src/templates/blog-post.js
      frontmatter {
        title
-       date(formatString: "MMMM DD, YYYY")
+       date(formatString: "YYYY/MM/DD")
        description
      }

参考: Gatsby で gatsby-theme-blog を使うときの tips | gotohayato.com

外部リンクは別タブで開くように

$ yarn add gatsby-remark-external-links
gatsby-config.js
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 590,
            },
          },
          {
            resolve: `gatsby-remark-responsive-iframe`,
            options: {
              wrapperStyle: `margin-bottom: 1.0725rem`,
            },
          },
+         {
+           resolve: "gatsby-remark-external-links",
+           options: {
+             rel: "noopener noreferrer"
+           }
+         },
          `gatsby-remark-code-titles`,
          `gatsby-remark-prismjs`,
          `gatsby-remark-copy-linked-files`,
          `gatsby-remark-smartypants`,
        ],
      },
    },

gatsby-remark-external-links | Gatsby

参考: Gatsby製ブログ内の外部リンクを別タブ対応する | ネコニキの開発雑記

RSSフィード

gatsby-plugin-feedは元から入っていたようなので、設定のみ

gatsby-config.js
-   `gatsby-plugin-feed`,
+   {
+     resolve: `gatsby-plugin-feed`,
+     options: {
+       query: `
+         {
+           site {
+             siteMetadata {
+               title
+               description
+               siteUrl
+               site_url: siteUrl
+             }
+           }
+         }
+       `,
+       feeds: [
+         {
+           serialize: ({ query: { site, allMarkdownRemark } }) => {
+             return allMarkdownRemark.edges.map(edge => {
+               return Object.assign({}, edge.node.frontmatter, {
+                 description: edge.node.excerpt,
+                 date: edge.node.frontmatter.date,
+                 url: site.siteMetadata.siteUrl + edge.node.fields.slug,
+                 guid: site.siteMetadata.siteUrl + edge.node.fields.slug,
+                 custom_elements: [{ "content:encoded": edge.node.html }],
+               })
+             })
+           },
+           query: `
+             {
+               allMarkdownRemark(
+                 sort: { order: DESC, fields: [frontmatter___date] },
+               ) {
+                 edges {
+                   node {
+                     excerpt
+                     html
+                     fields { slug }
+                     frontmatter {
+                       title
+                       date
+                     }
+                   }
+                 }
+               }
+             }
+           `,
+           output: "/rss.xml",
+           title: "高木のブログ",
+         },
+       ],
+     },
+   },

gatsby-plugin-feed | Gatsby

参考: How to generate RSS feed with Gatsby.js

サイトマップ

$ yarn add gatsby-plugin-sitemap
gatsby-config.js
    },
+   `gatsby-plugin-sitemap`,
    // this (optional) plugin enables Progressive Web App + Offline functionality

gatsby-plugin-sitemap | Gatsby

参考: Gatsby.jsでサイトマップを作成する - Qiita

OGPタイトルにもブログ名が入るように

src/components/seo.js
        {
          property: `og:title`,
-         content: title,
+         content: `${title} | ${site.siteMetadata.title}`,
        },

        ...

        {
          name: `twitter:title`,
-         content: title,
+         content: `${title} | ${site.siteMetadata.title}`,
        },

非ラテン文字対応

日本語が対応できていないバグ

src/pages/index.js
    allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) {
      edges {
        node {
-         excerpt
+         excerpt(truncate: true)
          fields {
            slug
          }

参考: Gatsbyのブログで日本語記事の抜粋(excerpt)を正しく表示させる方法 - Qiita

ツイートを埋め込めるように

$ yarn add gatsby-plugin-twitter
gatsby-config.js
    `gatsby-plugin-sitemap`,
+   `gatsby-plugin-twitter`,
    // this (optional) plugin enables Progressive Web App + Offline functionality

gatsby-plugin-twitter | Gatsby

参考: GatsbyJSブログの記事にTwitterの投稿を埋め込んだ | RPF NoBlog

その他

hostオプション

package.json
  "scripts": {
    "build": "gatsby build",
-   "develop": "gatsby develop",
+   "develop": "gatsby develop -H 0.0.0.0",
    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "clean": "gatsby clean",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
  }

Written by ytkg, Twitter, GitHub

Pixela