nikeeshi のコーディング記

コーディングの成果をはっつけるとこ。このブログにあるソースコードはNYSL Version 0.9982に従い公開します(2014/06/18)。

今日のHello World「React と GitHub Pagesを使って、静的ページを立ち上げるまで。」

追記

github のデフォルトのブランチが master ではなく main に変わったので、新しく作ったレポジトリに関しては読み替えてください。

create-react-app が npm ではなく yarn をパッケージマネージャとして使うようになったので、npm 関連のコマンドは逐次 yarn のコマンドに読み替えてください。npxはそのままで大丈夫です。仮に npm を無理矢理使っても、設定ファイルである package.json は変わらないので問題ないです。その場合は不要になった yarn.lock は消してください。代わりに npm によって package-lock.json が生成されます。

npm から yarn への読み替え

npmのコマンド yarnのコマンド
パッケージをpackage.jsonに追記してインストール npm i (package name) yarn add (package name)
package.jsonに書いてある必要なパッケージを全てインストール npm i yarn
start スクリプトを実行 npm start yarn run start
スクリプトを実行 npm run (script name) yarn run (script name)

静的ページを作ろう

今回作るものは静的ページです。静的ページは、自分の理解で説明すると、クライアント（閲覧者）に応じて見せるものを変えられないWebページのことです。 自分の日常を載せるだけのブログとか自分の成果物を見せるだけのポートフォリオとかを作る分には、毎回見せるものを変える必要はないので、静的ページで充分ですね。

React は、Facebook が 開発した、HTML を描画時に生成する Javascript (JS) のライブラリです。React は設定が少し煩わしいのですが、Facebook が提供する create-react-app を使えば、コマンドを一回走らせるだけで簡単に設定ができます。create-react-app は複雑な設定を全て react-scripts に隠蔽しているので、プロジェクトの設定も簡潔になります。 ここでは React の詳しい説明はしません。

GitHub Pages は GitHub のレポジトリを Web ページとして使える静的ページホスティングサービスです。作れるページの種類が二つあることに、僕は混乱したので、注意してください。それについての公式のガイドはここです。後でちゃんと説明します。

まず GitHub のリポジトリの設定

前提条件

  1. GitHub のアカウントを持っている。（ない人は Join GitHub · GitHub で登録してね。）

まず GitHub でページ専用のリポジトリを作ります。リポジトリの名前は作りたいページの種類によって決まります。公式の説明はここです。

User Pages (もしくは Organization Pages)

各ユーザー（もしくは団体）につき一つだけ作れるページです。 URL は (username).github.io になります。 リポジトリの名前は (username).github.io で設定しなければなりません。必ず master ブランチのルートがページを読み込むときに参照される位置になります。制限がややこしいため、最初に User Page を作るのはあんまり推奨しません。

  • URL (username).github.io
  • repository (username).github.io
  • ページのルート master ブランチ

Project Pages

何個でも作れるページです。 URL は (username).github.io/(projectname) になります。 リポジトリの名前は作りたいページの URL の最後の部分になります。 デフォルトで gh-pages ブランチのルートがページを読むこむときに参照される位置になります。この設定で充分です。（この設定になっていない場合は GitHub のリポジトリのページから設定を変更してください。Setting > Options > GitHub Pages > Source の部分です。）

  • URL (username).github.io/(projectname)
  • repository projectname
  • ページのルート gh-pages ブランチ、(master ブランチ、master ブランチの docs 以下に変更できる)

リポジトリを作ったら、空っぽのままにしておいてください。中身はローカルで作ります。

次に create-react-app でプロジェクトを作る

前提条件

  1. npm (npx が使える バージョン8 以上がいい)をインストールしている。npm は直接インストールするのではなく、nvm を使って管理するのがお勧めです。（Windows の場合は nvm-windows っていうのがある。）npm の代わりに yarn でもいいけど僕はわからないので説明はしません。
  2. git をインストールしている。（Windows ユーザーは問題を避けるため、一応アップデートしておいてね。chocolatey を使っている人はChocolatey Software | Git 2.34.1）

これから create-react-app を使用してプロジェクトを作ります。公式の説明はここです。まずコマンドラインインタプリタ（Windows ならコマンドプロンプト、Macならターミナル）を起動して、プロジェクトを置きたい場所の親ディレクトリに移動します。例えば、Project ディレクトリ 以下にプロジェクトを置いてる場合、$ cd Project。npx create-react-app (my-project-name) を走らせると my-project-name というディレクトリができ、中に React プロジェクトが用意されます。ためしに、cd my-project-nameでプロジェクト内に移動してから、npm startを実行してみましょう。URL が localhost:3000 で React のロゴがぐるぐる回転しているページが表示されたはずです。ページに新しい機能を追加するときにはnpm startを実行した状態で描画された結果を確認しながら、コードを変更する形になります。

リモートの設定

GitHub の設定に戻ります。リポジトリを作成した際に書いてあった説明に従ってローカルのプロジェクトを GitHub と連携します。これをローカルで実行すればOKです。（コマンド内の username と repositoryname は適当に設定してください。）

git remote add origin https://github.com/username/repositoryname.git
git push -u origin master

ローカル（自分のPC）の master ブランチがリモートの master と連携できました。

注意: User Page を作りたい場合、ページの静的ファイルを置くために master ブランチを使うので、別のブランチでソースコードを管理してください。Project Page の場合はデフォルトで gh-pages ブランチを静的ファイル用、 master ブランチをソースコード用に使うようになっています。

gh-pages でデプロイしよう

Create React App の公式ページにデプロイ用の解説が詳しくのっています。読んで勝手に進めてください。

Project Page の人は、

  1. package.json の中に、"homepage": "https://myusername.github.io/my-app", を追加して、
  2. npm i gh-pagesで gh-pages をインストールして、
  3. package.json の script 以下に"predeploy": "npm run build", "deploy": "gh-pages -d build",の二つのコマンドを登録したら準備完了です。

User Page の人は、

  1. package.json の中に、"homepage": "https://myusername.github.io", を追加して、
  2. npm i gh-pagesで gh-pages をインストールして、
  3. package.json の script 以下に"predeploy": "npm run build", "deploy": "gh-pages -d build -b master",の二つのコマンドを登録したら準備完了です。-b で静的ファイルをおくためのブランチを master に指定しています。

次のコマンドを実行すると、GitHub の静的ファイル用のブランチが更新され、作ったページが見れるようになります。

npm run deploy

試しに、GitHub で gh-pages ブランチがどうなっているか見てみるといいですよ。

注意: gh-pages ブランチが既に存在すると怒られてデプロイできない場合は、gh-pages のキャッシュを消すとうまくいく場合があるらしいです。参考 GitHub - tschaub/gh-pages: General purpose task for publishing files to a gh-pages branch on GitHub

サンプルページ

試しに、Project Page を作ってみました。参考にしてみてください。

github.com

https://nikeeshi.github.io/sample-project-pages/