Gatsby.jsで作ったブログを日本語用にカスタマイズする方法（ファビコン・記事投稿表示・フォントの変更）

- .cash/ （自動生成されるキャッシュ）
- content/blog/ （ブログの記事をmarkdown形式で書いてここに入れる）
- node_modules/ （ライブラリのインストール先。Node.jsでは自動生成される）
- public/ （gatsby developすると自動生成される静的ファイル群）
- src/ (実装のメイン。Reactで記述。)
  - components/ (各ページで共通利用するパーツ群)
      bio.js (著者のプロフィール欄)
      layout.js (全体のレイアウトを定めた部分)
      seo.js (headerのtitle, metaタグなどを記述)
  - images/ (共通利用する画像)
  - pages/ (各種ページ)
      404.js (404ページ)
      index.js (トップページ)
      using-typescript.tsx (typescriptを使う場合の雛形)
  - templates/ (ページのテンプレート)
      blog-post.js (ブログ記事のページのテンプレート)
  normalize.css (ブラウザの表示の違いを吸収するcssファイル)
  style.css (表示をカスタマイズするcssファイル)
- static/ (静的なファイル群)
    favicon.ico (サイトのファビコン)
    robots.txt (検索エンジンのクローラー向けのファイル)
gatsby-browser.js (CSSやフォントなどをブラウザに読み込ませる)
gatsby-config.js (ブログのサイト名、著者、SNS、説明などの各種設定)
gatsby-node.js (gatsby developをした際に実行される処理)

siteMetadata: {
    title: `bpeldi2oerkd8の開発日誌`,
    author: {
      name: `bpeldi2oerkd8`,
      summary: `Web開発など興味がある分野についてブログを書いています。PHP, JavaScript, TypeScript, Java, Python使いです。`,
    },
    description: `Web開発に関する記事、興味のある分野の記事を不定期で更新中。開発するうえでつまづいたこと、興味のある分野でわからなかったことについてまとめて記事にする予定です。`,
    siteUrl: `https://bpeldi2oerkd8.com/`,
    social: {
      twitter: `bpeldi2oerkd8`,
    },
  },

import moment from "moment"

{
  post.frontmatter.date
}

{
  moment(post.frontmatter.date).format(`YYYY年MM月DD日 HH:mm`)
}

export const pageQuery = graphql`
  query {
    site {
      siteMetadata {
        title
      }
    }
    allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) {
      nodes {
        excerpt
        fields {
          slug
        }
        frontmatter {
          date // 変更
          title
          description
          tags
        }
      }
    }
  }
`

        {
          name: `twitter:description`,
          content: metaDescription,
        },
      ].concat(meta)}
      // ここから追加
      link={[
        {
          rel: `preconnect`,
          href: `https://fonts.googleapis.com`,
        },
        {
          rel: `preconnect`,
          href: `https://fonts.gstatic.com/`,
          crossorigin: "",
        },
        {
          rel: `stylesheet`,
          href: `https://fonts.googleapis.com/css?family=Noto+Sans+JP:wght@400;700&display=swap`,
        },
      ]}
      // 追加ここまで
    />

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin />
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:wght@400;700&display=swap"
/>