Programming

Gatsbyブログの始め方

Published: 2020/07/04
GatsbyNetlify

使っていたブログを、WordPressからGatsbyに変えました。

Gatsbyとは?

静的サイトジェネレーターという WebサイトのHTMLファイルを生成してくれるツール。

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

一方で、静的ジェネレーターは、コンパイル時にHTMLファイルをあらかじめ生成しておく。 そして、生成したファイルを後悔するだけなので、サーバーの管理も不要になる。 そのため、セキュリティリスクが低く、表示速度が早くなる。

Gatsbyブログのメリット

  1. サーバーが必要ないので、サーバー代0円
  2. ブログの記事の更新履歴を管理できる。
  3. 画像の最適化表示も行ってくれる
  4. ホームページの表示が早くなる

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

  1. 大量の記事

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でサーバーを終了できる。

Gatsbyブログのを作るために調べたこと

今後追記予定

1 ページの作成

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に追記

import "typeface-allura"

CSSに追記

{ font-family: allura }

5 ブログ記事を表示する

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

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

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

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


Written by Emi

マイペースにWebサイトやWebアプリの制作をしています