Déployer un bento sur les pages GitHub

Salut les gars ?

Dans cet article, nous allons créer un superbe portfolio de type bento comme celui-ci et le déployer sur les pages GitHub afin que vous puissiez le partager avec le monde.

Alors, êtes-vous prêt à créer le vôtre ?

1️⃣.. 2️⃣.. 3️⃣.. C'est parti ?

Prenez votre ordinateur portable, ouvrez votre IDE et commencez à créer ?

Voici mon bento ?

Il est construit en utilisant React, Typescript, framer-motion et tailwind CSS.

Voici le code original de la grille du bento révélé par @tomisloading

hover.dev révèle Bento

Je me suis inspiré du composant, je l'ai personnalisé et je l'ai déployé sur les pages GitHub.

Créer votre bento ?

Voici comment créer un tel bento en 4 étapes faciles :

Étape 1️⃣

• Clonez ce référentiel.

Étape 2️⃣

• Exécutez npm install pour installer tous les packages requis.

Étape 3️⃣

• Modifiez le fichier src/data/profile.json pour personnaliser le bento selon vos besoins.

Étape 4️⃣

• Exécutez npm start et voyez-le en action.

Le déployer sur les pages Github ?

Nous pouvons utiliser le package gh-pages pour déployer le bento.
Voici un guide étape par étape pour le déploiement :

1. Créer un référentiel ?

   • Pour une page utilisateur : Créez un référentiel nommé username.github.io.
   • Pour une page de projet : Créez un référentiel nommé username.github.io/project.

2. Ajouter le code de l'application React ➕

   • Suivez le guide ci-dessus pour créer votre bento, puis ajoutez le code à votre référentiel.

3. Modifier la page d'accueil Saisissez package.json ✏️

   • Ajoutez la clé de la page d'accueil :

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

   Copier après la connexion

   ou
   

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

   Copier après la connexion

4. Changer de référentiel distant ?

   • Liez votre dépôt local au dépôt GitHub :

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

   Copier après la connexion

5. Application Push React ⬆️

   • Créez et déployez l'application :

    npm run build
    npm run deploy
   

   Copier après la connexion

6. Configurer les pages GitHub ⚙️

   • Accédez aux paramètres du référentiel sur GitHub.
   • Sous la section "GitHub Pages", définissez la source sur la branche gh-pages.

Cela déploiera votre Bento sur les pages GitHub.

C'est fini ! Vous avez maintenant créé et déployé un portefeuille bento personnalisé sur les pages GitHub : excellent travail ! ??

N'oubliez pas de partager votre portfolio bento dans les commentaires ci-dessous et sur les réseaux sociaux – c'est un excellent moyen de vous faire remarquer ! ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!