react gh pages

Menyebarkan aplikasi reaksi* ke halaman gitub

* dibuat menggunakan create-react-app

Perkenalan

Dalam tutorial ini, saya akan menunjukkan kepada Anda bagaimana Anda dapat membuat aplikasi React dan menggunakannya ke halaman GitHub.

Untuk membuat aplikasi React, saya akan menggunakan create-react-app , yang merupakan alat yang dapat digunakan orang untuk membuat aplikasi React dari awal. Untuk menggunakan aplikasi React, saya akan menggunakan gh-pages , yang merupakan paket NPM yang dapat digunakan orang untuk menggunakan barang-barang ke halaman GitHub, layanan hosting web gratis yang disediakan oleh GitHub.

Jika Anda mengikuti tutorial ini, Anda akan berakhir dengan aplikasi React baru - dipenuhi di halaman GitHub - yang kemudian dapat Anda sesuaikan.

Terjemahan

Tutorial ini telah diterjemahkan dari bahasa Inggris aslinya ke dalam bahasa berikut:

• China tradisional (kredit: @creacer9487)

Tutorial

Prasyarat

1. Node dan NPM diinstal. Berikut adalah versi yang akan saya gunakan saat membuat tutorial ini:

   $ node --version
   v16.13.2
   
   $ npm --version
   8.1.2

   Menginstal NPM menambahkan dua perintah ke sistem— npm dan npx - keduanya yang akan saya gunakan saat membuat tutorial ini.

2. Git dipasang. Inilah versi yang akan saya gunakan saat membuat tutorial ini:

   $ git --version
   git version 2.29.1.windows.1

3. Akun github.

Prosedur

1. Buat repositori kosong di github

1. Masuk ke akun GitHub Anda.
2. Kunjungi Formulir Buat Repositori Baru.
3. Isi formulir sebagai berikut:

   • Nama Repositori: Anda dapat memasukkan nama apa pun yang Anda inginkan*.

     * Untuk situs proyek, Anda dapat memasukkan nama apa pun yang Anda inginkan. Untuk situs pengguna, GitHub mengharuskan nama repositori memiliki format berikut: {username}.github.io (misalnya gitname.github.io )

     Nama yang Anda masukkan akan muncul di beberapa tempat: (a) Dalam referensi ke repositori di seluruh github, (b) dalam url repositori, dan (c) dalam url aplikasi reaksi yang digunakan.

     Dalam tutorial ini, saya akan menggunakan aplikasi React sebagai situs proyek.

     Saya akan masuk: react-gh-pages

   • Privasi Repositori: Pilih publik (atau pribadi *).

     * Untuk pengguna gratis GitHub, satu -satunya jenis repositori yang dapat digunakan dengan halaman GitHub adalah publik . Untuk pengguna GitHub Pro (dan pengguna pembayaran lainnya), repositori publik maupun pribadi dapat digunakan dengan halaman GitHub.

     Saya akan memilih: Publik

   • Inisialisasi Repositori: Biarkan semua kotak centang kosong.

     Itu akan membuatnya begitu GitHub membuat repositori kosong, alih-alih pra-populasi repositori dengan file README.md , .gitignore , dan/atau LICENSE .

4. Kirim formulir.

Pada titik ini, akun GitHub Anda berisi repositori kosong, memiliki nama dan jenis privasi yang Anda tentukan.

2. Buat aplikasi bereaksi

1. Buat aplikasi React bernama my-app :

   Jika Anda ingin menggunakan nama yang berbeda dari my-app (mis. web-ui ), Anda dapat mencapainya dengan mengganti semua kemunculan my-app di tutorial ini, dengan nama lain itu (yaitu my-app > web-ui ).

   $ npx create-react-app my-app

   Perintah itu akan membuat aplikasi React yang ditulis dalam JavaScript. Untuk membuat satu tertulis di TypeScript, Anda dapat mengeluarkan perintah ini sebagai gantinya:

   $ npx create-react-app my-app --template typescript

   Perintah itu akan membuat folder baru bernama my-app , yang akan berisi kode sumber aplikasi React.

   Selain berisi kode sumber aplikasi React, folder itu juga merupakan repositori git. Karakteristik folder itu akan ikut bermain di Langkah 6.

   Nama Cabang: master vs. main

   Repositori Git akan memiliki satu cabang, yang akan dinamai (a) master , default untuk instalasi Git baru; atau (b) Nilai variabel konfigurasi $ git config --global init.defaultBranch main , init.defaultBranch , jika komputer Anda menjalankan GIT versi 2.28 atau lebih baru dan Anda telah mengatur variabel itu dalam konfigurasi git Anda (mis. .

   Karena saya belum mengatur variabel itu di instalasi Git saya, cabang di repositori saya akan dinamai master . Jika cabang di repositori Anda memiliki nama yang berbeda (yang dapat Anda periksa dengan menjalankan $ git branch ), seperti main ; Anda dapat mengganti semua kemunculan master di seluruh sisa tutorial ini, dengan nama lain (misalnya master → main ).

2. Masukkan folder yang baru dibuat:

   $ cd my-app

Pada titik ini, ada aplikasi React di komputer Anda dan Anda berada di folder yang berisi kode sumbernya. Semua perintah yang tersisa yang ditampilkan dalam tutorial ini dapat dijalankan dari folder itu.

3. Instal Paket NPM gh-pages

1. Instal Paket NPM gh-pages dan tentukan sebagai ketergantungan pengembangan:

   $ npm install gh-pages --save-dev

Pada titik ini, paket NPM gh-pages diinstal pada komputer Anda dan ketergantungan aplikasi React padanya didokumentasikan dalam file package.json aplikasi React.

4. Tambahkan properti homepage ke file package.json

1. Buka file package.json di editor teks.

   $ vi package.json

   Dalam tutorial ini, editor teks yang akan saya gunakan adalah VI. Anda dapat menggunakan editor teks apa pun yang Anda inginkan; Misalnya, kode studio visual.

2. Tambahkan properti homepage dalam format ini*: https://{username}.github.io/{repo-name}

   * Untuk situs proyek, itulah formatnya. Untuk situs pengguna, formatnya adalah: https://{username}.github.io . Anda dapat membaca lebih lanjut tentang properti homepage di bagian "Halaman GitHub" dari dokumentasi create-react-app .

   {
     "name": "my-app",
     "version": "0.1.0",
   + "homepage": "https://gitname.github.io/react-gh-pages",
     "private": true,

Pada titik ini, file package.json aplikasi React termasuk properti bernama homepage .

5. Tambahkan skrip penempatan ke file package.json

1. Buka file package.json di editor teks (jika belum terbuka dalam satu).

   $ vi package.json

2. Tambahkan properti predeploy dan properti deploy ke objek scripts :

   "scripts": {
   +   "predeploy": "npm run build",
   +   "deploy": "gh-pages -d build",
       "start": "react-scripts start",
       "build": "react-scripts build",

Pada titik ini, file package.json aplikasi React termasuk skrip penempatan.

6. Tambahkan "remote" yang menunjuk ke repositori GitHub

1. Tambahkan "remote" ke repositori git lokal.

   Anda dapat melakukannya dengan mengeluarkan perintah dalam format ini:

   $ git remote add origin https://github.com/{username}/{repo-name}.git

   Untuk menyesuaikan perintah itu untuk situasi Anda, ganti {username} dengan nama pengguna GitHub Anda dan ganti {repo-name} dengan nama repositori github yang Anda buat pada langkah 1.

   Dalam kasus saya, saya akan menjalankan:

   $ git remote add origin https://github.com/gitname/react-gh-pages.git

   Perintah itu memberi tahu Git di mana saya ingin itu mendorong hal-hal setiap kali saya-atau paket NPM gh-pages yang bertindak atas nama saya-menerbitkan perintah $ git push dari dalam repositori git lokal ini.

Pada titik ini, repositori lokal memiliki "jarak jauh" yang URL menunjuk ke repositori GitHub yang Anda buat pada langkah 1.

7. Dorong aplikasi React ke repositori GitHub

1. Dorong aplikasi React ke repositori github

   $ npm run deploy

   Itu akan menyebabkan predeploy dan deploy skrip yang ditentukan dalam package.json untuk dijalankan.

   Di bawah kap, skrip predeploy akan membangun versi yang dapat didistribusikan dari aplikasi React dan menyimpannya di folder bernama build . Kemudian, skrip deploy akan mendorong konten folder itu ke komit baru pada cabang gh-pages dari repositori GitHub, membuat cabang itu jika belum ada.

   Secara default, komit baru di cabang gh-pages akan memiliki pesan komit "pembaruan". Anda dapat menentukan pesan komit khusus melalui opsi -m , seperti ini:

   $ npm run deploy -- -m " Deploy React app to GitHub Pages "

Pada titik ini, repositori GitHub berisi cabang bernama gh-pages , yang berisi file yang membentuk versi yang dapat didistribusikan dari aplikasi React. Namun, kami belum mengkonfigurasi halaman GitHub untuk melayani file -file tersebut.

8. Konfigurasikan halaman GitHub

1. Arahkan ke halaman Pengaturan Halaman GitHub
   1. Di browser web Anda, navigasikan ke repositori GitHub
   2. Di atas browser kode, klik pada tab Tab berlabel "Pengaturan"
   3. Di bagian bilah sisi, di bagian "Kode dan Otomasi", klik "Halaman"
2. Konfigurasikan pengaturan "Bangun dan Penyebaran" seperti ini:
   1. Sumber : Menyebarkan dari cabang
   2. Cabang :
      • Cabang: gh-pages
      • Folder: / (root)
3. Klik tombol "Simpan"

Itu saja! Aplikasi React telah digunakan ke halaman GitHub!

Pada titik ini, aplikasi React dapat diakses oleh siapa saja yang mengunjungi URL homepage yang Anda tentukan pada Langkah 4. Misalnya, aplikasi React yang saya gunakan dapat diakses di https://gitname.github.io/react-gh-pages.

9. (Opsional) Simpan kode sumber aplikasi React di github

Pada langkah sebelumnya, paket NPM gh-pages mendorong versi yang dapat didistribusikan dari aplikasi React ke cabang bernama gh-pages di repositori GitHub. Namun, kode sumber aplikasi React belum disimpan di GitHub.

Pada langkah ini, saya akan menunjukkan kepada Anda bagaimana Anda dapat menyimpan kode sumber aplikasi React di GitHub.

1. Melakukan perubahan yang Anda buat saat Anda mengikuti tutorial ini, ke cabang master repositori Git lokal; Kemudian, dorong cabang itu ke cabang master dari repositori GitHub.

   $ git add .
   $ git commit -m " Configure React app for deployment to GitHub Pages "
   $ git push origin master

   Saya merekomendasikan menjelajahi repositori GitHub pada saat ini. Ini akan memiliki dua cabang: master dan gh-pages . Cabang master akan berisi kode sumber aplikasi React, sedangkan cabang gh-pages akan berisi versi yang dapat didistribusikan dari aplikasi React.

Referensi

1. Panduan Penerapan create-react-app Resmi
2. Blog GitHub: Bangun dan sebarkan halaman GitHub dari cabang mana pun
3. Melestarikan file CNAME saat menggunakan domain khusus

Catatan

• Terima kasih khusus kepada GitHub (perusahaan) yang telah memberi kami layanan hosting halaman GitHub secara gratis.
• Dan sekarang, waktu untuk mengubah aplikasi reaksi default yang dihasilkan oleh create-react-app menjadi sesuatu yang unik!
• Repositori ini terdiri dari dua cabang:
  • master - Kode Sumber Aplikasi React
  • gh-pages - Aplikasi React yang dibangun dari kode sumber itu

Kontributor

Terima kasih kepada orang -orang ini yang telah berkontribusi pada pemeliharaan tutorial ini.

Daftar ini dipertahankan secara manual - untuk sekarang - dan termasuk (a) setiap orang yang mengajukan permintaan tarik yang akhirnya digabung menjadi master , dan (b) setiap orang yang berkontribusi dengan cara yang berbeda (misalnya memberikan umpan balik konstruktif) dan yang menyetujui dari saya memasukkannya dalam daftar ini.