将便当部署到 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中文网其他相关文章！