はじめに

こんにちは。えか太郎と言うものです。今回は静的サイトジェネレーター（SSG）であるGatsby.jsを使ってポートフォリオ兼技術ブログを作る話です。今回は概要とSSGとは？などといった概念から書いていきます。ちなみにGatsbyってなんて読むんですかね？読み方分からない人でもわかるようにかけるように頑張ります。

追記

主に公式の英語ドキュメントを参考に書きました。本記事だけで分からない部分がある場合は各自参照してください。英検2級程度の私でも理解できたのでそこまで難しくはないとおもいます。

Gatsby.jsとは？

Gatsby, Inc.が開発しているJavaScriptによるWebアプリケーションフレームワークです。オープンソースなので無料で使うことができます。また、多くのプラグインが開発されており、マークダウンだけではなくWordPressなどとも併せて使用が可能です。

なにができるのか？

端的に表すならば静的サイトジェネレーター（SSG）というべきでしょう。静的サイトジェネレーターについては以下の記事のほうがわかりやすかったので参照することを推奨します。

https://qiita.com/manabito76/items/fe91eefe11a74dcf5126
簡潔に言うとAPIだとか外部URLの画像とかをすべて取り込んだ静的なHTML（CSSなど含む）を生成してくれるツールというだけです。
主なメリットは高速化。これ以上はしらなくても困らないでしょう。

ちなみにQiitaで記事を書くときに使うマークダウン形式もGatsbyでは使うことができます。

前提条件

この記事を書く上で以下のことはできるものとして気にせず書きます。あしからず。わたしはWindowsでやりますがLinuxでもMacOSでもできたはずです。以下の記事が参考になるかもしれません。
MacOS環境で構築している記事

動作環境

Windows 10 pro
ThinkPad（みんなも買おう）
Celeron + RAM 12GB
Node.js（v20.10.0）
git version 2.43.0.windows.1

Node.jsとGitは必須なのでインストールしておいてください。GitDeskTopでできるかは検証していません。公式ドキュメントにはなかった（多分）

無難にLTS版でいいとおもいます。(私はv20.10.0）

あったほうが良い知識

HTML、CSS、JavaScript（基礎程度）
コマンドラインの操作
Node.js
GitHub及びGitコマンド
お好みのエディタ。私はVScode使います

環境構築

以上の前提条件（nodeやgit）の用意ができたら次にお進みください。

Gatsby-CLIのインストール

GatsbyはCLIを使用して操作します。ただしnpmパッケージとして提供されているんのでnpmコマンドですぐにインストールできます。ターミナルで以下のコマンドを入力してインストールしてください。インストールできないときはNodejsが正しくインストールできているか確認してください。

npm install -g gatsby-cli

バージョンの確認

gatsby --version

わたしはGatsby CLI version: 5.13.1がインストールされました。

使用状況のデータの収集について

初めてインストールしたときには匿名の使用状況のデータを収集することを通知するメッセージが表示されます。以下のコマンドを入力すれば収集を拒否または同意することができます。

無効化 gatsby telemetry --disable
有効化 gatsby telemetry --enable

おわりに

続編もあります。続編では実際に簡単なホームページを作成します。ぜひ御覧ください。