Stellen Sie ein Bento auf GitHub Pages bereit

Hallo Leute?

In diesem Artikel erstellen wir ein atemberaubendes Bento-ähnliches Portfolio wie dieses und stellen es auf GitHub-Seiten bereit, damit Sie es mit der Welt teilen können.

Also, sind Sie bereit, Ihr eigenes zu erstellen?

1️⃣.. 2️⃣.. 3️⃣.. Auf geht's?

Nehmen Sie Ihren Laptop, öffnen Sie Ihre IDE und beginnen Sie mit dem Basteln?

---

Hier ist mein Bento ?

Es wurde mit React, Typescript, Framer-Motion und Tailwind CSS erstellt.

Hier ist der Original-Enthüllungs-Bento-Grid-Code von @tomisloading

hover.dev enthüllt Bento

Ich habe mich von der Komponente inspirieren lassen, sie angepasst und auf GitHub Pages bereitgestellt.

---

Erstellen Sie Ihr Bento?

So können Sie in 4 einfachen Schritten ein solches Bento erstellen:

Schritt 1️⃣

• Dieses Repository klonen.

Schritt 2️⃣

• Führen Sie npm install aus, um alle erforderlichen Pakete zu installieren.

Schritt 3️⃣

• Bearbeiten Sie die Datei src/data/profile.json, um das Bento an Ihre Bedürfnisse anzupassen.

Schritt 4️⃣

• Führen Sie npm start aus und sehen Sie es in Aktion.

---

Auf Github-Seiten bereitstellen?

Wir können das gh-pages-Paket verwenden, um das Bento bereitzustellen.
Hier ist eine Schritt-für-Schritt-Anleitung für die Bereitstellung:

1. Repository erstellen?

   • Für eine Benutzerseite: Erstellen Sie ein Repository mit dem Namen username.github.io.
   • Für eine Projektseite: Erstellen Sie ein Repository mit dem Namen username.github.io/project.

2. React-App-Code hinzufügen ➕

   • Folgen Sie der Anleitung oben, um Ihr Bento zu erstellen, und fügen Sie dann den Code zu Ihrem Repository hinzu.

3. Bearbeiten Sie die Homepage. Geben Sie package.json ein ✏️

   • Fügen Sie den Homepage-Schlüssel hinzu:

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

   oder
   

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

4. Remote-Repository ändern?

   • Verknüpfen Sie Ihr lokales Repository mit dem GitHub-Repository:

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

5. Push React App ⬆️

   • Erstellen und bereitstellen Sie die App:

    npm run build
    npm run deploy
   

6. GitHub-Seiten konfigurieren ⚙️

   • Gehen Sie zu den Repository-Einstellungen auf GitHub.
   • Stellen Sie im Abschnitt „GitHub-Seiten“ die Quelle auf den Zweig „gh-pages“ ein.

Dadurch wird Ihr Bento auf GitHub-Seiten bereitgestellt.

---

Das ist Schluss! Sie haben jetzt ein benutzerdefiniertes Bento-Portfolio erstellt und auf GitHub Pages bereitgestellt – tolle Arbeit! ??

Vergessen Sie nicht, Ihr Bento-Portfolio in den Kommentaren unten und in den sozialen Medien zu teilen – das ist eine tolle Möglichkeit, aufzufallen! ?

Das obige ist der detaillierte Inhalt vonStellen Sie ein Bento auf GitHub Pages bereit. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!