Gatsby + Netlifyで静的サイトをつまづきながら1時間で立ち上げる

Gatsby.jsの [Quick Start](https://www.gatsbyjs.com/docs/quick-start/) をつまづきながら進めました。
5分～10分程度で試せる想定が1時間ほどかかりました。。
進めるにあたり [GatsbyとNetlifyで簡単にブログを作成](https://qiita.com/k-penguin-sato/items/7554e5e7e90aa10ae225) を参考にさせていただきました。


## 0. 環境
- Windows 10
- 各操作はVSCodeのコンソールから行っています。
- [Netlify](https://www.netlify.com/) のアカウントを用意する必要があります。


## 1. Gatsby CLIをインストールする
```sh
$ npm install -g gatsby-cli
```

既にインストール済みであればパッチが当たります。

```sh
   ╭────────────────────────────────────────────────────────────────╮
   │                                                                │
   │      New patch version of npm available! 6.14.6 -> 6.14.8      │
   │   Changelog: https://github.com/npm/cli/releases/tag/v6.14.8   │
   │               Run npm install -g npm to update!                │
   │                                                                │
   ╰────────────────────────────────────────────────────────────────╯
```


## 2. プロジェクトを作成する
[こちら](https://www.gatsbyjs.com/starters/?v=2)からサンプルを選びます。
今回はポートフォリオのサンプルを選択しました。

![sample.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/422235/0a6bfaa6-876c-9179-dba3-23e26ecf04f0.png)

サンプルコマンドが書いてあるのでコピーしてコンソールへ移動します。
![installcommand.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/422235/208be13c-694e-27b1-c2f1-471f37d8fc4c.png)

実行すると早速セキュリティエラーが出ました。

```sh
$ gatsby new gatsby-starter-portfolio-cara https://github.com/LekoArts/gatsby-starter-portfolio-cara
gatsby : このシステムではスクリプトの実行が無効になっているため、ファイル XXX\gatsby.ps1 を読み込むことができません。詳細については、「about_Execution_Policies」(https://go.micros
oft.com/fwlink/?LinkID=135170) を参照してください。
発生場所 行:1 文字:1
+ gatsby new gatsby-starter-portfolio-cara https://github.com/LekoArts/gatsby-starter-portfol ...
+ ~~~~~~
    + CategoryInfo          : セキュリティ エラー: (: ) []、PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess
```

以下の記事で対処法を確認します。
[PowerShell のスクリプトが実行できない場合の対処方法](https://qiita.com/Targityen/items/3d2e0b5b0b7b04963750)

引用:
`PowerShell のスクリプトの実行が実行ポリシーによって許可されていないことが原因`

実行ポリシーを確認します。

```sh
$ Get-ExecutionPolicy
Restricted
```
制限されているので、記事にある恒久的対処法を実施します。

```sh
$ Set-ExecutionPolicy RemoteSigned
Set-ExecutionPolicy : レジストリ キー 'HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\PowerShell\1\ShellIds\Microsoft.PowerShell' へのアクセスが拒否されました。 既定 (LocalMachine) のスコープの実行ポリシーを変更するに
は、[管理者として実行] オプションを使用して Windows PowerShell を起動してください。現在のユーザーの実行ポリシーを変更するには、"Set-ExecutionPolicy -Scope CurrentUser" を実行してください。
発生場所 行:1 文字:2
+  Set-ExecutionPolicy RemoteSigned
+  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    + CategoryInfo          : PermissionDenied: (:) [Set-ExecutionPolicy], UnauthorizedAccessException
    + FullyQualifiedErrorId : System.UnauthorizedAccessException,Microsoft.PowerShell.Commands.SetExecutionPolicyCommand
```

PowerShellに管理者権限がないようです。
以下の記事で対処法を確認しました。
[PowerShell スクリプトの実行が無効となっている場合の対処法](https://totech.hateblo.jp/entry/2017/09/29/162411)

引用:
`現在のユーザーに関しての権限がある場合は以下のように-Scope CurrentUserオプションを付与すると実行できる場合もある。`

VSCodeからPowerShellを管理者権限で起動する方法がわからなかったので、`-Scope CurrentUser` オプションで実行してみます。

```sh
$ Set-ExecutionPolicy -Scope currentUser RemoteSigned
```

エラーや成功などは出ませんが、実行ポリシーは変更できていました。

```sh
$ Get-ExecutionPolicy
RemoteSigned
```

再度プロジェクトを作成します。

```sh
$ gatsby new gatsby-starter-portfolio-cara https://github.com/LekoArts/gatsby-starter-portfolio-cara
info Creating new site from git: https://github.com/LekoArts/gatsby-starter-portfolio-cara.git
Cloning into 'gatsby-starter-portfolio-cara'...
remote: Enumerating objects: 25, done.
remote: Counting objects: 100% (25/25), done.

:

Your new Gatsby site has been successfully bootstrapped. Start developing it by running:

  cd gatsby-starter-portfolio-cara
  gatsby develop
```
成功しました。


## 3. ローカルで起動する
```sh
$ cd gatsby-starter-portfolio-cara
$ gatsby develop
success open and validate gatsby-configs - 0.017s
success load plugins - 0.163s

:

You can now view cara in the browser.
⠀
  http://localhost:8000/
⠀
View GraphiQL, an in-browser IDE, to explore your site's data and schema
⠀
  http://localhost:8000/___graphql
⠀
Note that the development build is not optimized.
To create a production build, use gatsby build
⠀
success Building development bundle - 12.159s
```

ブラウザから `http://localhost:8000/` へアクセスします。

![site.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/422235/0d03995c-1e97-b65d-d1c3-45ffc86d8d8d.png)

GraphQL へもアクセスしてみます。 `http://localhost:8000/___graphql`
アクセスできました。

![graphql.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/422235/339e22ad-5842-95c5-752c-51451d20ebde.png)

GraphQLはFacebookが開発しているクエリ言語とのこと。
これは追々勉強しようと思います。


## 4. GitHubへプッシュする
先にGitHub上でリポジトリを作っておきます。
![createrepository.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/422235/277ef9bf-690f-7f89-afbf-385f0c41cf3d.png)

リポジトリが出来たらURLをコピーしておきます。
![url.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/422235/107ec35c-f179-f904-2a28-a4418d03d3a6.png)

コンソールへ戻ります。

ローカルでは既にコミットされた状態です。`git log`で確認します。

```sh
$ git log
commit 0ba88f461cd6a584b1fb27e7bd49b675af3f2345 (HEAD -> master)
Author: k <XXXXX@XXXXX>
Date:   Thu Sep 10 20:38:44 2020 +0900

    Initial commit from gatsby: (https://github.com/LekoArts/gatsby-starter-portfolio-cara.git)
```

リモートリポジトリを追加します。

```sh
$ git remote add origin https://github.com/kyonc5/gatsby-starter-test.git
```

pushします。

```sh
$ git push origin master  
```


## 5. Netlifyへデプロイする
Netlifyを開き`New site from Git`を押します。
![newsite.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/422235/b8ba4988-adc3-5149-c086-b5ba2f3b35fa.png)

`GitHub`を押します。
![connecttogit.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/422235/454dc73a-2369-d045-013d-ecab1a95a893.png)

リポジトリを選択します。
![selectrepo.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/422235/f4560ba6-fd7e-f417-c558-37a824ce449f.png)


`Deploy site`を押します。
![deploysite.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/422235/34e35837-8357-57bf-ea7c-77a3acf4d875.png)

deployされるのを待ちます。
![progress.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/422235/7c261bae-e4b3-ce67-b3d1-dd3655328a5a.png)

完了すると以下の状態になります。

![published.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/422235/c1cdaf0b-f466-22da-dd26-0c204c98b80a.png)

表示されたURLへアクセスします。

![access.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/422235/a2b26fcc-fa1e-eddd-ee8c-fef1ddd87fc6.png)

アクセスできました。これで完了です。


## 6. サイトを更新する
画面を編集してみます。
選んだサンプルによってファイルが違いますが、今回は`intro.mdx`ファイルを更新します。

```
# Hi, I'm Jane Doe
```

↓

```
# Hi, I'm kyonc5
```

commit、pushします。

```#sh
$ git add .
$ git commit -m "update name"
$ git push origin master
```

自動でデプロイされページが更新されます。

![updatesite.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/422235/2bbf0a92-5cd2-9f5c-49a0-12f0d16f1020.png)

出来たページはこちらです。

- https://laughing-darwin-18a65b.netlify.app/

##参考
以下参考にさせていただきました。ありがとうございました。

- [GatsbyとNetlifyで簡単にブログを作成](https://qiita.com/k-penguin-sato/items/7554e5e7e90aa10ae225)
- [PowerShell のスクリプトが実行できない場合の対処方法](https://qiita.com/Targityen/items/3d2e0b5b0b7b04963750)
- [PowerShell スクリプトの実行が無効となっている場合の対処法](https://totech.hateblo.jp/entry/2017/09/29/162411)