Cara Menghosting Situs Web Angular Menggunakan Netlify dan GitHub
.

Host situs Angular Anda secara gratis menggunakan proses mudah ini.


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. Buat aplikasi Angular baru.
  2. Buat halaman rumah sederhana. Ganti kode di app.component.html file dengan konten laman landas berikut:
    <div class="container-dark header">
    <h2>Our Business Website</h2>
    </div>
    <div class="container-white">
    <div class="content">
    <h2>Our Business Website</h2>
    <p>Learn how to design, develop, and maintain your professional website in no time.</p>
    </div>
    </div>
    <div class="container-orange">
    <div class="content">
    <h2>What We Do</h2>
    <p>We give you the tools to develop websites and unique solutions for your customers. We also provide training for
    maintenance and other website related topics.</p>
    </div>
    </div>
    <div class="container-white">
    <div class="content">
    <h2>About Us</h2>
    <p>We are a small business operating from Melbourne, Australia. Our spaces are uniquely crafted so clients can also
    visit us in person.</p>
    </div>
    </div>
    <div class="container-dark footer">
    <p>Copyright 2022</p>
    </div>
  3. Tambahkan beberapa gaya ke aplikasi Angular dengan menambahkan beberapa CSS ke app.component.css mengajukan:
    * {
    font-family: "Arial", sans-serif;
    }
    .header {
    padding: 30px 50px;
    }
    .footer {
    padding: 5px 50px;
    text-align: center;
    }
    .container-dark {
    background-color:
    color: white;
    display: flex;
    align-items: center;
    }
    .container-orange {
    background-color:
    color:
    }
    .container-white {
    background-color: whitesmoke;
    color:
    }
    .content {
    padding: 100px 25%;
    display: flex;
    flex-direction: column;
    line-height: 2rem;
    font-size: 1.2em;
    align-items: center;
    text-align: center;
    }
  4. Tambahkan beberapa gaya untuk keseluruhan aplikasi Angular style.css:
    body {
    margin: 0;
    padding: 0;
    }
  5. Untuk menguji aplikasi, navigasikan ke folder akarnya menggunakan terminal atau baris perintah. Ketik melayani memerintah:
    ng serve
  6. Tunggu kode Anda dikompilasi, dan kunjungi http://localhost:4200/ di browser web untuk melihat aplikasi Anda.
    Aplikasi Angular situs web bisnis kami di Chrome

  7. Dalam .browserlistrc file, hapus iOS safari versi 15.2-15.3. Ini akan mencegah kesalahan kompatibilitas muncul di konsol saat Anda membangun proyek.
    last 1 Chrome version
    last 1 Firefox version
    last 2 Edge major versions
    last 2 Safari major versions
    last 2 iOS major versions
    Firefox ESR
    not ios_saf 15.2-15.3
    not safari 15.2-15.3
  8. Buat kode Anda menggunakan membangun perintah di terminal:
    ng build
  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.
    gitignore terbuka di Kode Visual

How to Push Your Angular Code to GitHub

You will need to store your code in a remote repository for Netlify to access the source code.

You can create a new repository on GitHub, and push your website's code to that repository. If you are not familiar with GitHub, it might be useful to understand some of GitHub's basic features first.

  1. Create a new repository on GitHub. You can do this by logging in to GitHub and clicking on New.
    Buat tombol repositori baru di GitHub

  2. Masukkan detail untuk repositori baru Anda. Beri nama seperti "aplikasi netlify", dan deskripsi. Jangan menginisialisasi repositori dengan file README, file .gitignore, atau lisensi.
    Buat detail repo GitHub baru

  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 add .
    git commit -m "first commit"
    Perintah repo Git bash init

  4. Dorong kode di dalam folder ini ke repositori jarak jauh baru yang Anda buat di GitHub. Ikuti git remote menambahkan asli, cabang gitdan git push perintah yang disediakan oleh GitHub di halaman repositori jarak jauh Anda:
    git remote add original <Your GitHub repo link>
    git branch -M main
    git push -u origin main
    GitHub Push ke perintah repo jarak jauh

  5. Anda dapat mengonfirmasi bahwa kode aplikasi Angular Anda sekarang ada di repositori GitHub jarak jauh dengan menyegarkan halaman repositori GitHub.
    Halaman repositori jarak jauh untuk situs web di 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.
    Selamat datang di halaman Netlify di browser

  2. Dari dasbor utama dan halaman daftar situs, perluas Tambahkan situs barudan pilih Impor proyek yang ada.
    Impor proyek yang ada di Netlify

  3. Pilih GitHub.
    Impor repo Git dan opsi lain di Netlify

  4. Klik Konfigurasikan Netlify di GitHub.
    Konfigurasi Netlify pada tombol GitHub

  5. Klik Install.
    Instal halaman Netlify untuk GitHub

  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.
    Daftar repositori GitHub yang ada yang dapat Anda host

  7. Di layar konfigurasi, biarkan Pemilik, Cabang untuk menyebarkandan 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".
    Pengaturan situs dan penerapan di Netlify

    Untuk Publikasikan direktori , ketik dist/. Jika Anda tidak mengetahui nama proyeknya, Anda dapat menavigasi ke folder dist proyek Anda untuk menemukannya di sana. Misalnya, "dist/netlify-app".

    folder dist di situs repositori GitHub

  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.
    Halaman detail situs di Netlify

  10. Klik pada Buka penerapan produksi tombol.
    Halaman detail situs di Netlify

  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 memperbaiki pengalihan yang gagal di Netlify. Jika mau, Anda juga dapat mengubah nama domain gratis Anda.
    Situs web dihosting di Netlify di browser

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.

 

SERING DIPERTANYAKAN :

 

Baca Juga:  Pekerjaan mulai membangun 200 rumah baru di bekas situs Mirlees Blackstone antara Ryhall Road dan Uffington Road di Stamford