Programming

WordPressからGatsby.jsにブログを変えました

Published: 2020/07/04 | Updated :2020/08/20
Gatsby

ブログをWordPressからGatsbyに変えました。

Gatsbyとは?

GatsbyはWebサイトのHTMLファイルを生成してくれるツールです。 静的サイトジェネレーターと呼ばれています

WordPressなどのCMSでは、データベースで記事を管理しています。 URLにアクセスされたときに、データベースから記事を取得して、HTMLを生成して表示させる仕組みです。

一方で、静的ジェネレーターは、コンパイル時にHTMLファイルをあらかじめ生成していきます。 URLにアクセスされた時には、生成してあったファイルを表示するだけなので、表示速度が早くなります。 サーバーやデータベースの管理も不要になるので、セキュリティリスクが低くなるようです。

Gatsbyブログにした理由

Gatsbyブログのメリット

  1. サーバーが必要ないので、サーバー代が0円になる
  2. ブログ記事の更新履歴を管理できる
  3. ホームページの表示が早くなる

逆にデメリットとしては、

  1. 大量の記事を保管するサイトには向かない
  2. 自分でプログラムを書く必要がある(gitやReact、GraphQLの知識が必要)

Gatsbyでブログを作るまでにやったこと

まずは、Gatsbyをインストール

Gatsbyをインストールします

npm install -g gatsby-cli

ブログ用のテンプレート一式をダウンロードして、プロジェクトを作成します。

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

sample-blogはプロジェクト名で、好きなファイル名に変えてOK。 sample-blogディレクトリの中に初期ファイルが作成されます。

sample-blogディレクトリ内に移動し、開発サーバーを起動させます。

cd sample-blog
gatsby develop

起動したら、Webブラウザで下記URLにアクセスします

http://localhost:8000/

画面上にHello world!が表示されればOK!

ctrl+Cでサーバーを終了できます。

ページを作成する

2 画像の表示

gatsby-imageという機能を使うと、画像の最適化や高速化をしてくれます。

プラグインを導入

npm install gatsby-image
npm install gatsby-transformer-sharp gatsby-plugin-sharp
npm install gatsby-source-filesystem

gatsby-config.jsに設定

module.exports = {

  .....

  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `src`,
        path: `${__dirname}/src/assets/`,
      },
    },
  ],
}

graphQLで使いたい画像を取得。

Logo.js
import React from "react"
import Img from "gatsby-image"
import { Link, useStaticQuery, graphql } from "gatsby"

const Logo = () => {
  const data = useStaticQuery(graphql`
    query {
      file(name: { eq: "logo" }, extension: { eq: "png" }) {
        childImageSharp {
          fluid(maxWidth: 100, pngQuality: 80) {
            ...GatsbyImageSharpFluid
          }
        }
      }
    }
  `)
  return (
    <Img fluid={data.file.childImageSharp.fluid} alt="logo" />
  )
}

export default Logo

※同じページで複数画像使うときはエイリアスをつかう。

export const query = graphql`
     query {
      apple: file(name: { eq: "apple" }, extension: { eq: "png" }) {
        childImageSharp {
          fluid(maxWidth: 100, pngQuality: 80) {
            ...GatsbyImageSharpFluid
          }
        }
      },
      lemon: file(name: { eq: "lemon" }, extension: { eq: "png" }) {
        childImageSharp {
          fluid(maxWidth: 100, pngQuality: 80) {
            ...GatsbyImageSharpFluid
          }
        }
      }
    }
  `)

画像の表示箇所

<Img fluid={apple.file.childImageSharp.fluid} alt="apple" />

3 CSSを使う

4 フォントを変える

やり方①typography.jsを使う

やり方②Typefaceを使う

typefaceをインストール

npm install --save typeface-allura

typefaceの名前は↓のpackagesの中に入っています the typefaces project

gatsby-browser.jsにtypefaceを追記します。

import "typeface-allura"

CSSにフォントファミリーを追記します。

{ font-family: allura }

5 ブログ記事を表示する

6 ワードプレスのデータをGatsbyに移行する

Wordpressから記事データ(XML形式)をエクスポートします。 markdown形式に置き換えます。

7 GatsbyブログをNetlifyで公開する

8 ハンバーガーメニューの作成

参考図書

参考図書は、Gatsbyチュートリアルと本です。