Cara Membuat Website 100% Gratis Dengan TypeScript Template

Typescript adalah bahasa pemrograman berbasis JavaScript yang digunakan untuk membuat website atau aplikasi berbasis web. Berbeda dengan JavaScript, Typescript menambahkan fitur strong-typing & konsep object-oriented programming (OOP) klasik.

Karena berbasis JavaScript, untuk menggunakan Typescript diperlukan pengetahuan-pengetahuan dasar dari JavaScript. Dan Typescript sendiri sebenarnya mengonversi source code-nya menjadi script JavaScript agar dapat dimengerti oleh browser.

Saat ini banyak tersedia template website statis yang berbasis Typescript yang bisa anda dapatkan secara gratis ataupun berbayar. Cukup googling saja dengan kata kunci “react typescript free template”. Di sini kita akan gunakan template Landy, yang merupakan template website statis yang berbasis Typescript bebas biaya untuk membuat landing page. Website yang akan kita buat 100% gratis dari awal sampai akhir.

Persiapan

Yang perlu anda siapkan adalah:

• Koneksi internet
• Akun Gitlab. Buat akun baru di http://gitlab.com, jika Anda belum punya.
• Akun Netlify. Buat akun baru di https://www.netlify.com, jika Anda belum punya.
• Domain (opsional)

Langkah 1

Pastikan anda sudah install npm dan npx. Cari installer npm yang sesuai dengan sistem operasi anda. Kemudian jalankan npm i npx untuk install npx.

Langkah 2

Buat folder untuk proyek website anda. Misalnya anda ingin membuat website persewaan mobil. Buatlah folder “my-car-rent”.

Langkah 3

Jalankan perintah berikut:

npx create-react-app my-car-rent –template adrinlol
cd my-car-rent
npm start

Langkah 4

Buka browser anda dan akses alamat http://localhost:3000. Anda akan mendapati tampilan default dari template Landy.

Langkah 5

Lakukan modifikasi pada template Landy sesuai dengan kebutuhan Anda. Ubah teks dan gambar sesuai dengan kebutuhan.

Langkah 6

Buat repositori baru “my-car-rent” di gitlab Anda. Unggah seluruh file ke repositori tersebut.

Langkah 7

Langkah selanjutnya adalah mentransfer seluruh file repositori anda ke Netlify. Caranya:

1. Login Netlify.
2. Pilih menu “Add new site” > “Import an existing project”.
3. Pilih Gitlab.
4. Pilih repository “my-car-rent”.
5. Ikuti arahan form yang ada. Pada bagian “build command”, isikan: CI=false npm run build
6. Klik “Deploy Site”.

Tunggu proses deployment. Setelah selesai Anda akan diberitahu alamat URL dari website baru Anda. Untuk kasus percobaan ini, alamat URL web saya adalah https://62c6f32ae11ccf2e61a1281c–famous-bonbon-20f880.netlify.app/

Langkah 8

Anda dapat mengubah alamat URL agar lebih menarik di bagian “Domain Settings” atau pilih “Domain Management” > “Domains” dari menu utama. Anda juga dapat setup nama domain yang telah anda siapkan.

Saya akan ubah nama domainnya menjadi my-car-rent.netlify.app

Nah, website Anda sekarang sudah siap. 100% gratis. Kecuali Anda menggunakan nama domain sendiri yang tentunya harus mengeluarkan sedikit isi kocek untuk menyewanya.

Selamat mencoba.