GitHub ページに弁当をデプロイする

こんにちは皆さん？

この記事では、このような素晴らしいお弁当のようなポートフォリオを作成し、それを GitHub Pages にデプロイして、世界と共有できるようにします。

それでは、自分のものを作成する準備はできていますか?

1️⃣.. 2️⃣.. 3️⃣.. 行きましょう?

ラップトップを手に取り、IDE を開いて制作を始めましょう?

---

これが私のお弁当です?

React、Typescript、framer-motion、tailwind CSS を使用して構築されています。

これは @omisloading によるオリジナルの明らかに弁当グリッド コードです

hover.dev Bento を公開

コンポーネントからインスピレーションを得てカスタマイズし、GitHub Pages にデプロイしました。

---

お弁当を作りますか？

このようなお弁当を 4 つの簡単なステップで作成する方法をご紹介します:

ステップ 1️⃣

• このリポジトリのクローンを作成します。

ステップ 2️⃣

• npm install を実行して、必要なパッケージをすべてインストールします。

ステップ 3️⃣

• src/data/profile.json ファイルを編集して、ニーズに合わせて弁当をカスタマイズします。

ステップ 4️⃣

• npm start を実行して、動作を確認します。

---

Github Pages にデプロイしますか?

gh-pages パッケージを使用してベントをデプロイできます。
導入の段階的なガイドは次のとおりです:

1. リポジトリを作成しますか?

   • ユーザーページの場合: username.github.io という名前のリポジトリを作成します。
   • プロジェクト ページの場合: username.github.io/project という名前のリポジトリを作成します。

2. React アプリ コードを追加 ➕

   • 上記のガイドに従ってベントを作成し、コードをリポジトリに追加します。

3. ホームページを編集 package.json を入力します ✏️

   • ホームページキーを追加します。

    "homepage": "https://username.github.io/"
   

   または
   

    "homepage": "https://username.github.io/bento"
   

4. リモート リポジトリを変更しますか?

   • ローカル リポジトリを GitHub リポジトリにリンクします。

    git remote add origin https://github.com/username/repository-name.git
   

5. React アプリをプッシュ ⬆️

   • アプリをビルドしてデプロイします:

    npm run build
    npm run deploy
   

6. GitHub ページを構成する ⚙️

   • GitHub のリポジトリ設定に移動します。
   • 「GitHub Pages」セクションで、ソースを gh-pages ブランチに設定します。

これにより、Bento が GitHub ページにデプロイされます。

---

これで終わりです!これで、カスタム ベント ポートフォリオを構築して GitHub Pages にデプロイできました。素晴らしい仕事です。 ??

下のコメントやソーシャルメディアでbentoのポートフォリオを共有することを忘れないでください。注目を集める素晴らしい方法です! ?

以上がGitHub ページに弁当をデプロイするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。