👌

React勉強 1回目 gh-pagesによるReactプロジェクトのGithubPagesへの公開方法

2024/03/15に公開

初めに

皆さん初めまして!ド田舎の高専のしがない高専生のTKです。
まあまだプログラムについてはかじったことある程度の初心者なので、あたたかな目で見ていただけると幸いです。

概要

勉強してるのはUnityというゲーム開発エンジンと、Web系なのですが今回はWeb系の勉強としてReactを勉強し始めました。その進捗というかなんというかをつづっていく日記ですね。

進捗

今日はYouTubeの動画見ながら、Todoリストの簡単なアプリケーションを作りました。
https://saba3939.github.io/TodoApp/
今回一番苦労したのはGithubPagesにデプロイすることかもしれません。

npm run deploy

するだけではデプロイできず結局gh-pagesを使ってデプロイしました。

Reactで作ったプロジェクトをGithubPagesで公開する

ここからは、自分のメモのためにもgh-pagesを用いてReactプロジェクトをGithubPagesで公開する方法を書いていきます!

まず初めに

npm i gh-pages

でインストールを行います

次にpackage.jsonの"scripts"に下の2行を追加して下さい

"deploy": "gh-pages -d build",
"eject": "react-scripts eject"

そして最後にGithubPagesからBuild and deploymentのブランチをgh-pagesにしSaveを押します

これでGithubPagesにReactで作成したページが表示されました!

最後に

ここまで見てくださりありがとうございます。
今回作ったのはまだまだ質素なWebサイトなので、CSSなどを当てたり機能を追加してそれなりのTodoアプリを作ることを目標に当面の間やっていこうと思います。

Discussion