Hosting Website Gratis di Netlify tanpa Perlu GIT

2 min read

Hosting Website Gratis di Netlify
Hosting Website Gratis di Netlify (Logo: Hak Cipta dari Netlify Inc)

TeknoCerdas.com – Salam cerdas untuk kita semua. Netlify adalah salah provider populer untuk melakukan deployment atau hosting website dengan GIT workflow. Dimana website akan diupload atau diupdate ketika ada perubahan source code di repository GIT yang telah ditentukan. Bagi yang terbiasa dengan GIT ini adalah hal yang sangat praktis. Tulisan ini membahas bagaimana hosting gratis di Netlify tanpa perlu Git.

Bagaimana dengan yang tidak memiliki GIT repo atau hanya ingin website sederhana saja? Ternyata Netlify juga mendukung upload file secara manual. Ini sangat cocok bagi yang memiliki website statis sederhana atau yang tidak ingin menghubungkan ke GIT repository.

Pastikan anda memiliki akun Netlify sebelum mencoba tutorial ini. Pendaftaran Netlify gratis dan bisa dilakukan dengan email atau beberapa identity provider seperti Google dan GitHub.

Baca Juga
WordPress Sebagai HeadLess CMS

1. Buat website di komputer lokal

Pada contoh ini kita akan membuat sebuah website sederhana yang hanya terdiri dari sebuah file index.html. Sehingga kita fokus pada inti pembahasan yaitu deployment website ke Netlify.

Buat sebuah direktori atau folder baru pada komputer anda. Pada contoh ini saya menggunakan Command Line. Namakan direktori tersebut netlify-website.

$ mkdir netlify-website

Didalam direktori netlify-website inilah kita akan menempatkan file index.html. Buat sebuah file index.html menggunakan teks editor favorit anda.

<!DOCTYPE html>
<html>
<head>
<style>
  body {
  	font-family: Sans-Serif;
  }
  .main {
    text-align: center;
    padding-top: 200px;
  }
  .globe {
    margin: 0 auto;
    width: 60%;
  }
  h1 { font-size: 28px; }
  @media only screen and (min-width: 960px) {
    .main { padding-top: 100px; }
    .globe { width: 40%; }
  }
</style>
</head>
<body>
<!-- Credit https://freesvg.org/globe-facing-europe-and-africa-vector-illustration -->
<div class="main">

  <div class="header">
    <h1>Mari Selamatkan Bumi!</h1>
  </div>
  
  <div class="globe">
  <svg xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" id="svg2" sodipodi:docname="_svgclean2.svg" viewbox="0 0 156 156" version="1.1" inkscape:version="0.48.3.1 r9886">
    <sodipodi:namedview id="namedview10" bordercolor="#666666" inkscape:pageshadow="2" guidetolerance="10" pagecolor="#ffffff" gridtolerance="10" inkscape:window-maximized="0" inkscape:zoom="0.22425739" objecttolerance="10" borderopacity="1" inkscape:current-layer="svg2" inkscape:cx="372.04724" inkscape:cy="-370.18109" inkscape:window-y="0" inkscape:window-x="0" inkscape:window-width="640" showgrid="false" inkscape:pageopacity="0" inkscape:window-height="480"></sodipodi:namedview>
    <circle id="circle4" sodipodi:rx="78" sodipodi:ry="78" style="fill:#235c96" cy="78" sodipodi:cy="78" cx="78" r="78" sodipodi:cx="78"></circle>
    <path id="path6" style="fill:#94ba32" inkscape:connector-curvature="0" d="m8 78c0 15.6 5 29.8 13.6 41.4l-3.2-22.2zm15-43.4 9.2-2.2c7.8-11.4 18.8-17.4 28.8-19.2l-15.8 11 15.6-3.8 11.2-6.2-3.2-5.6c-18.4 2.4-34.8 12-45.8 26zm10.2 43.2 6.6 13.2 19.6 1.8 10.6 40h13l14.8-18-0.8-11.2c6.4-5 11.4-11.2 13.4-19.2l-10 2.4-13-20.4 3-2 12.8 18 12.6-11c-6.6-0.8-11-4-12.8-9.6l22.8 3.6 8.2 16.8 3.6-22.4 10.2 12c-2.6-29.6-23.8-54-51.8-61.4 0 6.8-3.8 12.4-9.2 15.6l-7.2-4.2-13.8 8 4.8 4.6 7.4-8.8-1.4 10.8c-9 0-13.4 1.4-19 4.4l-1.2 5.6-6.2-1.4-2.6 7 5.4 1.6c3-3.8 5.4-6.2 11.2-7.6l6 6.6-3.6 1.2 2.2 1.8 3.2-3.8-4.6-6.4c4.6 0 7.2 2.8 8.8 9.8l8.2-12 10 4.2-1 2.6-11.8 1v4.4l9 0.6-2.8 7.2c-16.4 0-21.2-0.4-24.6-7.8l-13.6-0.8c-10 6-15 13.8-16.4 23.2zm19.4-41.4 8 2v-8zm44.4 7.8 4-2.2 5.4 11.2-3.6 0.8zm2.2 79.8 3.6 1.4 6-13.8-7.6 4.8z"></path>
  </svg>
  </div>
  
</div>
</body>
</html>

Coba buka file tersebut pada komputer anda menggunakan browser. Tampilan dari file tersebut kurang lebih akan seperti berikut.

Tampilan Website
Tampilan Website yang dibuat

2. Mengupload Website ke Netlify

Masuk ke halaman dashboard dari Netlify kemudian ke halaman Sites. Scroll ke bagian bawah disana anda akan menemukan area untuk melakukan drag and drop file.

Drag and drop direktori netlify-website yang telah dibuat pada langkah sebelumnya.

Drag and Drop folder ke Netlify
Upload website dengan Drag and Drop folder ke Netlify

Setelah sukses upload maka website akan diberinama secara random oleh Netlify. Dalam contoh ditunjukkan oleh gambar berikut ini.

Random URL oleh Netlify
Random URL oleh Netlify

Sekarang coba buka URL random tersebut. Jika dibuka maka yang muncul adalah tampilan website “Mari Selamatkan Bumi!” yang kita buat. Yeah!

Namun alamat ini susah diingat, jangankan orang lain kita sendiri pun kemungkinan besar lupa. Untuk itu perlu kita ganti dengan nama yang lebih mudah diingat. Dalam contoh ini saya ganti nama websitenya dengan “selamatkanbumi”. Masuk ke halaman Site settings seperti gambar dibawah.

Mengganti Nama Website di Netlify
Mengganti Nama Website di Netlify
Mengganti nama menjadi selamatkanbumi
Mengganti nama menjadi “selamatkanbumi”

Setelah diganti maka website bisa diakses dengan alamat yang lebih manusiawi yaitu https://selamatkanbumi.netlify.app. Gratis dan mudah. Selamat mencoba.