Lighthouseの点数が伸び悩むのでNuxtからGatsbyに変えてみた。点数も70点から92点に跳ね上がりました。

gatsby new my-gatsby-project https://github.com/gatsbyjs/gatsby-starter-blog

#!/bin/sh
 
# nuxt -> gatsby
# 記事ファイル名でフォルダを作成してその中に記事ファイルをindex.mdに変更して格納する。
# また記事の画像も同じフォルダに入れる。
# フロントマターにdateとheroImage画像名を追加する。
# 日付は記事ファイルの更新日、heroImageは記事ファイル名.jpg
# prism ヘッダ変更 ```language [タイトル] -> ```language:title="タイトル"
 
# input
org=./org　　　#記事フォルダ
heroImage=./heroImage　　#heroImage画像フォルダ
img=./images　 #記事で使用している画像フォルダ
 
# output
out=./out
for item in $org/*.md
do
    file=`echo ${item} | sed -e "s/\.md//g" | sed -e "s/\.\/org\///g"`
    fileDate=`date -r ${item} +%Y-%m-%dT%H:%M:%S.000Z`
    echo $file $fileDate
    mkdir $out/$file
    cp -a $item $out/$file/index.md
    cp -a $heroImage/$file.jpg $out/$file
    cp -a $img/$file* $out/$file
    sed -i '' -e "s/^description/date: ${fileDate}\nheroImage: ${file}\.jpg\ndescription/g" $out/$file/index.md
    sed -i '' -e "s/\(\`\`\`.*\).*\[\(.*\)\]/\1\:title\=\2/g" $out/$file/index.md
    sed -i '' -e "s/!](\/images\//!\]\(/g" $out/$file/index.md
done

yarn global add gatsby-cli
gatsby new akiboi-blog https://github.com/gatsbyjs/gatsby-starter-blog
yarn add node-sass gatsby-plugin-sass
yarn add @fortawesome/fontawesome-svg-core
yarn add @fortawesome/react-fontawesome
yarn add @fortawesome/free-solid-svg-icons
~~ yarn add gatsby-plugin-google-analytics ~~
yarn add gatsby-plugin-robots-txt
yarn add gatsby-plugin-sitemap
 
yan add gatsby-transformer-remark
yarn add gatsby-remark-prismjs prismjs
~~yarn add gatsby-remark-prismjs-title~~
yarn add gatsby-remark-code-titles

import React from "react"
import PropTypes from "prop-types"
import { useStaticQuery, graphql } from "gatsby"
import "../scss/main.scss"
・・・

import React from 'react';
import { graphql } from 'gatsby';
import Article from '../components/Article';
 
const BlogPostTemplate = ({ data, location }) => {
  const article = data.markdownRemark;
  const { previous, next } = data;
  return (
    <>
      <Article article={article} previous={previous} next={next} location={location} />
    </>
  );
};
export default BlogPostTemplate;
 
export const pageQuery = graphql`
  query BlogPostBySlug($id: String!, $previousPostId: String, $nextPostId: String) {
    site {
      siteMetadata {
        title
      }
    }
    markdownRemark(id: { eq: $id }) {
      id
      excerpt(pruneLength: 160)
      html
      frontmatter {
        title
        date(formatString: "MMMM DD, YYYY")
        description
        heroImage {
          childImageSharp {
            fluid(maxWidth: 1024, quality: 100) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }
    previous: markdownRemark(id: { eq: $previousPostId }) {
      fields {
        slug
      }
      frontmatter {
        title
        date(formatString: "MMMM DD, YYYY")
        description
        heroImage {
          childImageSharp {
            fluid(maxWidth: 1024, quality: 100) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }
    next: markdownRemark(id: { eq: $nextPostId }) {
      fields {
        slug
      }
      frontmatter {
        title
        date(formatString: "MMMM DD, YYYY")
        description
        heroImage {
          childImageSharp {
            fluid(maxWidth: 1024, quality: 100) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }
  }
`;

import React from "react"
import Image from "gatsby-image"
import Layout from "../components/layout"
import SEO from "../components/seo"
import FooterNavi from "../components/FooterNavi"
 
const Article = ({ location, article, previous, next }) => {
  const title = article.frontmatter.title
  const description = article.frontmatter.description
  const html = article.html
  const heroImage = article.frontmatter.heroImage
  const f = true
  return (
    <>
      <Layout location={location} title="{title}>"
        <SEO title="{title} description={description} article={f} heroImage={heroImage} />"
        <div className="contents">
          <div>
            <Image fluid={article.frontmatter.heroImage.childImageSharp.fluid} />
          </div>
          <article
            className="blog-post"
            itemScope
            itemType="http://schema.org/Article"
          >
            <h1 className="title">{title}</h1>
            <section
              dangerouslySetInnerHTML={{ __html: html }}
              itemProp="articleBody"
            />
          </article>
          <hr />
          <nav className="blog-post-nav">
            <FooterNavi previous={previous} next={next} />
          </nav>
        </div>
      </Layout>
    </>
  )
}
export default Article

import React, { useState } from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faHome, faServer, faNetworkWired, faGlobe, faIcons, faMortarPestle } from '@fortawesome/free-solid-svg-icons'
import { Link } from "gatsby"
import Logo from "./Logo"
 
export const Header = () => {
  const [open, setOpen] = useState(false)
  const menus = [
    {
      link: '/news/',
      icon: faHome,
      text: '新着',
    },
    ・・・
  ];
  return (
    <div className="menu">
      <nav>
      ・・・
        <div className="sp-menu">
          <div className="hamburger">
            <div className={"hamburger-line" + " " + (open ? "is-active" : "")} onClick={() => setOpen(!open)}>
              <span></span>
              <span></span>
              <span></span>
            </div>
          </div>
          {open && (
            <div className="hamburger-menu">
              <div className="logo"><Logo /></div>
              <ul className="menu-list">
                {menus.map(menu => (
                  <li><Link to={menu.link}><FontAwesomeIcon icon={menu.icon} /> {menu.text}</Link></li>
                ))}
              </ul >
            </div >
          )}
        </div>
      </nav>
    </div>
  )
}
export default Header

・・・ @include screen-mq(sm) {
  header {
    .menu {
      .pc-menu {
        display: none;
      }
      .sp-menu {
        display: flex;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        justify-content: center;
        .hamburger-menu {
          width: 100%;
          height: 100vh;
          background: $sp_background_menu_color;
          padding: 2rem 0;
          .logo {
            flex-direction: column;
            justify-content: center;
            padding: 1rem 0;
            width: auto;
            text-align: center;
            .wrapper {
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }
          .menu-list {
            display: flex;
            flex-direction: column;
            align-items: center;
            li {
              list-style: none;
              padding: 1rem 0;
            }
          }
        }
        .hamburger {
          width: 60px;
          height: 60px;
          position: fixed;
          top: 0;
          right: 0;
          .hamburger-line {
            width: 36px;
            height: 30px;
            margin-top: 15px;
            margin-left: auto;
            margin-right: auto;
            position: relative;
            cursor: pointer;
            span {
              width: 100%;
              height: 2px;
              background: $main_font_color;
              display: block;
              transition: 0.6s;
              position: absolute;
              &:first-child {
                top: 0;
              }
              &:nth-child(2) {
                top: 14px;
              }
              &:last-child {
                bottom: 0;
              }
            }
            &.is-active {
              span {
                transition: 0.6s;
                &:first-child {
                  transform: rotate(45deg);
                  top: 50%;
                }
                &:nth-child(2) {
                  opacity: 0;
                }
                &:last-child {
                  transform: rotate(-45deg);
                  top: 50%;
                }
              }
            }
          }
        }
      }
    }
  }
}