GatsbyとNetlifyを使ってWebサイトを公開するまでの手順



先日、[GatsbyJS](https://www.gatsbyjs.org/)を初めて使用して[webサイト](https://www.tstshirts.com/)を作成したのですが、もうwordpressに戻れないと思い、日本語解説がまだ少なそうだし、普及活動してみようと投稿に至りました。

ここ１年くらいAngularやVue(Nuxt)でフロント開発してきましたが、Reactのことも忘れられなくて、触っておこうと学びの姿勢も出しつつ、知人の勧めもあって、[GatsbyJS](https://www.gatsbyjs.org/)に行き着きました。

これまで、サクッとweb作りをしてあげるときは、wordpressに頼っていたのですが、ギャツビーおじさんがJAMstackだし早いし速いしということで、新たに最高の相棒を見つけることができたかもしれません。
![gatsby.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/263346/a309ad00-b4db-8eaa-fd26-c275cdf906d0.png)

## この記事を読むと
- [GatsbyJS](https://www.gatsbyjs.org/)と[Netlify](https://www.netlify.com/)を使ってweb公開するまでを体験できます。
- 独自ドメインの使用とSSL化は別記事で投稿する予定です。

※ あくまで手順にフォーカスしているため、技術面の解説は補足としてリンク紹介に留めさせていただきます。
 

## 対象読者
- 短時間でwebを作るときにwordpressを使っている人
- そして、色々な面でもどかしさを感じている人
- Reactプロジェクトに触れてみたい人
    - （私が使用した[Starter Library](https://www.gatsbyjs.org/starters)がすごくキレイなソースで、Reactの流れを体感できるので入門者にオススメです。
- サクッとJAMstackのプロジェクトを構築したい人
- GitHubにプッシュしたらデプロイされる快感を味わいたい人(Netlify)

## 導入手順

それでは、参りましょう。Let's Gatsby!

### 0. 事前準備
特になし　やりながら適宜作っちゃいましょう。

### 1. GatsbyJSのStarter Libraryを選ぶ
[Starter Library](https://www.gatsbyjs.org/starters)

こちらにアクセスすると、Starter Libraryのテーマを235種類の中から探すことができます。

<img width="1439" alt="スクリーンショット 2019-08-05 21.15.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/263346/a03f4cdf-c26e-12df-23b4-497f0f6b78a7.png">

キーワードで絞り込むことができまして、左に見える`Category`からキーワードをチェックしても良いですし、右上の`Search Starters`から自由に文字列検索しても良いです。

いずれかで`Netlify`と絞り込めば、`Netlify`を使用したプロジェクトが探せます。

Blog, ECといった用途でも絞れます。

今回は、「[gatsby-serif-theme](https://www.gatsbyjs.org/starters/JugglerX/gatsby-serif-theme/)」が作りたいwebサイトのイメージに近かったため、こちらを選択しました。Gatsbyはデモサイトがしっかりしていて、実際にどう動くのか、どうカスタマイズしようか具体的にイメージすることができました。
<img width="1440" alt="スクリーンショット 2019-08-05 21.32.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/263346/b925ad2f-d58c-1d83-46da-ad0a9942ccc8.png">

- デモサイト：https://gatsby-serif.netlify.com/

### 2. NetlifyにGitHubアカウントでログインし、連携・デプロイする

選んだStarter Libraryのページのイメージ画像の下にGitHubリンクとNetlifyリンクがあります。（ないものもあります）GitHubへ行けば、リポジトリをcloneできます。今回は、Netlifyへ進みます。

<img width="1438" alt="スクリーンショット 2019-08-05 21.38.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/263346/8d3bc950-c56e-d865-2d74-6d5610a03567.png">

すると、「Gatsbyサイトを1分で」と豪語してきました。

<img width="1438" alt="スクリーンショット 2019-08-05 21.45.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/263346/0bc3285c-9e3b-e8b9-3775-7d7b51c5d62a.png">

「Connect to GitHub」しちゃいましょう。

<img width="1028" alt="スクリーンショット 2019-08-05 21.47.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/263346/14c503fa-fb79-34bf-8d27-0c812929e157.png">

GitHubにログインしたら、リポジトリ名を決めます。「gatsby-handson」にしました。

<img width="1392" alt="スクリーンショット 2019-08-06 10.16.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/263346/295f25f0-60e4-ecff-78c1-a4427516987d.png">

「Save & Deploy」をクリックすると、すぐにデプロイが実行され、指定リポジトリにforkされます。（事前にGitHubでプライベートリポジトリを作ってき、こちらを指定するとプライベートリポジトリにできたはずです）

デプロイできました。GitHubリポジトリもできているので、そちらをローカルにcloneしてきてソースを編集すれば、目的のwebサイトが作れます。

## 所感
- デプロイまで一瞬すぎで、wordpressよりも簡単。
- GitHubのワークフローに乗れるのが気持ちよすぎて‥
- 私の場合は、色を変え、フォントを変え、文字を変え、画像を変え、約１時間30分でver.1をサクッと公開しました。

↓

世界をCreativeにするためのTシャツ屋さん「[TsTshirts - Being Creative, ](https://www.tstshirts.com/) 」

- [GatsbyJS plugin](https://www.gatsbyjs.org/plugins/)の日本語が少ないので、使ってみたらまたQiitaします。
   

## 補足
- 「[Reactベース静的サイトジェネレータGatsbyの真の力をお見せします](https://qiita.com/uehaj/items/1b7f0a86596353587466)」
    - 見事な図示で理解が進みます。GatsbyJSの技術的解説におすすめ。
- 「[これを知ってればGatsbyでサイトが作れるTips](https://qiita.com/t_taka_tech/items/90a62b1b2ed9e69bbefd)」
    - 技術要素の概要を把握するにオススメ
- 「[【WordPress】WordPressのここがダメ](https://qiita.com/fallout/items/3de7ece4acd3ae968628)」
    - ネガキャンしとく

## 追伸

当初、[Contentful](https://www.contentful.com/)という[HeadlessCMS](https://qiita.com/reflet/items/55665a79940a96252c68)をバックエンドに置いて、フロントをGatsbyにし、wordpress頼りからの完全脱却を目論んだのですが、初見技術が多すぎて「ちょっと早かったかな?」と思いながらやめました。