---
title: "Gatsbyで始めるブログ"
date: "2020-11-27"
overview: "Gatsbyでブログを始めたので簡単に説明する"
category: "study"
tag: ["web","gatsby"]
---

こんにちは、この記事にはこのブログを作った際の記録が含まれています。

## Contents

## 紹介動画

とりあえず以下の動画を見ていただければ、たいていはわかると思います。

<iframe src="https://drive.google.com/file/d/1-hi6Y5FsovQU0OsjyyN9pesxk6lk0ge1/preview" width="560" height="315" allow="fullscreen"></iframe>

以下では、省略した部分や追記が必要な部分を解説しますー。

## ウェブサイトを作る方法

ウェブサイトを作る際には基本的に以下のような方法がある。

- ワードプレスで作る
- HTMLで作る。
- ウェブサイト制作サービスを利用する(wixとかね)
- 静的サイトジェネレーターで作る。

### 静的サイトジェネレーターを使うメリット

- **超高速**

→データベースとのやり取りがない分異様に高速。

→Gatsbyにはいろいろと高速化のタネが仕込んである。

- **カスタマイズ性の高さ+透明度**

→ページを1からコーディングできる。そのため非常に自由度が高い。

→上の性質から、ブラックボックス化しにくいのもポイント。

　(どこに何の処理を書いたのかわかりやすい。個人的にはphpのwordpressよりかははるかにソースの可読性が高い。)

### デメリット

- **プログラムの知識が必要**

→特にプラグインの導入やページのコーディングが必須なので、プログラムができないと何にもできない。

- **自由に作れる分デザイン等の面での敷居が高い**

→wordpressはテーマを導入するだけでそれなりのデザインのものが完成するが、Gatsbyではそうもいかない

→サイトの構造からcssまですべて自力で作る必要がある。

------

個人的には、個人規模のホームページ、特にポートフォリオサイトなどには最適であると思う。

以上のことは静的サイトジェネレーターの特徴であるため、別にGatsbyに限った話ではない。

静的サイトジェネレーターにはほかにも

- Hexo
- Jekyll
- HUGO
- VuePress
- Next.js

などがある。

詳しくは[ここ](https://jamstack.org/generators/)を確認されたし

今回は適当にGatsbyを試してみることにした。

Gatsbyは静的サイトジェネレーターの一種でreact.jsで動く。(当方react.jsは未経験)

## Gatsbyの導入

まずは、Node.jsを導入する。[ここ](https://nodejs.org/ja/)のLTSを導入しておけば大丈夫。

Node.jsのコマンドプロンプト上で

→Gatsby.cliのインストール(npm install --global gatsby-cli)

→新プロジェクト作成(gatsby new ○○)(○○にプロジェクト名を入れる)

→プロジェクトのフォルダが生成される。

→開発用環境の始動(gatsby develop)　リアルタイムで更新される。localhost:8000 で確認可能

本番用のビルドはgatsby buildでビルドしたあと、gatsby serveで確認用サーバー立ち上げ

→public配下がビルドしたファイルなので、それをサーバー上に置けばサイトを公開できる。

## プラグインの導入方法

先に進む前にプラグインの導入方法を確認しておきましょう。

基本的にはnode.jsのコマンドプロンプトでコマンドを打ち込んでgatsby-config.jsに追記するだけです。

打ち込むコマンドと追記する内容は[公式のプラグイン情報のページ](https://www.gatsbyjs.com/plugins/)にあります。

英語の情報ですが頑張って読んでください。~~**せっかく英語学んでいるんだしこのくらいは読めるようになりたいよね**~~

※どんなプラグインがあるのか知りたい方は[ここ](https://takumon.com/2018/10/21/)を見てみるといいでしょう。

## マークダウン形式で記事を投稿する。

markdownを認識するためにはgatsby-source-filesystemプラグインが必要。

→読み込むフォルダを指定する。

ここではsrcは以下にpostsというフォルダを追加してそこにmdを突っ込んでいく方式にした。

gatsby-config.jsのpluginsの欄に以下を追記する

    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `posts`,
        path: `${__dirname}/src/posts`,
      },
    },

markdownの中身を吸い出す。
gatsby-transformer-remarkをインストールする

**ファイルの存在認識とファイルの内容認識で別のプラグインが必要。**

とりあえず、ファイルを認識して、そこにslug(url)を設定する(相対パスを用いて自動的に)
その後、そのslugにアクセスされたときに、あらかじめ作成しておいたテンプレートにファイルの内容を流し込んで記事のhtmlを作成している。
ファイルの存在とslugが結びついたのでファイルのデータを得たときにタイトルやslugを組み合わせて適当に表示することも可能となった。

参考:https://reffect.co.jp/react/gatsby-basic-tutorial-for-beginners-2

## cssの導入

→可読性を考えてモジュールで作っていく(ヘッダーやフッターごとにファイルを分けて各部分ごとにcssを設定する。)

cssの書き方自体は変わらない。

.クラス名{
	変更する要素:プロパティ;
}

と書いて

import styles from "./(cssファイル名)"

でcssを読んで

<div className={styles.クラス名}>

とやれば簡単にcssの適用範囲を設定できる。便利。

## 背景の文字が出てくるあれ

この辺は動画でも解説しているんで、とりあえずソースコードのっけときますねー

これが背景の文字のアニメーションをランダムに調節して、それをhtmlにして出力する関数。

グリッドが20×20で400個分の文字のオブジェクトがあるから、その各々を一括で適当に生成する感じ。

~~(この書き方がいいのかどうかはよくわからない。とりあえず意図したとおりに動いてはいる)~~

var roop = () => {
    const items = [];

    var min = 0;
    var max = 16;

    for (let i = 0; i < 400; i++) {

        var Rand = min + (Math.random() * (max - min)) + "s";

        var container = {
            animationDelay: Rand,
            fontSize: 2 + Math.random() * 2 + "vmax"

        }
        if (i % 3 === 0) {
            items.push(
                <div className={styles.gridbox}>
                    <div className={styles.gridcontent} style={container}>
                        <p>{text[i % text.length]}</p>
                    </div>

                </div>

            )
        }
        else if (i % 3 === 1) {
            items.push(
                <div className={styles.gridbox} >
                    <div className={styles.gridcontent2} style={container}>
                        <p>{text[i % text.length]}</p>
                    </div>

                </div>
            )
        }
        else {
            items.push(
                <div className={styles.gridbox}>

                </div>
            )
        }
    }
    return <div className={styles.grid}>{items}</div>;

};

------

styles.gridcontentが縦書きの文字でstyles.gridcontent2が横書きの文字列になってます。

.gridcontent{
  font-family: "Enoch";
  animation-name: flash;
  animation-duration: 16s;
  animation-fill-mode: both;
  animation-iteration-count:infinite;
  animation-timing-function: ease-in-out;

  pointer-events: none;
  user-select:none;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  overflow: visible;
  width: 10vw;
  height: 10vh;
}

**pointer-events: none;でクリックイベントを無効化できる。**
背景に文字とかを入れる際に反応しなくなる

フォントはサーバー上にあげたものを読み込んでいます。[詳しくはここ](https://www.gatsbyjs.com/docs/using-local-fonts/)

文字の大きさは画面サイズに応じて変動させているので解像度や縦横比に依らずにそれなりのクオリティで表示されています。

------

適用しているアニメーションはどちらも同じ(⇓)

@keyframes flash {
  0% {
      opacity:0;
      transform: translateY(40%);
  }
  7% {
      opacity:1;


  }
  14% {
      opacity:1;
  }
  21% {
      opacity:0;
      transform: translateY(-40%);

      
  }
  100%{
      opacity:0;
  }
}

消えている時間も考慮して表示:消失=1:4くらいの比で作ってみた。

opacityは透明度(0で完全に透明)

このアニメーションを無限ループさせている。

生成時に乱数で適当にdelayをセットしているのでいい感じの見た目に。

## まとめ

とりあえずこんな感じで発表動画にした部分の解説は終了です。

時間がないのでこんな感じの簡易的な説明になってしまいましたが、後日時間があれば追記を作るかも