🦊

Reactの学習用に作成したポートフォリオをvarcelで公開してみた

2023/12/21に公開

目的

Reactの学習でポートフォリオサイトを作ったのでvarcelで公開してみることにしました。

npm: 8.19.2
node: v20.9.0

以下のコマンドを実行します。

npm create vite

コマンドの実行後、以下のような画面が表示されます。
必要に応じてプロジェクト名や使用するフレームワークの選択を行います。

選択が終わるとプロジェクトが作成されるので、あとは自分が作りたいものを自由に作ります。

作成したプロジェクトをGithubのリポジトリで管理します。
自分はportfolioというリポジトリで管理することにしました。

varcelの登録画面にアクセスします。
PlanTypeを選択します。
趣味や個人的に使用する場合はHobbyで問題ないと思います。
※詳細についてはこちらをご確認ください。

PlanTypeを選択後にユーザー名を入力して、Continueボタンを押すと以下の画面に遷移します。

「Continue With GitHub」をクリックして認証を完了させます。
認証が終わると以下の画面に遷移します。

「AddNew」ボタンをクリックするとプルダウンが表示されます。
Projectを選択してください。

Projectを選択すると以下の画面に遷移します。
「Import Git Repository」からデプロイしたいプロジェクトを選んでください。

「Deploy」ボタンをクリックするとデプロイが開始されます。

しばらく待つと以下のような画面が表示されます。

「Visit」ボタンをクリックすると正常に今回作成したポートフォリオサイトを確認出来ました。

varcelは初めて使用したのですが、非常に手軽に作成したポートフォリオを公開することが出来ました。