Cara Mudah Upload atau Deploy Static Website di Netlify

Admin・ 13 September 2021

9 min read ・ 4800 views

Deploy Website ke Netlify - Di artikel ini saya akan share tutorial bagaimana cara cepat untuk upload atau deploy static website di netlify. Netlify merupakan platform yang menyediakan layanan hosting gratis untuk static website atau single page dengan kemudahan proses build and deploy. Netlify terintegrasi dengan git provider seperti GitHub, GitLab dan bitbucket, sehingga dapat memudahkan dalam proses deploy. Dan di artikel ini, saya akan share cara deploy website dari GitHub ke Netlify.

Netlify products: netlify.com/products

Getting Started

Oke, sebelum ke langkah-langkah deploy static website ke netlify, mari kita siapkan dulu file-file website dan push ke github. Disini sebagai contoh, saya akan membuat folder baru dan menambahkan file html baru dengan nama index.html dan menggunakan starter template dari bootstrap.

Kemudian buat repository baru di github untuk menampung file html yang baru saja dibuat.

Setelah file html telah siap dan repository di github telah dibuat, sekarang kita push satu file html dengan nama index.html tersebut ke repository yang telah dibuat di github menggunakan perintah dasar git seperti gambar di atas yaitu;

• git init
• git remote ad origin https://github.com/user/repo.git
• git add .
• git commit -m 'text'
• git push origin master

*Pastikan kamu sudah membuka terminal dan masuk ke direktori project

Oke, setelah semua sudah siap, sekarang kita akan masuk ke step by step cara deploy static website ke netlify. 👇

Step 1: Create Account

Di step yang pertama ini kita akan awali dengan membuat akun netlify. Silahkan buka situs resmi netlify, kemudian klik button sign up. Di halaman sign up ini kita bebas memilih, apakah kita daftar menggunakan akun github, gitlab, bitbucket atau menggunakan email.

Silahkan ikuti alur dan selesaikan langkah pendaftaran sampai muncul button set up and continue.

Step 2: Add a New Project

Setelah sukses register akun netlify, selanjutnya akan didirect ke halaman overview seperti gambar di atas. Di step kedua ini, silahkan klik button New site from Git.

Kemudian, kita bisa menghubungkan netlify dengan Git provider dimana source code website kamu di host, seperti GitHub, GitLab dan Bitbucket. Karena di artikel tutorial ini saya menggunakan GitHub dan di awal artikel ini saya sudah push file index.html menggunakan starter template dari bootstrap ke GitHub, jadi di step ini saya akan memilih opsi GitHub.

Step 3: Authorize Netlify

Setelah memilih git provider, maka selanjutnya netlify akan meminta authorize seperti gambar di atas. Di step ini, silahkan langsung saja klik Authorize Netlify.

Step 4: Select Your Repository

Selanjutnya, pilih repository di github yang ingin di deploy ke situs baru di netlify. Sebagai contoh, saya akan deploy static website saya yang dibuat menggunakan starter template bootstrap di langkah awal tadi, dengan memilih repository codelapan/Deploy-to-Netlify.

Step 5: Configure

Kemudian di step configuration atau site setting ini, silahkan sesuaikan dengan source code website kamu. Karena pada artikel ini saya hanya memberikan contoh deploy static website yang sangat sederhana yaitu hanya dengan satu file index.html di repository github, jadi di step ini bisa diabaikan saja dan langsung saja klik button Deploy Site.

Done

Setelah klik Deploy Site, tunggu sampai proses deploy selesai. Jika proses deploy selesai maka static website kita sekarang sudah bisa go online. Untuk memerika apakah website kamu sudah online atau belum, kamu bisa coba akses subdomain yang diberikan oleh netilfy. Contoh seperti gambar di atas, static website saya sudah berhasil di deploy di netlify dengan subdomain https://quirky-minsky-b24c06.netlify.app/.

Ketika saya coba akses subdomain tersebut di browser, ternyata static website saya sudah bisa go online.

Custom Subdomain & Domain

Tidak suka dengan subdomain ? tenang, kita bisa edit subdomain sesuai dengan keinginan kita, apakah tetap menggunakan subdomain dari netlify atau menggunakan domain.

Di halaman site overview, silahkan klik button Domain Settings. Selanjutnya kita akan diarahkan ke halaman seperti di atas. Di halaman ini, klik dropdown Option dan klik dropdown item Edit site name. Dengan mengedit site name, maka subdomain kamu juga akan berubah.

Atau kamu mau pakai domain sendiri ? Bisa, kamu dapat membawa nama domain yang sudah kamu miliki, atau membeli yang baru. Saat kamu membeli domain di netlify, maka secara otomatis netlify akan mengonfigurasi pengaturan DNS dan menyediakan wildcard certificate untuk domain kamu.

Untuk custom domain, silahkan klik button Add custom domain kemudian tambahkan nama domain kamu. Jika domain yang ditambahkan tersebut tidak dibeli di netlify, mungkin nanti akan ada pesan "domainmu.com is already registered. If you registered this domain name through a different registrar, select Add domain to begin delegating it to Netlify.". Jika muncul pesan seperti itu, kamu bisa langsung saja klik Add button.

Selanjutnya kamu bisa pointing ke netlify dengan menambahkan record di DNS management di tempat kamu membeli domain.

Update Script

Bagaimana jika ada perubahan script ? Jika ada perubahan script, kita bisa langsung push ke github dan secara otomatis netlify juga bisa membaca setiap ada perubahan di github.

Add Form

Netlify hadir dengan built-in form handling yang sudah diaktifkan secara default. Netlify Build bot melakukannya dengan mem-parsing file HTML secara langsung pada saat deploy, jadi kita tidak perlu melakukan panggilan API atau menyertakan JavaScript tambahan di situs kita.

Tambahkan kode form HTML di halaman manapun di situs kamu, tambahkan data-netlify="true" atau netlify attribute di tag <form>, dan kamu dapat mulai menerima kiriman di panel Admin situs netlify kamu. Attribute name form kamu menentukan apa yang disebut form  Netlify app interface. Jika kamu memiliki lebih dari satu form di situs netlify, setiap form harus memiliki name yang berbeda. Berikut ini contohnya;

<form name="contact" method="POST" data-netlify="true">
    <div class="mb-3">
        <label for="exampleInputEmail1" class="form-label">Email address</label>
        <input type="email" name="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
        <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
    </div>
    <div class="mb-3">
        <label for="message" class="form-label">Message</label>
        <textarea name="message" id="message" cols="30" rows="10" class="form-control"></textarea>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

Saya akan menambahkan contact form di static website saya di netlify dengan kode form seperti contoh di atas. Ketika netlify bot parse HTML static untuk form yang telah ditambahkan, maka secara otomatis menghapus attribute data-netlify="true" atau netlify dari tag <form> dan menginject hidden input dengan name="form-name" dan value="contact" seperti di bawah ini.

<input type="hidden" name="form-name" value="contact">

Setelah menambahkan script baru, jangan lupa untuk push ke github.

Sekarang, jika saya coba refresh halaman website saya di netlify maka sudah ada form contact yang telah ditambahkan.

Hasil dari apa yang telah diinputkan di form netlify, akan disimpan dan ditampilkan di halaman form seperti gambar di atas. Sebagai contoh, disini saya telah membuat satu form collecting data yaitu contact. Untuk melihat data apa saja yang telah diinputkan di form contact, bisa dilihat dengan klik salah satu active form.

Sekian artikel tutorial deploy website di netlify kali ini. Sampai disini, kita telah belajar bagaimana cara cepat untuk upload atau deploy website di netlify dengan mengintegrasikan dengan git provider dan bagaimana cara setup website seperti custom domain dan menambahkan form di static website untuk collecting data.

Semoga artikel ini bisa bermanfaat dan sampai jumpa di artikel berikutnya 👋