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 のコマンド(下図赤枠)をコピーして

choco-installation

管理者権限で起動した 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を使用して実際にサイトを作って見ます。

Homeへ戻る