DEV Community: Awan

Cara Menghubungkan VPS ke GitHub via SSH: Solusi Bebas Ribet Masukkan Password

Awan — Sun, 28 Jun 2026 16:18:01 +0000

Sebagai developer, mengelola kode di VPS untuk proses deployment aplikasi web atau mengatur infrastruktur self-hosted tentu sudah menjadi makanan sehari-hari. Namun, ada satu hal yang sering bikin repot: sejak GitHub menghapus dukungan otentikasi password untuk Git, kita diwajibkan menggunakan Personal Access Token (PAT) saat menggunakan URL HTTPS. Memasukkan token panjang berulang kali saat melakukan git pull atau git clone tentu sangat tidak efisien.

Solusi terbaik untuk masalah ini adalah dengan menggunakan SSH Key.

Metode otentikasi menggunakan SSH tidak hanya jauh lebih aman, tetapi juga membuat komunikasi antara VPS dan GitHub berjalan mulus tanpa perlu lagi memasukkan username atau token. Cara ini juga sangat direkomendasikan jika Anda ingin mengatur auto-deployment di server.

Berikut adalah langkah-langkah praktis menghubungkan VPS Anda ke GitHub menggunakan SSH.

Membuat SSH Key Baru di VPS Langkah pertama adalah membuat pasangan kunci (Private dan Public key) di dalam VPS Anda. Masuk ke VPS Anda melalui terminal, lalu jalankan perintah berikut:

Bash
ssh-keygen -t ed25519 -C "email_github_anda@example.com"
Catatan: Pastikan Anda mengganti bagian email dengan email yang terdaftar di akun GitHub Anda. Algoritma ed25519 digunakan karena terbukti lebih aman dan memproses data lebih cepat dibandingkan RSA standar.

Sistem akan menanyakan lokasi penyimpanan file (tekan Enter untuk menggunakan lokasi bawaan) dan meminta passphrase atau kata sandi. Jika Anda ingin Git berjalan sepenuhnya otomatis tanpa hambatan prompt password, Anda bisa mengosongkan passphrase dengan menekan Enter dua kali.

Mendaftarkan Key ke SSH-Agent Agar VPS selalu mengingat kunci yang baru saja dibuat, kita perlu menghidupkan ssh-agent dan mendaftarkan private key tersebut ke dalamnya. Jalankan dua baris perintah ini:

Bash
eval "$(ssh-agent -s)"
ssh-add ~/.ssh/id_ed25519
Jika berhasil, terminal akan memunculkan pesan Identity added.

Menambahkan Public Key ke Akun GitHub Sekarang, kita harus memberi tahu GitHub tentang kunci yang ada di VPS. Kita perlu mengambil isi dari public key dengan perintah:

Bash
cat ~/.ssh/id_ed25519.pub
Terminal akan menampilkan deretan teks yang cukup panjang (dimulai dengan ssh-ed25519). Blok dan salin seluruh teks tersebut.

Selanjutnya, buka akun GitHub Anda di browser komputer lokal:

Masuk ke Settings (melalui foto profil di pojok kanan atas).

Pilih menu SSH and GPG keys di bilah kiri.

Klik tombol hijau New SSH key.

Beri judul bebas (misal: "VPS Project A") dan tempel (paste) teks yang sudah Anda salin tadi ke kolom Key.

Klik Add SSH key.

Menguji Koneksi GitHub Untuk memastikan VPS dan GitHub sudah terhubung dengan benar, kembali ke terminal VPS Anda dan jalankan perintah uji coba berikut:

Bash
ssh -T git@github.com
Jika ini adalah pertama kalinya Anda menghubungkan VPS ke GitHub, akan muncul peringatan authenticity of host. Ketik yes lalu tekan Enter.

Apabila berhasil, Anda akan disambut dengan pesan:

"Hi Username! You've successfully authenticated, but GitHub does not provide shell access."

Clone Repository Menggunakan URL SSH Selesai! Kini VPS Anda sudah sepenuhnya dipercaya oleh GitHub. Anda bisa mulai mengunduh repository tanpa perlu repot memikirkan akses token lagi.

Pastikan saat melakukan clone, Anda memilih opsi URL SSH (bukan HTTPS) seperti ini:

Bash
git clone git@github.com:UsernameAnda/NamaRepository.git
Jika Anda sudah telanjur menggunakan HTTPS sebelumnya, cukup ubah remote URL-nya dengan perintah:
git remote set-url origin git@github.com:UsernameAnda/NamaRepository.git

Dengan menerapkan konfigurasi SSH ini, alur kerja di VPS Anda akan menjadi jauh lebih cepat dan rapi. Selamat mencoba dan selamat membangun kode!

Cara mengganti icon app di Flutter

Awan — Wed, 17 Jun 2026 18:33:34 +0000

Ada dua cara untuk mengganti icon app:

Cara 1: Pakai flutter_launcher_icons (Otomatis Direkomendasikan)

Siapkan file icon (1 gambar PNG minimal 1024×1024px, simpan misalnya di assets/icon.png)
Tambahkan package ke pubspec.yaml:

dev_dependencies:
  flutter_launcher_icons: ^0.14.3

flutter_launcher_icons:
  android: true
  ios: true
  image_path: "assets/icon.png"

Jalankan:

flutter pub get

flutter pub run flutter_launcher_icons

Selesai, icon otomatis ter-generate untuk semua ukuran.

Cara 2: Manual (Tanpa Package)

Ganti file PNG di 5 folder ini, harus sesuai ukuran:

Folder Ukuran

android/app/src/main/res/mipmap-mdpi/ 48×48 px
android/app/src/main/res/mipmap-hdpi/ 72×72 px
android/app/src/main/res/mipmap-xhdpi/ 96×96 px
android/app/src/main/res/mipmap-xxhdpi/ 144×144 px
android/app/src/main/res/mipmap-xxxhdpi/ 192×192 px

Nama file harus tetap ic_launcher.png.

No connection could be made because the target machine actively refused it.

Awan — Tue, 21 Jan 2025 01:52:55 +0000

[Nest] 2320  - 21/01/2025, 08.51.19   ERROR [ExceptionHandler] tonic::transport::Error(Transport, ConnectError(ConnectError("tcp connect error", Os { code: 10061, kind: ConnectionRefused, message: "No connection could be made because the target machine actively refused it." })))

TransportError: tonic::transport::Error(Transport, ConnectError(ConnectError("tcp connect error", Os { code: 10061, kind: ConnectionRefused, message: "No connection could be made because the target machine actively refused it." })))
    at Function.connect (D:\Web\OSP-Web-NodeJS\node_modules\@temporalio\worker\src\connection.ts:52:15)
    at InstanceWrapper.useFactory [as metatype] (D:\Web\OSP-Web-NodeJS\apps\discount-approval-worker\src\app\worker\discount-worker.provider.ts:83:26)
    at Injector.instantiateClass (D:\Web\OSP-Web-NodeJS\node_modules\@nestjs\core\injector\injector.js:369:37)
    at callback (D:\Web\OSP-Web-NodeJS\node_modules\@nestjs\core\injector\injector.js:65:34)
    at Injector.resolveConstructorParams (D:\Web\OSP-Web-NodeJS\node_modules\@nestjs\core\injector\injector.js:144:24)
    at Injector.loadInstance (D:\Web\OSP-Web-NodeJS\node_modules\@nestjs\core\injector\injector.js:70:13)
    at Injector.loadProvider (D:\Web\OSP-Web-NodeJS\node_modules\@nestjs\core\injector\injector.js:97:9)
    at D:\Web\OSP-Web-NodeJS\node_modules\@nestjs\core\injector\instance-loader.js:56:13
    at async Promise.all (index 4)
    at InstanceLoader.createInstancesOfProviders (D:\Web\OSP-Web-NodeJS\node_modules\@nestjs\core\injector\instance-loader.js:55:9)

Karena temporal server nya belum running

MySQL ONLY_FULL_GROUP_BY

Awan — Tue, 10 Dec 2024 10:53:27 +0000

Mengaktifkan

SET sql_mode = 'ONLY_FULL_GROUP_BY';

Menonaktifkan

SET GLOBAL sql_mode=(SELECT REPLACE(@@sql_mode,'ONLY_FULL_GROUP_BY',''));

SET PERSIST sql_mode=(SELECT REPLACE(@@sql_mode,'ONLY_FULL_GROUP_BY',''));

Laravel 11: Allowed memory size of 134217728 bytes exhausted (tried to allocate 23085056 bytes)

Awan — Mon, 25 Nov 2024 02:39:12 +0000

Laravel error Allowed memory size of 134217728 bytes exhausted (tried to allocate 23085056 bytes)

Jika error ini berarti memori yang tersedia kecil tetapi data yang ingin disimpan di memori besar. Bisa dicoba dengan menambahkan memori di php.ini

dari
memory_limit = 128M

ke
memory_limit = 512M

Bagaimana cara memindahkan branch utama git dari master menjadi main

Awan — Tue, 11 Jun 2024 00:55:09 +0000

Pada saat menginstall git kita akan memilih branch mana yang menjadi branch utama apakah ingin menggunakan master atau main, tapi kita salah memilih branch utamanya dan kita perlu mengatur ulangnya. Karena beberapa repository seperti github sudah merubah branch utamanya dari master menjadi main.

Lalu bagaimana cara mengatur ulang branch utama pada git yaitu dengan mengetikan perintah

git config --global init.defaultBranch main

Cara memperbaiki commit git yang terlanjur commited

Awan — Wed, 27 Mar 2024 01:57:02 +0000

error: remote unpack failed: error VS403702: The push was rejected because one or more commits contain author email '1878631-awanz@users.noreply.gitlab.com' which does not match the policy-specified patterns.

Pertama ubah dulu email di config
git config user.email yournewemail@example.org

Lalu bisa melakukan reset author dengan memilih command dibawah

git commit --amend --reset-author

git commit --amend --reset-author --no-edit

3 Cara mengetahui versi Laravel

Awan — Thu, 14 Mar 2024 10:28:34 +0000

Pada tulisan kali ini, saya akan berbagi cara untuk mengetahui versi laravel kalian, disini saya memiliki 3 metode untuk mengetahui versi laravel

(1). Cara mengetahui versi laravel menggunakan command prompt
php artisan --version

(2). Cara mengetahui versi laravel dengan check file composer.json
Buka project kawan-kawan lalu buka file composer.json di root folder project, dan lihat di line bagian "laravel/framework": "^10.10"

(3). Cara mengetahui versi laravel dengan cek file Application.php di folder vendor
Masuk kedalam folder vendor\laravel\framework\src\Illuminate\Foundation\Application.php Didalam file tersebut lihat bagian baris const VERSION = '10.48.2';

Install TailwindCSS di Vue 3

Awan — Mon, 29 Aug 2022 00:06:38 +0000

Pertama install tailwind dengan dependensi-nya dengan perintah berikut.

npm install -D tailwindcss postcss autoprefixer

2.Lalu buat file confignya dengan perintah berikut

npx tailwindcss init -p

3.Lalu lakukan config tailwind sebagai berikut di file tailwind.config.js
Ubah

content: [],

Menjadi

content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],

4.Buatlah sebuah file src/assets/css/tailwind.css lalu isikan sebagai berikut

@tailwind base;
@tailwind components;
@tailwind utilities;

5.Import tailwind.css di file main.js dengan code berikut

import '@/assets/css/tailwind.css';

6.Buka file App.vue dan ubah semua isinya dengan code berikut

<template>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</template>

<script>

export default {
  name: 'App',
}
</script>

7.Jalankan perintah berikut

npm run serve

8.Lalu buka di browser, maka hasilnya seperti berikut

Cara Install VueJS 3 menggunakan Vue CLI

Awan — Sun, 28 Aug 2022 23:10:00 +0000

Pertama ketikan perintah vue create sebagai berikut

vue create vue3

vue3 adalah nama folder nya, kalian bisa ubah sesuai dengan yang diinginkan.

Pilih versi VueJS nya, karena ingin menginstall VueJS 3 maka pilih Vue 3.
Tunggu beberapa saat untuk proses Installasinya.
Proses Installasi selesai.
Masuk ke folder vue3 dengan perintah

cd vue3

6.Jalankan aplikasi dengan perintah

npm run serve

7.Buka aplikasi di browser dengan alamat http://localhost:8080
8.Aplikasi berhasil dijalankan.

Cara Install VueJS 3

Awan — Sun, 28 Aug 2022 10:40:00 +0000

VueJS merupakan sebuah framework javascript untuk membangun web user interfaces.

Hal yang dibutuhkan sebelum install VUEJS

NodeJS
NPM

1.Pertama Buka Terminal atau CMD lalu ketikan perintah install vuejs menggunakan npm sebagai berikut

npm init vue@latest

2.Beri nama project dan pilih no atau yes sesuai kebutuhan yang kalian inginkan, disini saya memberi nama project vue3 dan no pada setiap step.

3.Masuk ke folder project kita dengan perintah

cd vue3

4.Ketikan perintah berikut untuk menginstall package / library yang dibutuhkan

npm install

5.Setelah semua package terinstall, lalu jalankan aplikasi dengan perintah

npm run dev

Aplikasi bisa diakses di browser di http://localhost:5173/

Cara menggunakan Environment Variables di NextJS

Awan — Tue, 08 Mar 2022 02:00:43 +0000

Pertama-tama buat lah sebuah file di root project dengan nama .env

MY_NAME=AWAN;

Setelah itu kita bisa memanggil environment variable di codingan dengan cara

const name = process.env.MY_NAME;
console.log(name);

Dan hasilnya akan keluar seperti ini

Cara diatas hanya akan bisa diakses oleh V8 atau nodejs nya saja, ketika kita ingin akses variable tersebut di browser akan undefined seperti ini

Oleh karna itu, ada cara lain dalam mendefine environment variable yang dibutuhkan supaya browser juga bisa membacanya dengan cara menambahkan NEXT_PUBLIC_ atau seperti ini

NEXT_PUBLIC_MY_NAME=AWAN PUBLIC

Cara memanggil environment variable di codingan sama aja seperti ini

const name_public = process.env.NEXT_PUBLIC_MY_NAME;
console.log(name_public);

Dan hasilnya akan keluar seperti ini

Ketika dilihat di browser akan seperti ini

Dalam penggunaan environment variables terkadang ada data private yang browser tidak boleh tau sehingga kita bisa menggunakan metode pertama dalam define variable dan ada kalanya kita butuh data yang browser harus tau dengan cara metode 2.

Untuk contoh projectnya saya sudah upload di github: https://github.com/awanz/nextjs-env