Gatsbyのhello-worldがWindows10ではできなかったので、Ubuntu経由で構築できるのかを確かめてみます。
公式チュートリアル：https://www.gatsbyjs.org/tutorial/
Ubuntuの環境構築
以前の記事から始めてください。
【初心者向け】WSL2を利用してWindows10 HOMEでUbuntuを利用する方法
この記事が終わったら、まだUbuntuにはブラウザが入っていないので、追加でインストールします。
Firefoxをインストールする
以下のコマンドを実行して、Firefoxをインストールします。
SHELL
$ sudo apt install firefox
0.Gatsbyの基礎：公式サイト
Nodeをインストールする
以下のコマンドを実行して、Nodeをインストールします。
SHELL
$ sudo apt update
$ sudo apt -y upgrade
$ sudo apt-get install curl
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.1/install.sh | bash
.bash_profile にPATHを追記します。
SHELL
$ echo 'export NVM_DIR="$HOME/.nvm"' >> ~/.bash_profile
$ echo '[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"' >> ~/.bash_profile
$ echo '[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"' >> ~/.bash_profile
$ source ~/.bash_profile
これでnvm --versionを実行するとバージョンが表示されます。
次にNPMをインストールします。
SHELL
nvm install 10
nvm use 10
Gatsby CLIをインストールする
以下のコマンドを実行して、Gatsby CLIをインストールします。
SHELL
$ npm install -g gatsby-cli
Gatsbyサイトを作る
以下のコマンドを実行します。
SHELL
$ gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world
ここまでできたら、Ubuntuのデスクトップを立ち上げます。Xlunchを起動し、次のコマンドを実行します。
SHELL
$ startxfce4
以降は仮想デスクトップでコマンドを実行するときは「%」をつけます。
Terminal
% cd hello-world
% gatsby develop
Firefoxからhttp://localhost:8000/ にアクセスすると、下記の画面のようにHello worldが表示されます。
簡単ですが、以上です。
こんな単純なことがWindows10ではできないので、不便ですがこの環境で構築します。