gatsby入門 チュートリアルをこなす 0.開発環境をセットアップする

# GCPにWordPress導入しようと思ってたけど。。。
なんやかんやとセットアップ超めんどくさい。
代替品ってないのかなと思い検索をちょこちょこ
# 静的サイトジェネレータ？
HTMLの生成ツールというのが何となくわかった。
とりあえずローカルに環境を作ってみよう。
（サーバレスで作成するのが主流のようなのでGCPに立てたVMをどうするかは別途検討）
# 静的サイトジェネレータのトレンド
gatsbyというのが流行りらしい。
流行りにのって、gatsbyをローカルに導入してみる。
# 環境構築
チュートリアルに従って導入していきましょう。
https://www.gatsbyjs.com/tutorial/part-zero/
### Install Node(Windows)
![2020-09-02_02h00_06.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567235/0b71b461-4075-d4f9-d6b8-bd9f4b48fb45.jpeg)
12.18.3 LTSインストール
![2020-09-02_02h01_52.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567235/677e4b1f-44f8-041c-143a-f53277841d6a.jpeg)
デフォルトでインストール
![2020-09-02_02h05_06.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567235/32208c9d-0cc3-33ef-c237-25490e846e38.jpeg)
### Install Git
済！
### gatsby-cliインストール
```npm install -g gatsby-cli```
※git bashで実施するとコンソール文字化けた。
### Create a Gatsby site
```gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world```
※カレントディレクトリにhello-worldフォルダが作成されます。
hello-worldディレクトリできた。
```cd hello-world```
```gatsby develop```
コンソールにはsuccessの嵐
### 動作確認
http://localhost:8000/
![2020-09-02_11h33_45.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567235/b2f8519e-ba7c-4f3e-80a8-d73dffcbba5f.jpeg)
イエイ！
### VS Code設定
表示(View)⇒拡張機能(Extensions)
![2020-09-02_11h40_51.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567235/c821fdf0-ca4a-b8b2-3c3a-f8e1e20aab83.jpeg)
「Prettier - Code formatter」と入力⇒インストール⇒再起動
![2020-09-02_11h43_07.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567235/9984ea82-7dca-b969-62b6-25d6bad79a1f.jpeg)


今回は以上
ありがとうございました。

# gatsbyの作業履歴
[今回：gatsby入門 チュートリアルをこなす 0.開発環境をセットアップする](https://qiita.com/3S_Laboo/items/a38536ed1fb976303b47)
[gatsby入門 チュートリアルをこなす 1. ギャツビービルディングブロックについて知る（１）](https://qiita.com/3S_Laboo/items/014ca205612f21d830aa)
[gatsby入門 チュートリアルをこなす 1. ギャツビービルディングブロックについて知る（２）](https://qiita.com/3S_Laboo/items/4a0f3fdf42c2aa466ed9)
[gatsby入門 チュートリアルをこなす 2.  ギャツビーのスタイリングの概要](https://qiita.com/3S_Laboo/items/41bb0f5f7cabecedc4c2)
[gatsby入門 チュートリアルをこなす 3. ネストされたレイアウトコンポーネントの作成](https://qiita.com/3S_Laboo/items/cc24aae21b22b936488d)
[gatsby入門 チュートリアルをこなす 4. ギャツビーのデータ](https://qiita.com/3S_Laboo/items/49f04f8c9da62a6058cf)
[gatsby入門 チュートリアルをこなす 5. ソースプラグインとクエリされたデータのレンダリング](https://qiita.com/3S_Laboo/items/c9a9a9c3c1e4d0851e6b)
[gatsby入門 チュートリアルをこなす 6.  変圧器プラグイン※Transformer pluginsのgoogle翻訳](https://qiita.com/3S_Laboo/items/226653c9f91cb3a217c7)
[gatsby入門 チュートリアルをこなす 7. プログラムでデータからページを作成する](https://qiita.com/3S_Laboo/items/f80d2c5a36207af71a01)
[gatsby入門 チュートリアルをこなす 8.  公開するサイトの準備](https://qiita.com/3S_Laboo/items/1f50c15a5eddbde6ad18)
[gatsby入門 ブログ作ってサーバーにアップしてみる](https://qiita.com/3S_Laboo/items/7c3ecb0f409fb143f367)
# 参考
[静的サイトジェネレーター Gatsby](https://qiita.com/umamichi/items/9bd08a21fddc71588efc)
[gatsbyのチュートリアル](https://www.gatsbyjs.com/tutorial/part-zero/)
# GCPでVM立てた作業履歴は以下に記載しています。
[放置してたGCPを復活させる（１）- プロジェクト作成 -](https://qiita.com/3S_Laboo/items/62322280d1844d461bab)
[放置してたGCPを復活させる（２）- VMインスタンス作成 -](https://qiita.com/3S_Laboo/items/03b54621479e193101f7)
[放置してたGCPを復活させる（３）- gcloud CLIインストール -](https://qiita.com/3S_Laboo/items/75682b3d008d0fdce355)
[放置してたGCPを復活させる（４）- PC(Windows10)からVMにssh接続 -](https://qiita.com/3S_Laboo/items/63a17738071a171decb1)
[放置してたGCPを復活させる（５）- VMのIPを固定する -](https://qiita.com/3S_Laboo/items/c897628aec6d04f4fe5f)
[放置してたGCPを復活させる（６）- nginxインストールとhttp設定 -](https://qiita.com/3S_Laboo/items/9a8446f84baa80252cb9)
[放置してたGCPを復活させる（終わり）- 独自ドメインの設定 -](https://qiita.com/3S_Laboo/items/cce944d49cbd1d4aa745)
[GCP + CentOS6(VM) + nginx にSSL(certbot)入れちゃう](https://qiita.com/3S_Laboo/items/136dfd2d274281409bcf)
[nginxでIP直打ちを拒否る](https://qiita.com/3S_Laboo/items/56886d2ec6083454a24c)