DEV Community

Cover image for Deploy a bento to GitHub Pages
K Om Senapati
K Om Senapati

Posted on

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.

bento

So, are you ready to create yours?

coding

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! 😏

Top comments (5)

Collapse
 
yashksaini profile image
Yash Kumar Saini

This is great work

Collapse
 
rohan_sharma profile image
Rohan Sharma

I would make one! That's awesome πŸ˜‰πŸš’

Collapse
 
komsenapati profile image
K Om Senapati

Yup, create yours

Collapse
 
priyanshuverma profile image
Priyanshu Verma

Awesome and unique portfolio idea. Waiting to see more updates. Initial update is very nice.

Collapse
 
komsenapati profile image
K Om Senapati

Glad you liked it