[最速で]GatsbyJSを用いたブログを構築しGatsby cloudでデプロイしよう[入門][ハンズオン]

## 今回のアジェンダ
WEBエンジニア未経験者として日々勉強中で、とにかくいろいろな知識をキャッチアップしたい…
そう思って今回手をつけてみたのが、静的サイトジェネレータとして直近で注目をあびるReactベースのJavascriptフレームワークであるGatsbyJSです。
なにより動作が軽く、画像ファイルの自動調整がかなり優れてる、様々なプラグインで拡張可能、スターターがあるおかげでコーディングの時間を大幅に削減できる、とっても今どきのフレームワークということです。

##### 公式ドキュメントはこちら。おしゃれ。
https://www.gatsbyjs.com/

静的サイトを学ぶ中、CMS需要が多いフロントエンド業界ということで、手始めにブログを簡単に作りたいと思って色々検索しながらコーディングしましたが、一発でドーン！とデプロイまでたどり着くのになかなか骨が折れました。というわけで、備忘録としてこちらに残させていただきます。
対象者は下記です。

## 目標と前提
- 簡単に最速で構築できるブログを立ち上げたい
- WordPressは使わない方法で立ち上げたい
- 無料でその日のうちにブログを立ち上げたい
- mac osを使っている
- NodeJSをインストールしてある
- ターミナルの使い方を最低限わかっている
- エディタでコーディング作業をしている
- Githubを使う
- デザインは後回しでいい人

自分が初級者なものですので、`対象のハードル!:(`とか、`内容!:(`とかありましたらお気軽にコメントください。
また、本記事ではGatsbyJSの肝である`GraphQL`、`React`について言及しません。あくまでブログ開設〜デプロイをできるまでを目標とします。

## 大まかな手順
:::note info
1. Gatsbyをインストールする
1. Gatsby Starter Blogをインストールする
1. 記事を書く
1. GitHubと連携させる
1. Gatsby Cloudにログインしデプロイする
:::

## 1.Gastbyをインストールする
まずはNodeJSがインストールされているか確認しましょう。
```:terminal
> node -v
v14.15.1
```
バージョンが表記されればOKです。
では、早速GatsbyJSをインストールしていきましょう。
お好きなディレクトリでmkdirします。
```:terminal
> mkdir blog
> cd blog
```
```:/blog
> npm install -g gatsby-cli
```
しばらくするとインストールが完了しますので、確認のため下記コマンドを叩いてみましょう。
```:/blog
> gatsby --help
```
つらつらGatsbyに関係するいろんなものがでてきたらOKです。

## 2.Gatsby Starter Blogをインストールする
GatsbyJSのすごいところは、スターターキットといって、あらかじめ目的に沿ったテンプレートを用いて開発ができるという点があります。

##### こちらがスターターライブラリ
https://www.gatsbyjs.com/starters/

今回はあくまで「最速」を称しているので、各種サイトでも紹介されている「Gatsby Starter Blog」を採用します。

```:/blog
> gatsby new my-blog-starter https://github.com/gatsbyjs/gatsby-starter-blog
```
`my-blog-starter`の部分を書き換えることで任意のディレクトリ名に指定できます。
インストールが終わったら確認して、開発環境を立ち上げてみましょう。

```:/blog
> ls
my-blog-starter		package-lock.json
node_modules

> cd my-blog-starter
```
```:/blog/my-blog-starter
>  gatsby develop

省略

You can now view gatsby-starter-blog 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
```
こんなものが出てきたら環境構築に成功しています。
http://localhost:8000/
にアクセスしてみると、スターターテンプレートが表示されることを確認できます。

***
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1069990/3712a499-c79d-9239-24be-0419d8776354.png" width="50%">

こちらで環境は整いました。
記事を書いていきましょう。

## 3.記事を書く
今回は最速を目標としているので、詳しい仕組みやデザインはガン無視します。ごめんなさい。
ブログのコンテンツとなるディレクトリは下記になります。
```:/blog/my-blog-starter
> ls
LICENSE			node_modules
README.md		package-lock.json
content			package.json
gatsby-browser.js	public
gatsby-config.js	src
gatsby-node.js		static

> cd content
```
```:/blog/my-blog-starter/content
> ls
blog

> cd blog
> ls
```
```:/blog/my-blog-starter/content/blog
hello-world	my-second-post	new-beginnings
```
この`blog`ディレクトリ内の各フォルダが、gatsby starter blogの各記事になります。それぞれのディレクトリを開くと、`index.md`とマークダウンファイルがあります。このスターターでは全てマークダウン形式で記事を書くことで、スタイルが反映される仕組みになっています。

また、GraphQLというクエリ言語を用いてこのブログデータを取得するのですが、このスターターでも全て準備ができているので、実際にコードを書かずともすぐにコンテンツが出来上がるのです。
そんなこんなでブログを完成させます。

## 4.GitHubと連携させる
リモートリポジトリをGitHub上で生成し、ローカルリポジトリと連携させます。
後述のGatsby Cloudでは、GitHubでのリポジトリをもとにデータを取得し、自動デプロイまで行うことになるので、必須の作業となります。

リポジトリについては、Gatsbyだからといって特段特別に仕様が変わる作業ではないので割愛します。

## 5.Gatsby Cloudにログインしデプロイする
最後の作業となります。
完成したブログと、そのリポジトリを用いて、Gatsby Cloudでデプロイし公開しましょう。
まずは下記にアクセスしてください。

##### 公式
https://www.gatsbyjs.com/products/cloud/



`Get started free`をクリック
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1069990/79532e8e-2713-ebf0-6990-928deff1d9ce.png" width="50%">

`Continue with GitHub`でサインアップする
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1069990/ff74f5c7-e1fc-dc64-86f5-159b245d2de4.png" width="50%">

`Import from a Git repository`から先程生成したリポジトリを選択する
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1069990/24b06b9e-e237-aca2-7469-5b0322f6e941.png" width="50%">

あとは指示に従い、
`Build Site`をクリックするとデプロイが実行されます。
エラーが無ければこれでデプロイ完了、公開されたことになります。

単純に簡単にGatsbyブログを開設〜デプロイするといった流れが以上になります。
SUCCESS!

## まとめ
いかがでしたでしょうか。
あくまで「最速に」「スターターテンプレート」での開設でした。

このテンプレートを活かしCSSフレームワークを導入してリデザインするもよし、
ReactやGraphQLを学習するもよし（筆者は絶賛真っ最中です）、
ドメインを取得、CMSと連携しさらに便利なヘッドレスCMSと化けさせるもよし。

私のような初級者にとって、コーディングの導入になれれば幸いです。
そして、GatsbyJSは公式ドキュメントが一番王道でわかりやすいと思います。

#### おまけ
gatsby developで開発環境を整え、開発作業を終えたら、
control + c で開発環境の終了をすると吉。