More than 5 years have passed since last update.

静的サイトジェネレータReact-Staticを使ってみる

Posted at 2019-08-29

#はじめに

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

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

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

#今回の目的

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

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

#Node.jsのインストール

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

#yarnのインストール

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

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

#React-Staticのインストール

$ yarn global add react-static

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

#React-Staticプロジェクトの作成

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

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

#ローカルホストで確認

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

#本番環境のビルド

$ yarn build

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

#githubにプッシュ

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

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

#Netlifyにデプロイ

SignUpを済ませます。

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

連携の際、

を入力します。

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

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

#まとめ

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