概要
Reactでアプリを作成した際にGitHub Pagesを利用したのですが、
その際に少しつまづく部分もありましたので備忘録も兼ねて記載します。
環境
・macOS Big Sur
・Node.js(v16.13.1)
手順
GitHubにRepositoryを作成する
今回はreact-sampleという名称でRepositoryを作成していきます。
プロジェクトを作成する
create-react-appでプロジェクトを作成します。
プロジェクト名はGitHubと同じreact-sampleにし、ディレクトリに移動します。
❯ npx create-react-app react-sample
❯ cd react-sample
ディレクトリの構造は下記のようになります。
❯ tree -L 1
.
├── README.md
├── node_modules
├── package-lock.json
├── package.json
├── public
└── src
プロジェクトを実行するにはnpm startコマンドを使います。
❯ npm start
ブラウザでlocalhost:3000にアクセスし、
下記のような画面がでれば、ローカルで実行できています。
GitHubにpushする
さきほど作成したGitHubのRepositoryにreact-sampleをpushしましょう。
❯ git init
❯ git add .
❯ git commit -m "first commit"
❯ git branch -M main
❯ git remote add origin git@github.com:(GitHubユーザー名)/(Repository名).git
❯ git push -u origin main
GitHubのreact-sample Repositoryにpushすることができました。
GitHub Pagesを使って公開する
それではいよいよGitHub pagesを使って公開していきます。
そもそもGitHub pagesとは、GitHubが提供している静的サイトのホスティングサービスのことです。
GitHub pagesを利用することで、静的なwebサイトを無料で公開することができます。
先ほど作成したreact-sample Repositoryで、
Settings→ページ下部のGithub PagesのCheck it out here!をクリック
下記のような画面になるので、SourceのBranchをmainにしてsaveします。
Your site is published at https://(Githubユーザー名).github.io/(Repository名)/
とあるので、作成されたURLにアクセスしてみます。
うまく表示されない。。。
よく見てみると、プロジェクト作成したときに自動的に作成されるREADME.mdの内容が
表示されているようでした。
解決方法はGitHub Pagesを使ったWebページでREADME.mdが初期表示されないようにする。の記事を
参考にさせて頂きました。
まずはローカルのreact-sampleディレクトリ上で、.githubディレクトリを作成し、
README.mdファイルを.githubディレクトリに移動させます。
こうすることで、Github上ではREADME.mdを表示したまま、webページではindex.htmlを表示することができます。
❯ mkdir .github
❯ mv README.md .github
再度変更内容をpushし、先ほどと同様の手順で作成されたURLにアクセスしてみます。
おお？？？
今度はなぜか404が表示されてしまいました。
色々と調べてみると、gh-pagesというパッケージをインストールし、
プロジェクトファイル上にあるpackage.jsonの中身にスクリプトとホームページを追加する必要があるようです。
こちらの手順は、ReactアプリをGitHub Pages(Project Pages)で公開する
の記事を参考にさせて頂きました。
まずはgh-pagesパッケージをインストールします。
こちらはGithub Pagesにデプロイするためのnpmパッケージです。
❯ npm install gh-pages --save-dev
次にpackage.jsonの中身にコードを追加します。
{
...,
"scripts": {
...,
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
...,
"homepage": "https://(Githubユーザー名).github.io/(Repository名)/"
}
こうすることで、npm run deployコマンドを入力した際に、
リモートにgh-pagesブランチが作成され、ディレクトリの中身をGithub Pagesで公開できます。
実際に実行してみましょう。
❯ git add .
❯ git commit -m "gh-pagesで公開用に設定"
❯ git push
❯ npm run deploy
先ほどのGithub Pagesの設定ページに戻ると、
Sourceでgh-pagesが選択できるようになっているため、
選択してsaveし、作成されたURLに再度アクセスします。
今度は無事公開することができました！
まとめ
今回初めてGithub Pagesを利用しましたが、
静的サイトの場合は非常にスピーディに、しかも無料で公開できるため、
今後も使っていきたいと感じました！
初学者のため拙い文章ですが、今後も発信を続けていけたらと考えております。
お読み頂きありがとうございました！
参考
GitHub Pagesを使ったWebページでREADME.mdが初期表示されないようにする。 - Qiita
ReactアプリをGitHub Pages(Project Pages)で公開する - Qiita