Cara Deploy Hugo di Shared Hosting dengan Git

Shared hosting biasanya digunakan untuk hosting PHP dan deployment-nya dilakukan melalui FTP.

Hugo juga sebenarnya bisa saja di-deploy ke shaed hosting dengan FTP.

Tapi… akan memakan waktu yang lama.

Karena banyak sekali file yang harus di-upload.

Kamu bisa cek sendiri di folder public. Folder ini berisi semua halaman web yang harus kita upload ke server.

Jumlah file di dalam public dir

Sekali deploy, bisa memakan waktu lebih dari 30 menit (tergantung kecepatan internet).

Pasti membosankan menunggu selama itu.

Bayangkan saja, setiap kali kita mengubah sesatu di Hugo, kita harus melakukan deployment dan menunggu lagi.

Ya Tuhan! betapa menyakitkannya hidup ini… 😄

Terus bagaimana donk solusinya?

Solusinya menggunakan Git.

Untung saja saat ini banyak penyedia layanan hosting yang memberikan fitur Git dan akses SSH.

Sehingga, deployment Hugo di shared hosting menjadi lebih mudah.

Tinggal commit dan push!

Website akan langsung ter-deploy di server.

Enak ‘kan.

Terus bagaimana caranya?

Mari kita simak…

Siapkan dulu ini:

Sebelum memulai, ada beberapa hal yang harus kamu siapkan…

  1. Website Hugo yang siap untuk di deploy;
  2. Akun CPanel di Shared Hosing;
  3. Pastikan di Shared Hosting menyediakan fitur Git dan akses SSH.

Oh ya, untuk akses SSH sendiri sebenarnya bersifat opsional. Tapi ada beberapa tempat hosting, yang memberikan fitur Git dan tapa akses SSH. Akibatnya kita tidak bisa push ke server. Cuma bisa clone saja.

Dan juga dengan SSH, kita akan bisa mengakses repositori private di Github, mauapun di Gitlab dan Bitbucket.

Jadi pastikan kamu memilih tempat hosting yang memberikan kedua layanan itu ya…

Ini bisa kamu tanyakan dulu di CS, sebelum membeli paket hostingnya.

Jika sudah siap, mari kita mulai dengan:

Setup SSH Key

SSH nanti akan berperan sebagai protokol yang akan membantu Git mengirim file dari lokal ke server maupun sebaliknya.

Biasanya, Kita akan diminta memasukan password saat menggunakan SSH.

Tapi dengan membuat SSH Key, kita tidak perlu lagi memasukan password terus-menerus setiap deploy maupun menggunakan SSH.

Lalu bagaimana cara membuat SSH Key?

Caranya…

Buka Terminal, lalu ikuti perintah ini:

# Install ssh client, jika kamu belum menginstalnya
sudo apt-get install openssh-client

Buatlah sebuah direktori atau folder baru di dalam home dengan nama .ssh. Ikuti perintah ini:

cd && mkdir .ssh & cd .ssh

Perintah tersebut akan membuat direktori .ssh, lalu masuk ke dalamnya.

Selanjutnya, buatlah SSH Key dengan mengetik perintah berikut:

ssh-keygen -t rsa -q -C "For SSH" -f rsa_id

Ubah rsa_id dengan nama SSH Key yang kamu inginkan. Misalnya: dian.

Perintah ini akan membuat file SSH Key baru di dalam direktori ~/.ssh.

Private Key dan Public Key

Ada dua Key yang dibuat:

  1. Private Key berisi kunci private yang tidak boleh diketahui oleh siapapun;
  2. Public Key berisi kunci yang akan kita taruh di server;

Setelah itu, buat file config di dalam direktori .ssh dengan isi sebagai berikut:

Host HOST
     Hostname HOST
     Port 22
     User USER
     IdentityFile ~/.ssh/rsa_id

Silahkan ubah:

  • HOST dengan alamat atau domain server,
  • nomer port 22 dengan port SSH yang digunakan pada server,
  • USER dengan username CPanel,
  • dan IdentityFile dengan file SSH Key yang baru saja dibuat.

Contohnya seperti ini:

Konfigurasi SSH

Belum tahu nomer port yang digunakan?

Tentang, nanti kita akan tahu setelah membaut repositori dan kamu bisa edit lagi isi file config.

Tapi umumnya port 64000 yang digunakan untuk SSH di Shared Hosting.

Selanjutnya kita harus mengirimkan Public Key ke server.

Caranya ketik perintah ini:

ssh-copy-id -i rsa_id.pub [email protected]

Silahkan ubah:

  • rsa_id.pub dengan nama file Public Key milikmu;
  • USER dengan user CPanel;
  • HOST.com dengan alamat server.

Pada proses pengirimana ini, kita akan diminta memasukan password. Silahkan masukan password CPanel.

Terakhir, cobal akses SSH Servermu dengan perintah ini:

ssh [email protected]

Silahkan ubah:

  • user dengan username CPanel;
  • host.com dengan alamat server;

Maka hasilnya akan seperti ini:

SSH ke Server

Selamat! 🎉

Kita sudah berhasil menggunakan SSH dengan menggaunakan Key.

Nanti, saat kita melakukan push ke server, kita tidak akan dimintai password lagi.

Berarti gak aman donk? karena gak masukin password…

Selama orang lain tidak punya Private Key yang ada di komputer kita, ia akan dimintai password.

Selanjutnya, agar server kita bisa mengambil (clone) repositori private dari Github, Gitlab, dan Bitbucket; maka kita harus menaruh Private Key di dalam server.

Sebenarnya caranya sama seperti yang sudah pernah kita bahas di:

Buka Public Key yang ada di lokal (~/.ssh/id_rsa.pub), kemudian taruh di akun Github, Gitlab, atau Bitbucket.

Menambahkan Public Key ke Gitlab

Setelah itu, upload Private Key ke server hosting. Ini bisa kamu lakukan melalui FTP atau File Manager di CPanel.

Upload Private Key ke Server

Setelah itu, buat file ~/.ssh/config di Server, dengan isi seperti ini:

# GitLab.com server
Host gitlab.com
IdentityFile ~/.ssh/id_rsa

# Github
Host github.com
IdentityFile ~/.ssh/id_rsa

# Bitbucket
Host bitbucket.org
IdentityFile ~/.ssh/id_rsa

Silahkan ubah id_rsa dengan nama private Key milikmu.

Contohnya:

Konfigurasi SSH untuk Github, Gitlab, dan Bitbucket

Setelah itu, coba akses server melalui SSH.

Ikuti perintah ini:

# buka server melalui SSH
ssh [email protected]

# tes SSH ke Github melaui server
ssh -T [email protected]

Jika berhasil muncul seperti ini…

SSH dari Server ke Github

…maka server kita sudah bisa terhubung dengan Github untuk melakukan clone maupun push ke repositori private.

Sampai di sini ada yang ditanyakan?

Kalau tidak, kita lanjut ke tahap deployment…

Membuat Repositori Git di CPanel

Silahkan buka CPanel, kemudian buka menu Git.

Menu Git di CPanel

Kalau tidak ada menu ini, berarti paket hosting yang kamu pilih tidak menyediakan fitur ini.

Setelah itu, silahkan klik Create untuk membuat repositori baru.

Membuat repositori Git di CPanel

Setelah itu, ada dua pilihan:

  1. Buat repositori kosong;
  2. Clone dari yang sudah ada di Github, Gitlab, mauapun Bitbucket.

Jika ukuran repositorimu terlalu besar, saya sarankan pilih yang clone saja. Karena akan lama nanti saat di-push jika kita buat yang kosong.

Anggap saja saya ingin membuat repositori yang kosong, meskipun saya sudah upload reponya di Github.

Membuat repositori kosong di cpanel

Setelah itu, kita akan mendapatkan alamat URL dari repositori ini.

Membuat repositori kosong di cpanel

Mau pilih cara yang clone, mauapun repo kosong.. Kita akan tetap mendapatkan alamat ini.

Simpan baik-baik alamat ini, karena akan kita gunakan untuk push.

Mari Kita Push!

Sebelum itu…

Silahkan buka repo lokal yang kamu miliki dengan VS Code atau Terminal. Kemudian tambahkan alamat remote untuk repositori yang di CPanel.

Sebagai contoh, ini alamat remote repo CPanel milik saya:

ssh://[email protected]:64000/home/petaniko/petanikode

Tambahkan ke repo Hugo yang di lokal dengan perintah:

git remote add hosting ssh://[email protected]:64000/home/petaniko/petanikode

Note: hosting dalah nama remote, bisa juga menggunakan origin atau nama yang lain. Angka 64000 adalah nomer port SSH yang digunakan. Nomer port ini yang harus kamu gunakan pada file config SSH.

Kemudian coba ketik perintah:

git remote -v

Jika tampil seperti ini, maka remote sudah berhasil ditambahkan.

Alamat remote untuk repositori CPanel

Setelah itu, mari kita coba push!

Silahkan ketik:

git push -u origin master

Ubah origin dengan nama remote yang kamu buat tadi. Jika menggunakan hosting, maka perintahnya:

git push -u hosting master

Tungulah sampai prosesnya selesai, maka semua file yang ada di lokal akan di-upload ke repositori yang ada di CPanel.

Setelah selesai, kamu bisa memeriksanya melalui File Manager di Cpanel.

Jika tampil seperti ini:

File manager di CPanel

Berarti kita sudah berhasil melakukan push!

Tapi kok websitenya belum ter-deploy?

Ini karena kita belum memerintahkan server untuk melakukan Deploy.

Karena itu, langkah selanjutnya dalah:

Membuat File .cpanel.yml

File .cpanel.yml adalah file dengan format YAML untuk memberitahu server apa saja perintah-perintah yang harus dikerjakan.

Perintah ini akan dieksekusi setelah kita malakukan push.

Cara kerjanya mirip seperti CI/DI, tapi tidak ada interface buat memantau log. Sehingga kurang cocok untuk disebut CI/DI.

Nah! untuk deploy Hugo, perintahnya seperti ini:

Pertama, build dulu websitenya

hugo --minify

Setelah itu, hasil buildnya dipindahkan ke public_html atau www.

cp public/* /home/username/public_html/

Bisa juga menggunakan rsync seperti ini:

rsync -az public/* /home/username/public_html/ --delete

Udah itu saja!

Terakhir, jika ingin menghemat space dan melakukan backup ke Github kita bisa tambahkan perintah ini:

rm -rf public/
git push -u origin --all

Maka kita dapat membuat file .cpanel.yml seperti ini:

---
deployment:
  tasks:
    - export DEPLOYPATH=/home/username/public_html/
    - ./bin/hugo --minify
    - rsync -az public/* $DEPLOYPATH --delete
    - rm -rf public/
    - git push -u origin --all

Silahkan ubah username dengan user CPanel milikmu.

File .cpanel.yml ini harus ditaruh di dalam root direktori pada repositori.

File .cpanel.yml

Perintah pertama adalah membuat veriabel env yang berisi alamat PATH untuk deployment.

Perintah kedua melakukan build website dengan hugo --minify. Perintah hugo memang belum ada di server. Nanti kita akan tambahkan.

Perintah ketiga melakukan copy dengan rsync. Menurut saya lebih baik menggunakan rsync daripada cp. Karena cara kerjanya lebih cerdas, ia akan meng-copy file yang sudah diubah saja. Sedangkan cp akan meng-overwrite semua file.

Terakhir, kita menghapus hasil build untuk menghemat ruang penyimpanan di server dan melakukan push ke Github.

Jika kamu mencoba melakukan push sekarang, mungkin tidak akan berhasil.

Karena perintah hugo belum ada di server.

Untuk mengatasi masalah ini, silahkan lanjutkan dengan:

Menambahkan Binary Hugo di Server

Ada tiga cara yang bisa dilakukan:

  1. Membuka server dari SSH, lalu mendownload Hugo dari sana;
  2. Menambahkan paket node js atau npm hugo-bin;
  3. Menambahkan sendiri bindary hugo di repositori.

Kamu akan pilih cara yang mana?

Kalau saya sih akan pilih cara yang ketiga, karena kalau upgrade versi bisa lebih mudah.

Tinggal tindih aja binary hugo yang ada di repo dengan yang baru.

Sementara untuk cara kedua, jika kamu sudah familiar dengan nodejs, kamu bisa pilih cara ini.

Oke…

Kita sepakati saja pilih cara yang ketiga.

Namun sebelum itu, silahkan cek arsitektur prosesor yang digunakan di servermu.

Buka melalui ssh, kemudian ketik:

uname -a

Maka akan mendapatkan yang seperti ini:

Arsitektur server

Dari informasi tersebut, kita tahu kalau server yang digunakan adalah Linux 64 bit.

Maka kita harus men-download, binary Hugo yang 64 bit. Silahkan download di https://github.com/gohugoio/hugo/releases

Mendownload binary Hugo

Setelah itu, buat folder bin di dalam repositori dan isi dengan file binary hugo.

Menambahkan binary Hugo

Selesai!

Sekarang coba commit dan lakukan push!

Melakukan push ke server

Setelah itu, coba buka CPanel. Masuk ke menu Git. Pilih repo dan klik Manage.

Manage repo git di CPanel

Lalu masuk ke menu Pull or Deploy, dan perhatikan di bagian Last Deployment Information.

Manage repo git di CPanel

Artinya, deployment berhasil!

Untuk membuktikannya, silahkan buka alamat domain yang digunakan pada hostingan tersebut.

Hasil deploy Hugo ke CPanel menggunakan Git

Apa Selanjutnya?

Selanjutnya tinggal update konten dan deploy dengan penuh semangat.

Hehehe…

Maksud saya, jika ada perubahan tinggal commit dan push saja ke server, maka akan otomatis ter-deploy.

Atau kamu bisa tambahkan notifikasi setiap kali selesai terdeploy.

Misalnya menjalankan script tertentu, untuk mengirim SMS, email, Chat via Bot, dll.

Selamat mencoba!