Membuat Website Statis dari Repository GitHub Menggunakan Netlify

Pengenalan Netlify dan langkah-langkah mengintegrasikan Repository GitHub dengan Netlify untuk keperluan Website Statis.
Pengenalan Netlify dan langkah-langkah mengintegrasikan Repository GitHub dengan Netlify untuk keperluan Website Statis.
Static Website from GitHub with Netlify

Tentang Netlify

Netlify merupakan penyedia layanan Cloud Computing dari San Fransisco terkhusus pada hosting dan jasa backend tanpa server untuk aplikasi berbasis web dan website statis.

Website statis merupakan sebuah website berisi suatu laman web yang dikirimkan ke browser pengguna seperti yang tersimpan di server, berbeda dengan website dinamis yang setiap lamannya dihasilkan dari suatu web app.

Nah, seri artikel ini akan membahas tentang memanfatkan Netlify dan GitHub untuk membuat, menyimpan, dan meng-hosting laman-laman website agar bisa diakses secara realtime.

Artikel kali ini merupakan alternatif dari tutorial tentang Cara Mem-publish Website dari GitHub menggunakan GitHub Pages, bedanya artikel kali ini menjelaskan tentang mempublish website melalui Netlify.

Langkah Mengintegrasikan Repository Github ke Netlify

Hal yang Perlu Dipahami Tentang Repository GitHub

Sebelum mulai, ada beberapa hal dan istilah yang sebaiknya perlu dipahami terlebih dahulu, yaitu tentang dasar susunan website dan tentang Repository GitHub.
Sama seperti sebuah Folder, sebuah website juga tersusun dari beberapa file dan folder, tetapi file tersebut memiliki kriteria khusus; kriteria standard tersebut digambarkan sebagai berikut: 
.
├── assets
│   ├── icons.svg
│   ├── img
│   │   └── icons
│   │       ├── logo128.png
│   │       ├── logo192.png
│   │       └── maskable_icon.png
│   └── style.css
├── images
│   ├── avatar-min.jpg
│   ├── fulls
│   │   ├── ds4.jpg
│   │   ├── merapi.jpg
│   │   ├── merbabu.jpg
│   │   └── tambak.jpg
│   └── thumbs
│       ├── ds4-min.jpg
│       ├── merapi-min.jpg
│       ├── merbabu-min.jpg
│       └── tambak-min.jpg
├── 404.html
├── index.html
├── contact.html
├── favicon.png
├── robots.txt
└── sitemap.xml
Di atas merupakan contoh susunan file dan folder dari sebuah website standard yang disimpan di GitHub. Penjelasan singkat mengenai setiap file di atas adalah sebagai berikut:
  • Folder: berisi file-file asset berupa icon, css, dan javascript.
  • .html: index.html merupakan homepage atau laman beranda dari sebuah website, contact.html merupakan laman umum yang dapat diakses melalui alamat berakhiran /contact.html, 404.html jika di publish melalui GitHub akan dirender menjadi laman 404 khusus.
  • File lain: favicon.png gambar icon yang ditampilkan di sebelah judul website (title bar), robots.txt berisi pengaturan tentang apakah situs pencari dapat mengindeks website tersebut atau tidak, sitemap.xml berisi daftar laman yang ada pada website tersebut.
Salah satu keuntungan menggunakan Netlify adalah Repository yang di-publish tidak harus berjenis publik, Repository berjenis private-pun dapat di-publish. Sedangkan jika menggunakan GitHub Pages, repository yang di-publish harus berjenis publik, jika private maka harus berlangganan GitHub Pro.

Sampai sini seharusnya pembaca sudah menyiapkan repository di GitHub berupa laman seperti pada contoh di atas.

Mengintegrasikan Github dengan Netlify

  1. Kunjungi laman di bawah ini untuk mulai mendaftar di Netlify 
    https://app.netlify.com/signup
    Disarankan mendaftar dengan akun GitHub.
  2. Buat satu Team. Karena Netlify Free hanya disediakan satu Team.
  3. Buat Site baru dengan cara klik tombol New site from Git, Pilih GitHub, lalu pilih repository yang akan dipublish. Jika repo yang diinginkan tidak muncul, klik pilihan Configure the Netlify App on GitHub, geser ke bawah pada pilihan Repository Access, pilih All repositories. Klik Save. Kembali ke pilihan repo yang ingin di-publish, klik di pilihan repo tersebut. Langkah ke-3 tentang Deploy dan Publish, klik Deploy Site
  4. Situs yang baru di-publish memiliki alamat domain berpola domain-example-XXXXX.netlify.app, untuk mengubah subdomain atau memasang custom domain klik tombol Settings, klik bagian Domain Management, pada bagian nama subdomain pilih Options > Edit site name lalu masukkan subdomain yang diinginkan, klik Save.
  5. Dan selesai, repository GitHub tersebut telah terbit dan dapat diakses melalui subdomain.netlify.app yang telah diatur sebelumnya.

Cara Mengupdate Konten Website

Nah, proses ini yang paling seru, setiap kita melakukan 'Commit' ke Repo GitHub, Netlify mendeteksi perubahan tersebut dan akan langsung melakukan Deploy dan Publish secara otomatis.

Dan demikian artikel tentang Mempublish Website Statis di Repository GitHub Menggunakan Netlify, semoga bermanfaat. Jika ada kesulitan atau pertanyaan terkait arikel ini bisa ditanyakan melalui komentar di bawah.

Posting Komentar