はじめに

プログラミング歴2ヶ月の素人が書いています。（間違っていたらご指摘ください）

「React-Staticをはじめて使ってみる」ための学習メモです。

上記２点についてまとめます。

今回の目的

静的サイトジェネレータReact-Staticを初めて使います。

簡単に爆速表示のブログサイトを自動生成して、Netlifyにデプロイします。

ReactはNode.jsを必要としますので、インストールします。
https://nodejs.org/ja/

パッケージマネジャーとしては、Node.jsに付いてくる標準のnpmもありますが、私の環境と実力ではうまくビルドができませんでした。

npmからyarnに変えたところうまくいったので、ここはyarnを使うのがいいと思います。

$ yarn global add react-static

グローバルにReact-Staticをインストールします。

$ cd プロジェクトのディレクトリ
$ react-static create

プロジェクト名と、テンプレート名を聞かれます。
テーンプレートは、『Basic』を選択しました。

localhost:3000から作成したプロジェクトにアクセスできます。

$ yarn build

本番用のファイルとして、distファイルが生成されます。

まずはgithubにプッシュして、そのリポジトリをNetlifと連携することでデプロイします。

distだけでなく、プロジェクト全体をプッシュします。

SignUpを済ませます。

今回はgithubと連携させてデプロイします。

連携の際、

を入力します。

これによって、今後githubに変更がプッシュされるたびに、Netlifyが自動でyarn buildを実行し、生成されるdistファイルをデプロイしてくれます。

私たちはgithubにプッシュするだけでいいので、手間が省けます。

上記２点についてまとめました。