github pagesでレポジトリのページの指定に関してメモ

github pagesでcreate-react-appを使ったレポジトリのページを公開する。

基本的には、create-react-appのドキュメント（Deployment | Create React App）の通りです。個人的にわかりづらかったところなどのメモを残しておきたいと思います。

基本的に既存のユーザーページ（username.github.io/）にレポジトリのページ（username.github.io/reponame/）を追加するという観点でやっています。

githubにレポジトリを作成

proアカウントでないと、privateのままで公開することはできないようです。

参考: Creating a GitHub Pages site - GitHub Docs

レポジトリの名前と、package.jsonで指定するhomepageの値は一致させておきます。username.github.io/reponameといったURLになるためです。

package.json

create-react-appのドキュメントに従って、"scripts"への追加と、"homepage"の追加を行います:

{
    // ...
    "homepage": "https://username.github.io/reponame",
    "scripts": {
        "predeploy": "yarn build",  // もしくは npm run build
        "deploy": "gh-pages -d build",
        // ...
    },
    // ...
}

githubのレポジトリ作成のところでも書きましたが、package.jsonの中で指定する"homepage"の値は、githubのレポジトリ名と一致させます。

yarn add -D gh-pagesでgh-pagesのインストールも忘れずに行います。これはgh-pagesブランチを自動で作ってファイルを設定してくれるCLIツールです。詳細はgh-pages - npmにて。

レポジトリのページではなく、ユーザーページの場合（username.github.io）は、mainブランチやmasterブランチが使われるので、deployのコマンドは、gh-pages -b main -d buildなどのようにブランチ名を指定しておきましょう。

github pagesにデプロイ

あとは、デプロイだけです。一旦、githubのリモートレポジトリのmainブランチにプッシュしましたが、これは必要なさそうです。

yarn deployでgh-pagesブランチがなければ作成されて、ビルドされたファイルがプッシュされます。

URLの設定がうまくいっていればpackage.jsonの"homepage"で設定したURL（https://username.github.io/reponameなど）にアクセスして確認できます。

レポジトリ側の設定は、githubのレポジトリトップページのSettingsからPagesから確認できます。

おわり

当然だと思いますが、reponameの一致には気をつけましょう。

gh-pagesブランチだけをgithubのレポジトリにプッシュすれば、proアカウントでなくてもソースを公開しないでできそうだなーと思いました。 bitbucketなどのもgithub pagesに上げやすそうだと思います。

以上です。

Amazonアソシエイト

Amazon.co.jp

amzn.to