Skip to content
Htkyama Blog

WSL2 + VSCode でGatsby.jsを使う

Gatsby.js, VSCode, Windows10, WSL, Markdown1 min read

WSL2 に Ubuntu-20.04 をインストールして、VSCode から Markdown ファイルを編集する環境を作ります。

WSL2 への Ubuntu のインストール

WSL を有効にしたら、Microsoft Store からインストールしたい Linux ディストリビューションを選ぶだけです。

Microsoft Store で Ubuntu-20.04 を選んでインストールします。

Windows Terminal から WSL への接続

Windows Terminal の設定は、settings.jsonを編集します。

WSL に Ubuntu をインストールすると、settings.jsonの中に以下のような関連するプロファイルが追記されます。

settings.json
1{
2 "guid": "{07b52e3f-ee2c-5db4-bd2d-ba147ed6c273}",
3 "hidden": false,
4 "name": "Ubuntu-20.04",
5 "source": "Windows.Terminal.Wsl"
6}

あとはメニューから、Ubuntu-20.04を選べばWSLに接続できます。

WSL への Gatsby.js のインストール

Node.js のバージョン管理にnを使うこととします。

WSL に Ubuntu をインストールしたら、aptコマンドでnodejsnpmを一度インストールします。

$ sudo apt install nodejs npm

nnpmからインストールして、lts版のNode.jsをインストールします。

$ sudo npm install -g n
$ n --lts
14.16.0
$ sudo n lts

nodejsと一緒にnpmもインストールされます。

最後にaptで入れたnodejsnpmをアンインストールします。

$ sudo apt remove nodejs
$ sudo apt autoremove

Gatsby.jsのインストール

npmgatsby-cliをインストールします。

$ sudo npm install -g gatsby-cli

あとはgatsby developコマンドで、作成中の画面を見るころができます。

ありがたいことに、何も考えずにローカル側のWindowsからWWWブラウザでhttp://localhost:8000にそのまま接続できます。

VSCodeによる編集

VSCodeにRemote-WSLの拡張機能をインストールすることにより、 VSCodeから直接WSL上のファイルにアクセスして編集することができます。

この拡張機能により、WSLでgatsby developを走らせながら、VSCodeでWSL上のMarkdownファイルを編集し、 ビューワーとしてブラウザを見ながら編集することができます。便利。

編集が終わったら、VSCodeのgit機能を使い、リポジトリを操作することもできます。

Windows10でも、この環境であればGatsby.jsでのWebサイトの作成がストレスなくできます。

© 2021 All rights reserved.
RSS