Cara Menyebarkan Aplikasi React Gratis Dengan Halaman GitHub

Jika Anda memiliki proyek dan ingin menghostingnya secara gratis tanpa membeli domain, menggunakan GitHub Pages adalah pilihan yang tepat. GitHub Pages mengubah repositori Anda menjadi situs web dan memungkinkan Anda untuk meng-host situs proyek tanpa batas.

Menyebarkan situs React dengan navigasi membutuhkan konfigurasi ekstra dibandingkan dengan menggunakan situs statis. Tutorial ini memandu Anda melalui seluruh proses mulai dari membuat repositori GitHub hingga memiliki situs yang dihosting.

Buat Aplikasi Bereaksi

Untuk tujuan demonstrasi, Anda perlu buat proyek Bereaksi dengan perutean yang akan Anda terapkan nanti. Namun, jika Anda sudah memiliki Proyek reaksi, jangan ragu untuk melewati langkah ini.

Di terminal, jalankan buat-reaksi-aplikasi perintah untuk merancah proyek React dengan cepat:

npx buat-reaksi-aplikasi bereaksi-gh

Arahkan ke folder yang dibuat dan mulai aplikasi Anda.

npm jalankan mulai

Selanjutnya, buka folder proyek dengan pilihan Anda editor kode. Dalam src folder, hapus semuanya kecuali aplikasi.js dan index.js. Ganti konten di App.js dengan yang berikut:

fungsi Aplikasi() {
 kembali (


Halaman Github

Menyebarkan React ke Github




 );
}
ekspor Aplikasi default;

Tambahkan Perutean

Untuk menambahkan perutean ke aplikasi Anda, pertama, instal reaksi-router-dom:

npm install react-router-dom

Di App.js, tambahkan tautan ke halaman tentang:

import { Tautan } dari "react-router-dom";
fungsi Aplikasi() {
 kembali (


Tentang
Halaman Github

Menyebarkan React ke Github




 );
}
ekspor Aplikasi default;

Karena App.js akan bertindak sebagai beranda Anda, Anda hanya perlu membuat Tentang komponen:

const Tentang = () => {
 kembali ( 


Rumah
Tentang Halaman




 );
}
ekspor default Tentang;

Sekarang, Anda perlu membuat rute dan mengkonfigurasi router React.

Ubah index.js untuk mencocokkan URL dengan komponen masing-masing:

impor Bereaksi dari "bereaksi";
impor ReactDOM dari "react-dom";
impor Aplikasi dari "./Aplikasi";
import { HashRouter, Routes, Route } dari "react-router-dom";
impor Tentang dari "./Tentang";
ReactDOM.render(



} />
}/>


,
 document.getElementById("root")
);

Perhatikan bagaimana Anda menggunakan HashRouter alih-alih BrowserRouter. Menggunakan BrowserRouter akan memunculkan kesalahan 404. Ini karena perutean bekerja secara berbeda di halaman GitHub. Hashrouter tidak menimbulkan kesalahan karena menggunakan bagian hash dari URL untuk menyinkronkan UI dengan URL.

Langkah terakhir adalah melakukan semua perubahan baru ke Git:

git tambahkan.
git commit -m "Buat aplikasi Bereaksi"

Buat Repositori GitHub

Sejak Halaman GitHub akan meng-host aplikasi Anda dengan mengonversi repositori ke situs web, Anda perlu membuat repositori GitHub. Buka akun GitHub Anda dan buat repositori baru dengan nama yang sama dengan proyek Anda.

Selanjutnya, tambahkan repositori GitHub ke repositori lokal Anda sebagai remote:

git remote tambahkan asal /.git

Terakhir, Dorong repositori lokal ke GitHub:

git cabang -M utama
git push --set-upstream Asal main

Deploy Aplikasi React ke Halaman GitHub

Untuk menggunakan Halaman GitHub, Anda harus menginstalnya terlebih dahulu:

npm instal halaman gh

halaman-gh akan memungkinkan Anda untuk membuat halaman-gh cabang tempat Anda akan menerapkan kode Anda.

Selanjutnya, pergi ke Anda package.json file dan tambahkan beranda yang akan menjadi URL beranda aplikasi:

"beranda": "https://.github.io//",
"skrip": {
 "predeploy": "npm run build",
 "deploy": "gh-pages -d build", 
 "mulai": "skrip reaksi mulai",
 "build": "react-script build",
 "test": "tes skrip reaksi",
 "eject": "keluarkan skrip reaksi"
 }

Jalankan perintah berikut untuk menyelesaikan proses penerapan:

npm menjalankan penyebaran

Aplikasi Anda sekarang di-deploy ke GitHub dan Anda dapat mengunjunginya di https://.github.io/.

Lakukan Lebih Banyak Dengan Halaman GitHub

GitHub Pages menyediakan cara sederhana untuk menyebarkan situs web ke internet secara gratis. Meskipun Anda hanya melihat bagaimana Anda dapat menerapkan proyek React sederhana, GitHub Pages memungkinkan Anda untuk melakukan lebih banyak lagi. Misalnya, Anda dapat membuat blog lengkap menggunakan Jekyll dan bahkan menghostingnya menggunakan domain khusus.

Cara Meng-host Situs Web Gratis Menggunakan Halaman GitHub

Baca Selanjutnya

Tentang Penulis