將便當部署到 GitHub Pages

嗨，夥計們？

在本文中，我們將創建一個像這樣令人驚嘆的便當式組合，並將其部署到 GitHub Pages，以便您可以與世界分享。

那麼，你準備好創建你的了嗎？

1️⃣..2️⃣..3️⃣..我們走吧？

拿起你的筆記型電腦，打開你的 IDE 並開始製作？

---

這是我的便當？

它是使用 React、Typescript、framer-motion 和 tailwind CSS 建構的。

這是@tomisloading 揭示的原始便當網格程式碼

hover.dev 展示便當

我從該組件中獲得靈感，對其進行了定制，並將其部署到 GitHub Pages。

---

創建你的便當？

以下是如何透過 4 個簡單步驟製作此類便當：

步驟1️⃣

• 複製此儲存庫。

步驟2️⃣

• 執行 npm install 以安裝所有必需的軟體包。

步驟3️⃣

• 編輯 src/data/profile.json 檔案以根據您的需求個性化便當。

步驟4️⃣

• 運行 npm start 並查看它的運行情況。

---

將其部署到 Github 頁面？

我們可以使用 gh-pages 套件來部署便當。
這是部署的逐步指南：

1. 建立儲存庫？

   • 對於使用者頁面：建立一個名為 username.github.io 的儲存庫。
   • 對於專案頁面：建立一個名為 username.github.io/project 的儲存庫。

2. 新增 React 應用程式碼 ➕

   • 按照上面的指南建立您的便當，然後將程式碼新增到您的儲存庫。

3. 編輯package.json中的首頁Key ✏️

   • 新增主頁鍵：

    "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 Pages。

---

這是一個包裝！現在您已經建立了自訂便當組合並將其部署到 GitHub Pages – 幹得好！ ??

別忘了在下面的評論和社交媒體上分享您的便當作品集 - 這是獲得關注的好方法！ ？

以上是將便當部署到 GitHub Pages的詳細內容。更多資訊請關注PHP中文網其他相關文章！