Sebarkan bento ke Halaman GitHub

Hai kawan-kawan?

Dalam artikel ini, kami akan mencipta portfolio seperti bento yang menakjubkan seperti ini dan mengaturkannya ke Halaman GitHub supaya anda boleh berkongsinya dengan dunia.

Jadi, adakah anda bersedia untuk mencipta milik anda?

1️⃣.. 2️⃣.. 3️⃣.. Jom ?

Ambil komputer riba anda, buka IDE anda dan mula membuat kerajinan ?

Inilah bento saya?

Ia dibina menggunakan React, Typescript, framer-motion dan tailwind CSS.

Berikut ialah kod grid bento dedah asal oleh @tomisloading

hover.dev Dedahkan Bento

Saya mendapat inspirasi daripada komponen itu, menyesuaikannya dan mengaturkannya ke Halaman GitHub.

Buat bento anda?

Begini cara anda boleh membuat bento sedemikian dalam 4 langkah mudah:

Langkah 1️⃣

• Klon repositori ini.

Langkah 2️⃣

• Jalankan npm install untuk memasang semua pakej yang diperlukan.

Langkah 3️⃣

• Edit fail src/data/profile.json untuk memperibadikan bento mengikut keperluan anda.

Langkah 4️⃣

• Jalankan npm start dan lihat ia beraksi.

Gunakannya ke Halaman Github ?

Kita boleh menggunakan pakej gh-pages untuk menggunakan bento.
Berikut ialah panduan langkah demi langkah untuk penggunaan:

1. Buat Repositori ?

   • Untuk halaman pengguna: Cipta repositori bernama username.github.io.
   • Untuk halaman projek: Cipta repositori bernama username.github.io/project.

2. Tambah Kod Apl React ➕

   • Ikuti panduan di atas untuk membuat bento anda, kemudian tambahkan kod pada repositori anda.

3. Edit halaman utama Key in package.json ✏️

   • Tambah kunci halaman utama:

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

   Salin selepas log masuk

   atau
   

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

   Salin selepas log masuk

4. Tukar Repositori Jauh ?

   • Pautkan repositori tempatan anda ke repositori GitHub:

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

   Salin selepas log masuk

5. Apl Push React ⬆️

   • Bina dan gunakan apl:

    npm run build
    npm run deploy
   

   Salin selepas log masuk

6. Konfigurasikan Halaman GitHub ⚙️

   • Pergi ke tetapan repositori pada GitHub.
   • Di bawah bahagian "Halaman GitHub", tetapkan sumber kepada cawangan gh-pages.

Ini akan menggunakan Bento anda ke Halaman GitHub.

Itu pembalut! Anda kini telah membina dan menggunakan portfolio bento tersuai ke Halaman GitHub – kerja yang bagus! ??

Jangan lupa kongsikan portfolio bento anda dalam ulasan di bawah dan di media sosial – ini cara yang bagus untuk mendapat perhatian! ?

Atas ialah kandungan terperinci Sebarkan bento ke Halaman GitHub. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!