はじめに

Github Pagesでポートフォリオのようなページを作成しようと思い、create-react-appでさくっと作りました。特に技術的に目新しいことはありませんが、迷った点について他の人ならどう解決するのかなと、あわよくばフィードバックを得ようと思い記事にしておきました。

GitHub Pagesリポジトリを作成

まずはindex.htmlを作成して表示されるところまで進めましたが、既存の記事にある以上のことはしていないのでリンクの掲載に留めます。

またはQiitaで記事を書かれている方がいるので
GitHub Pagesの作り方
を参考にしてください。

/path/to/github/
がcloneしたリポジトリとすると

/path/to/github/index.html

がトップページになります。

セットアップについてもリンクの掲載で済ませます。

npum run build して本場用用のファイルをビルドした後のディレクトリの構成が以下になります。

root
├  .gitignore
├  README.md
├  build ・・・本番用
├  node_modules
├  package.json
├  public
└  src

実は、Github Pagesの設定を変更してbuildをドキュメントルートにし、create-react-app全体をpushしようとしたのですが良い方法が見当たりませんでした。

せっかくリポジトリを公開するならsrcも一緒にしたかったのですが。。。

結局、buildディレクトリが初期設定では .gitignoreの対象となっていることもあり
Github Pagesのリポジトリを buildディレクトリでCloneしました。

そのため、ビルド前のコードを公開するなら（履歴としたはこっちの方が有用）別リポジトリを作る形になります。

他に以下の構成も考えました。
- docsディレクトリを作成してドキュメントルートを変更 && create-react-appのbuild先を変更
- npm scriptを使って、buildコマンドにファイルのドキュメントルートへのコピーやgit add/commit/pushも追加

結局 build = デプロイではない場合もあり取りやめました。

次回、機会があれば動的コンテンツの扱い方について考えたいと思います。

今考えているのは

など考えています。