【STACKBIT】GUIのみでJAMStackを構築するSTACKBITを使ってみた【JAMStack】


## STACKBITとは
<img width="1624" alt="スクリーンショット 2020-03-11 19.57.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33165/840cd2a5-820d-845d-0a2f-99b423de4f5d.png">
https://www.stackbit.com/

画面上でポチポチってするだけで、JAMStackが組めるという破壊的なサービス。
しかも今無料ということなので、触ってみました。

## 必要なもの
基本はGithubAccountのみ。
NetlifyのAccountも必要ですが、これもGithubAccountでログインできます。
予め取っておいたほうが進みは早いと思います。

## 実際にやってみる
### サイト作成
[SITE BUILDER]を選択します
<img width="1624" alt="stackbit.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33165/22a900e4-5b03-47fe-e0c6-51d3dfa84a4c.png">

### テーマ選択
まずはテーマを選びます。今回は`Libris`を選択します。
<img width="1663" alt="スクリーンショット 2020-03-11 20.07.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33165/06f7cc38-d7c9-0cd7-f868-13a5bbdb07d7.png">

### 静的サイトジェネレーター選択
次にSitegeneratorを選びます。今回は`Hugo`で進めていきます
<img width="1657" alt="スクリーンショット 2020-03-11 20.07.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33165/36e6a17c-8ab1-653a-b894-c0c6a1d3c616.png">

### HeadlessCMS選択
次にCMSを選びます。いくつかありますが、今回はnetlifyのAccountでそのまま使えるので`netlify CMS`にします。
<img width="1654" alt="スクリーンショット 2020-03-11 20.07.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33165/1e5ab849-837b-e204-d876-6d304cdc9792.png">

### Repositoryとホスティング先選択
最後にRepositoryとデプロイ先を選びます。
現段階では`Github`と`netlify`のみなのでそのまま[Connect Account]を選択します。
<img width="1658" alt="スクリーンショット 2020-03-11 20.07.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33165/289ed9ed-2ca2-015b-b8da-d2dd114c1fb0.png">

### Github連携＆認証
Githubとの連携画面になります。
サイト名がそのままGithubのRepository名とnetlifyのサイト名になります。
Githubのチェックボックスを押して[Connect]を選択します。
<img width="1667" alt="スクリーンショット 2020-03-11 20.08.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33165/7b765bf5-4ed4-216e-911c-108f6b6e7fce.png">

GithubAccountの認証画面になるので、そのまま[Authorizze Stackbit App by Stackbit]を選択します。
<img width="754" alt="スクリーンショット 2020-03-11 20.11.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33165/bfbee002-4f38-e742-e82b-71b5318751ea.png">

Githubへの`Stackbit App`のInstallが始まります。
Accountを選択する画面になるので、使用するGithubAccountを選択します。
<img width="1249" alt="スクリーンショット 2020-03-11 20.11.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33165/f2c53eb2-c36c-2a70-05c3-28cd77b0b1f0.png">

Installする`Stackbit App`の権限を選択します。
今回は触って見るだけなのですべてのRepositoryにしますが、最初にRepositoryを作っておけば作ったRepositoryを選択できます。
<img width="1084" alt="スクリーンショット 2020-03-11 20.11.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33165/75ebbe66-d24f-eed4-2f56-40a3d0b4f3be.png">

Account認証とインストールが終わると、前の画面にもどりGithubのところに`Connected`と表示されます。
またボタンも[CREATE YOUR PROJECT]に変わるので、選択して進みます。
<img width="1666" alt="スクリーンショット 2020-03-11 20.11.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33165/1652b25d-bef5-23e9-3a15-60a32bcbcb07.png">

### デプロイ開始
ダッシュボードに移り、デプロイが始まります。
<img width="1669" alt="スクリーンショット 2020-03-11 20.12.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33165/07eff5f0-961b-a7b4-146b-0e4380647676.png">

### Netlify CMSの認証
デプロイが完了すると、`Netlify CMS`の認証待ちになります。
`Github`アカウントのメールアドレスに飛んでます。
<img width="1663" alt="スクリーンショット 2020-03-11 20.14.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33165/a01c1cd8-3416-83b3-44d2-46055a3cb5d3.png">

メールの`Accept the invite`を選択して認証画面に行きます。
<img width="798" alt="スクリーンショット 2020-03-11 20.15.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33165/68facaf2-e5f8-cebd-07e3-85e1200ade5e.png">

パスワードを求められますが、ここはnetlifyのパスワードになります。
<img width="1461" alt="スクリーンショット 2020-03-11 20.16.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33165/bf8dc00f-edbc-5f03-be50-f82f696c84a2.png">

認証が完了するとCMSの画面が見えるようになります。
<img width="1455" alt="スクリーンショット 2020-03-11 20.16.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33165/c161f23e-a9d8-9c74-e0e9-c4391fe562a9.png">

### デプロイ完了
デプロイが完了するとnetlify側にも表示されるようになります
<img width="1231" alt="スクリーンショット 2020-03-11 20.16.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33165/22b5004b-c3cb-73a3-8c1e-d5b65cd45079.png">

以下のようにGithubにRepositoryが出来ていて、ソースコードも見れるようになってます。
<img width="1485" alt="スクリーンショット 2020-03-11 20.13.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33165/4a8adc95-a5d7-b359-a87a-425ff16d4d2f.png">

<img width="1071" alt="スクリーンショット 2020-03-11 20.13.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33165/61cf7bb0-db90-e5fa-dad4-c9855a1ca973.png">

netlify側に表示されているURLから作成されたページに行けます
<img width="1570" alt="スクリーンショット 2020-03-11 20.52.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33165/e6c1d1fd-c73d-ff6f-9f4a-f85d87af99d8.png">

## 削除方法
右上のボタンで表示されるメニューの一番下に、[Delete]ボタンがあります。
これでサイトごとすべて削除可能です。
<img width="1611" alt="スクリーンショット 2020-03-11 21.18.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33165/64b3dd50-df20-fdae-44f5-0fb9d72c19b6.png">

この時、GithubのRepositoryもnetlifyのサイトも同時に削除可能です。
<img width="550" alt="スクリーンショット 2020-03-11 21.18.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33165/3c5ff46d-1999-76f9-0d6e-306847c43900.png">


## まとめ
作成時間約５分でここまでのサイトが作成可能です。
裏ではCMSが動いているので、ページの追加などの動的な部分も操作ができるようになってます。
ソースコードもすべてGithubにあるので、テーマの修正やCMS側の項目も修正が出来そうですね。

欠点としてはテストビューみたいな画面はないので、netlifyでdevelop環境と本番環境用を分けて表示するようにするのがよいかなと。