Cara Menghosting Situs Web Angular Menggunakan Netlify dan GitHub

Saat menghosting situs web Angular online, Anda dapat memilih di antara banyak platform yang tersedia. Salah satunya yang dapat Anda gunakan secara gratis adalah Netlify.

Jika Anda menyimpan salinan kode sumber situs web Anda di repositori GitHub, Anda dapat menggunakan Netlify untuk menghosting situs tersebut.

Netlify juga secara otomatis menerapkan ulang situs Anda saat Anda mendorong setiap perubahan baru ke cabang repositori yang Anda hosting.

Cara Membuat Aplikasi Angular Contoh Dasar

Anda dapat membuat aplikasi Angular sederhana menggunakan editor seperti Visual Studio Code. Anda kemudian dapat menghosting situs web ini menggunakan Netlify.

1. Membuat aplikasi sudut baru.
2. Buat halaman rumah sederhana. Ganti kode di
   instagram viewer
   app.component.html file dengan konten laman landas berikut:

   <kelas div="tajuk kontainer-gelap">
   <h2>Situs Web Bisnis Kami</h2>
   </div>
   <kelas div="wadah-putih">
   <kelas div="isi">
   <h2>Situs Web Bisnis Kami</h2>
   <P>Pelajari cara merancang, mengembangkan, dan memelihara situs web profesional Anda dalam waktu singkat.</P>
   </div>
   </div>
   <kelas div="kontainer-oranye">
   <kelas div="isi">
   <h2>Apa yang kita lakukan</h2>
   <P>Kami memberi Anda alat untuk mengembangkan situs web dan solusi unik untuk pelanggan Anda. Kami juga menyediakan pelatihan untuk
    pemeliharaan dan topik terkait situs web lainnya.</P>
   </div>
   </div>
   <kelas div="wadah-putih">
   <kelas div="isi">
   <h2>Tentang kami</h2>
   <P>Kami adalah bisnis kecil yang beroperasi dari Melbourne, Australia. Ruang kami dibuat secara unik sehingga klien juga bisa
    kunjungi kami secara langsung.</P>
   </div>
   </div>
   <kelas div="footer wadah-gelap">
   <P>Hak Cipta 2022</P>
   </div>

3. Tambahkan beberapa gaya ke aplikasi Angular dengan menambahkan beberapa CSS ke app.component.css mengajukan:

   * {
    keluarga font: "Arial", Sans Serif;
   }
   .header {
    padding: 30px 50px;
   }
   .footer {
    padding: 5px 50px;
    perataan teks: tengah;
   }
   .wadah-gelap {
    warna latar belakang: #202C39;
    warna putih;
    tampilan: fleksibel;
    menyelaraskan-item: tengah;
   }
   .wadah-oranye {
    warna latar belakang: #FFD091;
    warna: #202C39;
   }
   .wadah-putih {
    background-color: asap putih;
    warna: #202C39;
   }
   .isi {
    padding: 100px 25%;
    tampilan: fleksibel;
    arah fleksibel: kolom;
    garis-tinggi: 2rem;
   ukuran huruf: 1.2em;
    menyelaraskan-item: tengah;
    perataan teks: tengah;
   }

4. Tambahkan beberapa gaya untuk keseluruhan aplikasi Angular style.css:

   tubuh {
    margin: 0;
    bantalan: 0;
   }

5. Untuk menguji aplikasi, navigasikan ke folder akarnya menggunakan terminal atau baris perintah. Ketik melayani memerintah:

   melayani

6. Tunggu kode Anda untuk dikompilasi, dan kunjungi http://localhost: 4200/ di browser web untuk melihat aplikasi Anda.
7. Dalam .browserlistrc file, hapus iOS safari versi 15.2-15.3. Ini akan mencegah kesalahan kompatibilitas muncul di konsol saat Anda membangun proyek.

   1 versi Chrome terakhir
   1 versi Firefox terakhir
   2 versi utama Edge terakhir
   2 versi utama Safari terakhir
   2 versi utama iOS terakhir
   ESR Firefox
   bukanios_saf 15.2-15.3
   bukansafari 15.2-15.3

8. Buat kode Anda menggunakan membangun perintah di terminal:

   membangun

9. Dalam .gitignore file, hapus atau komentari /dist garis. Menghapusnya akan memastikan dist folder ada di kumpulan file yang Anda dorong ke repositori GitHub Anda.

   # /dist

Cara Mendorong Kode Angular Anda ke GitHub

Anda harus menyimpan kode Anda di repositori jarak jauh agar Netlify dapat mengakses kode sumber.

Anda dapat membuat repositori baru di GitHub, dan mendorong kode situs web Anda ke repositori tersebut. Jika Anda tidak terbiasa dengan GitHub, mungkin berguna untuk memahami beberapa di antaranya Fitur dasar GitHub Pertama.

1. Buat repositori baru di GitHub. Anda dapat melakukan ini dengan masuk ke GitHub dan mengklik Baru.
2. Masukkan detail untuk repositori baru Anda. Beri nama seperti "aplikasi netlify", dan deskripsi. Jangan menginisialisasi repositori dengan file README, file .gitignore, atau lisensi.
3. Di terminal di komputer Anda, navigasikan ke direktori tempat Anda menyimpan aplikasi Angular Anda. Jalankan perintah berikut untuk menginisialisasi folder Anda sebagai repositori git:

   git init
   git tambahkan.
   git melakukan -m "pertama melakukan"

4. Dorong kode di dalam folder ini ke repositori jarak jauh baru yang Anda buat di GitHub. Ikuti git remote menambahkan asli, cabang git, Dan git push perintah yang disediakan oleh GitHub di halaman repositori jarak jauh Anda:

   git remote menambahkan asli <Tautan repo GitHub Anda>
   cabang git -M utama
   git push -u asal utama

5. Anda dapat mengonfirmasi bahwa kode aplikasi Angular Anda sekarang ada di repositori GitHub jarak jauh dengan menyegarkan halaman repositori GitHub.

Cara Menggunakan Netlify untuk Menghosting Kode Anda

Untuk menghosting kode Anda menggunakan Netlify, Anda harus memberinya akses ke kode sumber GitHub Anda. Netlify kemudian akan menggunakan dist folder proyek Angular Anda untuk menerbitkan versi kode Anda yang dibuat.

Anda dapat mengonfigurasi semua setelan ini dengan mengikuti langkah-langkah konfigurasi saat membuat situs baru:

1. Masuk atau daftar ke Netlify. Anda dapat melakukannya menggunakan kredensial GitHub Anda.
2. Dari dasbor utama dan halaman daftar situs, perluas Tambahkan situs baru, dan pilih Impor proyek yang ada.
3. Pilih GitHub.
4. Klik Konfigurasikan Netlify di GitHub.
5. Klik Install.
6. Netlify akan menampilkan daftar repositori GitHub Anda. Pilih salah satu yang ingin Anda hosting. Misalnya, jika Anda menamai repositori Anda "aplikasi-netlify", pilih "aplikasi-netlify" dari daftar.
7. Di layar konfigurasi, biarkan Pemilik, Cabang untuk menyebarkan, Dan Direktori dasar bidang pada nilai defaultnya. Jika Anda menerbitkan cabang tertentu, seperti cabang "Produksi" yang terpisah, Anda dapat menambahkannya ke dalam Cabang untuk menyebarkan bidang. Mengubah Membangun perintah bidang ke "ng build". Untuk Publikasikan direktori bidang, ketik dist/. Jika Anda tidak mengetahui nama proyeknya, Anda dapat menavigasi ke folder dist proyek Anda untuk menemukannya di sana. Misalnya, "dist/netlify-app".
8. Klik Terapkan situs.
9. Tunggu penerapan selesai. Ini mungkin memakan waktu beberapa menit, dan Anda mungkin perlu menyegarkan halaman. Jika semuanya berjalan lancar, Anda akan dapat melihat penerapan yang berhasil dalam daftar penerapan. Klik penerapan yang dipublikasikan, misalnya, Produksi: main@HEAD.
10. Klik pada Buka penerapan produksi tombol.
11. Sekarang Anda dapat melihat situs web Anda di tab lain, menggunakan URL dalam format .netlify.app. Jika Anda menghosting situs web dengan beberapa pengalihan, Anda mungkin tidak dapat mengalihkan ke halaman lain. Dalam hal ini, ada cara untuk perbaiki pengalihan yang gagal di Netlify. Jika mau, Anda juga bisa ubah nama domain gratis Anda.

Hosting Situs Web Anda Menggunakan GitHub dan Netlify

Mudah-mudahan, sekarang Anda berhasil menghosting situs web menggunakan GitHub dan Netlify. Anda dapat menyiapkan penerapan otomatis ke cabang tertentu dari repositori GitHub. Dengan cara ini, Anda dapat mengotomatiskan dan merampingkan penerapan situs web Anda.

Tapi Netlify bukan satu-satunya cara Anda dapat menggunakan aplikasi Angular online. Anda juga dapat menggunakan platform lain seperti GitHub Pages.