GatsbyJSとTypeScriptでブログを作成して公開する(1) ~ 環境構築編 ~

2020.11.21

TECH

GatsbyJSとTypeScriptでブログを作成して公開する(1)

~ 環境構築編 ~

これから何回かに分けて、このブログ作成を通して学んだ、

「GatsbyJSを用いたブログ作成」について書いていきたいと思います。

今回は、環境構築を行っていきます。

環境構築

GatsbyJSでウェブサイトを作成するためには、以下のインストールが必要になります。

git (バージョン管理)
node.js (JavaScript実行環境)
gatsby cli (GatsbyJSのサイトの生成やローカル実行)

ちなみに筆者は仕事ではMacを、個人ではWindows(とたまにUbuntu)を触っています。

このブログはWindowsマシンで開発しました。

Git のインストール

Git公式が丁寧なのでそちらを参考にインストールしてください。

また、機会があればコマンド紹介とともに、ご説明します。

Node.js のインストール

Node.jsのインストール方法って調べるといろんな方法が大量に出てきます。

正直言ってどれでもいいのですが、

せっかくなのでWindowsもMacもバージョン管理ができる方法でインストールしたいと思います。

MacのでのNode.js実行環境

(anyenv)[https://github.com/anyenv/anyenv] + nodenv という組み合わせで行きます。

anyenv をインストールする

※Homebrewインストール済みとします。

ターミナルを開いて


    $ git clone https://github.com/anyenv/anyenv ~/.anyenv

それぞれご自身の使っているシェルごとに、

bash ユーザー:

    $ echo 'export PATH="$HOME/.anyenv/bin:$PATH"' >> ~/.bash_profile

Ubuntu Desktop:
    $ echo 'export PATH="$HOME/.anyenv/bin:$PATH"' >> ~/.bashrc

Zsh ユーザー:
    $ echo 'export PATH="$HOME/.anyenv/bin:$PATH"' >> ~/.zshrc

Fish shell ユーザー:
    $ set -Ux fish_user_paths $HOME/.anyenv/bin $fish_user_paths

上記のコマンドを実行、ターミナルを起動しなおすと、エラーが出るかと思うので、

    eval "$(anyenv init -)"

もそれぞれのシェルの設定ファイルに記載してターミナルを再起動すればOKです。

nodenv をインストールする

anyenv を使ってnodenvをインストールしていきます。


    $ anyenv install nodenv

これだけでインストールできます。

Node.js のインストール

まずはインストール可能なバージョンを確認


    $ nodenv install -l
    0.1.14
    0.1.15
    0.1.16
    0.1.17
    0.1.18
    0.1.19
    ...

ずらずらとバージョンが表示されますので、お目当てのバージョンを見つけて、


    $ nodenv install 14.15.1

を実行すると指定のバージョンのインストールが開始されます。

上記はVersion: 14.15.1 を指定していますが、

Node.jsのホームページを確認して、

LTS(Long Term Support)となっているバージョンを入れるのが良いでしょう。

nodenv .node-versionなどの設定値をみて、

ディレクトリごとにNode.jsのバージョンを切り替えることが可能です。

また、今回は触れませんが、

package.jsonの値を見て自動でバージョンを切り替えてくれるプラグイン

nodenv-package-json-engine

というものもあるようです(筆者はまだ試していませんが、、、)。

次のコマンドを実行してください。


    # グローバルの場合
    $ nodevn global 14.15.1

あるディレクトリだけ別のバージョンを、ということであれば、


    $ nodenv local 12.18.3

を実行すれば、.node-versionファイルが作成され、このディレクトリ以下では

12.18.3が使用されるようになります。

今回はどちらでもかまいません。

npm (Node package manager) のアップデート

上記でNode.jsのインストールは完了ですが、npm をアップデートしておきます。

npm はNode.js のインストール時に一緒にインストールされています。


    $ npm install -g npm

これでMacでのNode.js実行環境は完成です！

Windowsでの環境構築

公式チュートリアルでは、“Node.jsのウェブサイトに行ってダウンロードしてこい” とだけ書いてあります。

殊、 “モダンな”Web開発に関してはWindows ユーザーは肩身が狭いですが、

筆者はWindowsで開発したかったため(Mac持っていないので)、

こちらもNode.jsのバージョン管理ができるようにしたいと思います。

調べるといくつか出てきますが、以下が有名どころのようです。

nvm-windows
nodist

今回は、nodistを使ってみます。

また、nodistのインストールにはWindows向けのパッケージマネージャー Chocolatey を使用します。

Chocolatey (Windows 用パッケージマネージャー)のインストール

公式のインストールページにアクセスして、

Step 2 のコマンド(下図赤枠)をコピーして

管理者権限で起動したPowerShellに貼り付け、実行。

処理が終わったら、


PS C:\Users\Kohsuk> choco -v

で、正常に実行されればインストール成功です。

nodist (Node.jsのバージョン管理) のインストール

次に、nodistをインストールします。

管理者権限でPowerShell を起動して、、、


PS C:\WINDOWS\system32> choco install -y nodist

処理が完了したら、、、


PS C:\WINDOWS\system32> nodist -v
0.9.1

で、バージョンが表示されたらOKです。

nodistでNode.jsをインストールする

本題のNode.jsをインストールします。

まずはインストール可能なバージョンを確認


PS C:\WINDOWS\system32> nodist dist
  0.1.14
  0.1.15
  0.1.16
  0.1.17
  0.1.18
  0.1.19
...

ずらずらとバージョンが表示されますので、お目当てのバージョンを見つけて、


PS C:\WINDOWS\system32> nodist + 14.15.1

を実行すると指定のバージョンのインストールが開始されます。

上記はVersion: 14.15.1 を指定していますが、

Node.jsのホームページを確認して、

LTS(Long Term Support)となっているバージョンを入れるのが良いでしょう。

nodist はpackage.jsonや.node-versionなどの設定値をみて、

プロジェクトやディレクトリごとにNode.jsのバージョンを切り替えることが可能です。

(使用バージョンの決定条件の優先順位 -> https://github.com/nullivex/nodist#scope-precedence)

今回は、globalに設定して使ってみます(というか次回以降紹介するコマンドで、このバージョンでpackage.jsonが作られるので、次からはこれを見てバージョンが決定されるはずです)。

次のコマンドを実行してください。


PS C:\WINDOWS\system32> nodist 14.15.1

npm (Node package manager) のアップデート

上記でNode.jsのインストールは完了ですが、npm をアップデートしておきます。

npm はNode.js のインストール時に一緒にインストールされています。


PS C:\WINDOWS\system32> npm install -g npm

これでWindowsのNode.js実行環境は完成です！

Gatsby CLI のインストール

次にGatsby CLI をインストールします。

Gatsby CLI はコマンド一発でGatsby のサイトをテンプレートから作成したり、

ローカルサーバーで実行したり、GraphQLのIDEであるGraphiQLでクエリを編集したり

できるツールです。

使い方は、次回以降にご紹介します。

インストール(Mac / Windows 共通)

Windows ではPowerShell を Mac ならターミナルを開いて、


    npm install -g gatsby-cli

を実行します。

処理が完了したら


    gatsby --help

でヘルプが実行されれば、インストール完了です。

次回はGatsby CLIを使用して実際にサイトを作って見ます。