ブログをWordpress+ロリポップからGatsbyJS+Netlifyに移行した

npm install gatsby-transformer-remark gatsby-remark-prismjs prismjs

npm install gatsby-remark-embedder

npm install gatsby-remark-embed-gist

npm install @mdx-js/mdx @mdx-js/react gatsby-plugin-mdx

import * as React from "react"
import PropTypes from "prop-types"
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faFolder, faCalendar } from "@fortawesome/free-regular-svg-icons"
import { faHashtag } from "@fortawesome/free-solid-svg-icons"
import {Link} from "gatsby";

const _ = require('lodash')
const PostMeta = ({ date, categories, tags }) => {
  return (
    <div className="post-meta">
      <div className="post-meta_item">
        <FontAwesomeIcon icon={faCalendar} />
        <time className="time" dateTime="{date}">{date}</time>
      </div>
      {categories.length > 0 && (
        <div className="post-meta_item meta-item-list">
          <ul className="categories">
            {categories.map((cat, i) => {
              const cat_uri = '/category/' + fixedEncodeURI(cat) + '/'
              return (
                <li key={i}><FontAwesomeIcon icon={faFolder} /><Link to={cat_uri} itemProp="url">{cat}</Link></li>
              )
            })}
          </ul>
        </div>
      )}
      {tags.length > 0 && (
        <div className="post-meta_item meta-item-list">
          <ul className="tags">
            {tags.map((tag, i) => {
              const tag_uri = '/tag/' + fixedEncodeURI(tag) + '/'
              return (<li key={i}><FontAwesomeIcon icon={faHashtag}/><Link to={tag_uri} itemProp="url">{tag}</Link></li>)
            })}
          </ul>
        </div>
      )}
    </div>
  )
}

function fixedEncodeURI(str) {
  return encodeURI(_.kebabCase(str).replace(/[.]/g, function(c) {
    return '%' + c.charCodeAt(0).toString(16);
  }));
}

PostMeta.defaultProps = {
  date: '',
  categories: [],
  tags: [],
}

PostMeta.propTypes = {
  date: PropTypes.string,
  categories: PropTypes.arrayOf(PropTypes.string),
  tags: PropTypes.arrayOf(PropTypes.string),
}

export default PostMeta

<PostMeta date={post.frontmatter.date} categories={post.frontmatter.category} tags={post.frontmatter.tag} />

import React from 'react'
import {graphql} from 'gatsby'
import Layout from '../components/layout'
import Seo from "../components/seo"
import Articles from "../components/articles" // 記事表示部分は一覧・カテゴリ/タグ別一覧で共通なのでコンポーネントに切り出し済み

const Category = ({ pageContext, data, location }) => {
  const siteTitle = data.site.siteMetadata?.title || `Title`
  const {category} = pageContext
  const posts = data.allMdx.nodes
  const title = "カテゴリー「" + category + "」の記事一覧"
  return (
    <Layout location={location} title={siteTitle}>
      <Seo title={title} />
      <h1 className="archive-title">{title}</h1>
      <Articles posts={posts} />
    </Layout>
  )
}

export default Category

export const pageQuery = graphql`    
    query($category: String) {
        site {
            siteMetadata {
                title
            }
        }
        allMdx(
            sort: { fields: [frontmatter___date], order: DESC },
            filter: { frontmatter: { 
                category: { eq: $category },
                status: {eq: "publish"}
            } }
        ) {
            nodes {
                excerpt
                slug
                frontmatter {
                    date(formatString: "YYYY/MM/DD")
                    title
                    category
                    tag
                }
            }
        }
    }
`

(略)
exports.createPages = async ({ graphql, actions, reporter }) => {
  (略)
  const CategoryTmp = path.resolve(`./src/templates/category.js`)
  (略)
  // 全記事データをカテゴリ・タグ含んで取得
  const result = await graphql(
      `
        query{
          allMdx(
            sort: { fields: [frontmatter___date], order: ASC },
            filter: {frontmatter: {status: {eq: "publish"}}}
          ) {
            nodes {
              id
              slug
              frontmatter {
                category
                tag
              }
            }
          }
        }
      `
    )
  (略)
  const posts = result.data.allMdx.nodes
  (略)
  let categories = []
    // ポストのカテゴリを一旦全取得
    _.each(posts, node => {
      if (_.get(node, 'frontmatter.category')) {
        categories.push(node.frontmatter.category[0])
      }
    })
    // lodashのuniqでユニーク化
    categories = _.uniq(categories)
    categories.map(category => {
      const uri = fixedEncodeURI(category)
      createPage({
        path: `/category/${_.kebabCase(uri)}/`,
        component: CategoryTmp,
        context: {
          category,
        },
      })
    })
}
(略)
function fixedEncodeURI(str) {
  return _.kebabCase(str).replace(/[.]/g, function(c) {
    return '%' + c.charCodeAt(0).toString(16);
  });
}

humanPageNumber: 4
limit: 10
nextPagePath: "/page/5"
numberOfPages: 6
pageNumber: 3
previousPagePath: "/page/3"
skip: 30

import * as React from "react"
import PropTypes from "prop-types"
import { Link } from "gatsby";

const Pagination = ({ data }) => {
  return (
    <div className="pagination">
      {data.numberOfPages > 1 && (
      <p className="page-data">{data.humanPageNumber} / {data.numberOfPages}</p>
      )}
      <ul>
        {data.previousPagePath && (
          <li><Link to={data.previousPagePath}>前のページ</Link></li>
        )}
        {data.nextPagePath && (
          <li><Link to={data.nextPagePath}>次のページ</Link></li>
        )}
      </ul>

    </div>
  )
}

Pagination.defaultProps = {
  data: {}
}
Pagination.propTypes = {
  data: PropTypes.object,
}

export default Pagination

{
  resolve: `gatsby-plugin-disqus`,
  options: {
    shortname: process.env.DISQUS_SHORTNAME
  }
}

const disqusConfig = {
    url: post_url,
    identifier: post.id,
    title: post.frontmatter.title,
  }
<Disqus config={disqusConfig} />

const PostTemplate = () => (
  <>
    /* Page Contents */
    <Disqus 
      identifier={post.id}
      title={post.title}
      url={`${config.siteUrl}${location.pathname}`}
    />
  </>
)