Deploy a bento to GitHub Pages

Hi fellas ?

In this article, we will create a stunning bento-like portfolio like this and deploy it to GitHub Pages so that you can share it with the world.

So, are you ready to create yours?

1️⃣.. 2️⃣.. 3️⃣.. Let's go ?

Grab your laptop, open up your IDE and start crafting ?

---

Here is my bento ?

It's built using React, Typescript, framer-motion and tailwind CSS.

Here is the original reveal bento grid code by @tomisloading

hover.dev Reveal Bento

I got inspiration from the component, customized it, and deployed it to GitHub Pages.

---

Create your bento ?

Here's how you can create such bento in 4 easy steps:

Step 1️⃣

• Clone this repository.

Step 2️⃣

• Run npm install to install all the required packages.

Step 3️⃣

• Edit the src/data/profile.json file to personalize the bento to your needs.

Step 4️⃣

• Run npm start and see it in action.

---

Deploy it to Github Pages ?

We can use the gh-pages package to deploy the bento.
Here is a step-by-step guide for deployment:

1. Create Repository ?

   • For a user page: Create a repository named username.github.io.
   • For a project page: Create a repository named username.github.io/project.

2. Add React App Code ➕

   • Follow the guide above to create your bento, then add the code to your repository.

3. Edit the homepage Key in package.json ✏️

   • Add the homepage key:

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

   or
   

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

4. Change Remote Repository ?

   • Link your local repository to the GitHub repository:

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

5. Push React App ⬆️

   • Build and deploy the app:

    npm run build
    npm run deploy
   

6. Configure GitHub Pages ⚙️

   • Go to the repository settings on GitHub.
   • Under the "GitHub Pages" section, set the source to the gh-pages branch.

This will deploy your Bento to GitHub Pages.

---

That’s a wrap! You’ve now built and deployed a custom bento portfolio to GitHub Pages – great job! ??

Don't forget to share your bento portfolio in the comments below and on social media – it’s a great way to get noticed! ?

The above is the detailed content of Deploy a bento to GitHub Pages. For more information, please follow other related articles on the PHP Chinese website!