Google Sites memungkinkan kamu menggunakan domain sendiri (custom domain) agar alamat website terlihat lebih profesional, misalnya dari
sites.google.com/view/namasitus
menjadi
www.namasitus.com.

Berikut langkah-langkahnya:

1. Siapkan Domain

Pastikan kamu sudah memiliki domain aktif, Kamu juga harus memiliki akses ke DNS Manager domain tersebut.

2. Buka Google Sites

• Masuk ke akun Google.
• Buka Google Sites.
• Pilih situs yang ingin kamu hubungkan dengan custom domain.
• Klik ikon Settings () di pojok kanan atas.

3. Tambahkan Custom Domain

• Pada menu Settings, pilih bagian Custom domains.
• Klik Hubungkan domain.
• Masukkan nama domain yang ingin digunakan, misalnya: tutorialin.my.id

4. Verifikasi Kepemilikan Domain

Google akan meminta kamu menambahkan record DNS untuk memastikan bahwa domain tersebut benar milikmu.

Biasanya berupa:

• TXT Record (tergantung instruksi yang muncul)
• CNAME Record pilih yang CNAME

Salin kode CNAME DNS yang diberikan Google.

5. Setting DNS di Domain

• Setelah domani berhasil ditambahkan dipanel freedns, silahkak klik Kelola

• Klik Tambah Record, Tambahkan record sesuai data dari Google:
• Type: CNAME
• Name/Host: sesuai yang diberikan Google
• Value/Target: sesuai yang diberikan Google
• Edit cname www rubah Content ke ghs.googlehosted.com

6. Tunggu Resolve DNS 1x24jam, setelah resolve

• Kembali ke halaman Google Sites.
• Klik Verify atau Finish setup.
• Jika DNS sudah benar, Google akan mengonfirmasi bahwa domain berhasil terhubung.

Selamat mencoba, harus teliti dan sabar ya teman….

Namun, membuat aplikasi yang bagus di komputer lokal hanyalah setengah perjalanan. Tantangan sebenarnya muncul ketika kita ingin mengunggah aplikasi ke hosting. Hosting tradisional seperti cPanel atau shared hosting biasanya tidak mendukung Node.js secara native seperti server VPS. Jadi, perlu pemahaman tambahan tentang build output Next.js, struktur folder, dan cara menjalankan aplikasi di lingkungan hosting.

Di tutorial ini, kita akan membahas cara mengunggah Next.js yang sudah di-build ke hosting dengan langkah-langkah praktis dan jelas, sehingga aplikasi Anda bisa berjalan lancar di internet.

Paket yang cocok untuk Next.js

NextJS membutuhkan proses yang cukup banyak, dari pengetesan Kami rata-rata proses (dengan fork) NextJS mencapai 100 lebih. Oleh karenanya paket yang cocok untuk Next.JS adalah paket Enterprise.

Anda juga boleh melakukan trial jika sebelumnya Anda belum memiliki hosting di Domosquare, hal ini dapat memastikan aplikasi Anda dapat berjalan atau tidak tanpa khawatir bayar.

Tutorial Upload Next.js ke Hosting (Setelah Build)

Dikarenakan build nextjs memerlukan proses dan resource yang banyak, maka pastikan sebelum Anda upload ke cPanel Anda.

Buat aplikasi di Setup Node.JS

Di cpanel pada bagian Software, klik Setup Node.js App

Setelah ada di halaman Setup Node.js App, klik tombol “CREATE APPLICATION”

Setelah Anda buat Anda dapat coba test sesuai URL yang tadi Anda tentukan, jika berjalan, seharusnya Anda akan melihat tulisan:

It works!
NodeJS 22.18.0

Setelah memastikan nodejs nya berjalan, lakukan upload file project nextjs Anda di local ke folder nodejs apps yang baru saja Anda buat.

Perhatian: Jangan mengupload dengan folder node_modules nya

Setelah upload selesai, pada halaman aplikasi nodejs tadi yang Anda buat, klik tombol “Run NPM Install”, ini untuk menginstall package yang diperlukan sesuai package.json

Jika sudah selesai, selanjutnya Anda perlu mengedit file app.js pada folder aplikasi nodejs yang sudah Anda buat dengan kode berikut:

const { createServer } = require('http')
const { parse } = require('url')
const next = require('next')

const dev = process.env.NODE_ENV !== 'production'
const hostname = 'localhost'
const port = process.env.PORT || 3000
const app = next({ dev, hostname, port })
const handle = app.getRequestHandler()

app.prepare().then(() => {
  createServer(async (req, res) => {
    try {
      const parsedUrl = parse(req.url, true)
      const { pathname, query } = parsedUrl

      if (pathname === '/a') {
        await app.render(req, res, '/a', query)
      } else if (pathname === '/b') {
        await app.render(req, res, '/b', query)
      } else {
        await handle(req, res, parsedUrl)
      }
    } catch (err) {
      console.error('Error occurred handling', req.url, err)
      res.statusCode = 500
      res.end('internal server error')
    }
  }).listen(port, (err) => {
    if (err) throw err
    console.log(`> Ready on http://${hostname}:${port}`)
  })
})

Jika sudah, simpan.

Dan selanjutnya terakhir yang perlu Anda lakukan Adalah restart kembali aplikasi nodejs nya.

Coba cek kemudian sesuai URL NodeJS app yang tadi sudah Anda tentukan, seharusnya jika kompatible dengan shared hosting, maka webnya sudah bisa diakses

Perhatian: NextJS menggunakan banyak resource, dan juga banyak module yang mungkin membutuhkan hak akses atau proses yang lebih tinggi dari yang disediakan di shared hosting. Jika kondisi demikian, kami sangat menganjurkan menggunakan VPS Managed Kami. Kami akan bantu setup VPS nya free tanpa biaya hingga aplikasi Anda jalan.

1. Install Remote Explorer Extension

Silahkan install ekstensi VsCode Remote Explorer. Jika sudah maka Anda akan melihat Remote explorer pada sidebar VsCode

2. Tambahkan SSH dengan cara klik tombol + pada Remote Explorer.

Setelah klik tambah isikan command ssh pada kolom bar atas yang muncul, contoh:

ssh user@namadomainanda.com -p 2244

Dimana 2244 ini merupakan port SSH Anda.

Klik Enter, kemudian pada pilihan yang muncul, pilih file config SSH yang ingin anda gunakan:

Jika sudah, maka akan muncul informasi Host berhasil di tambahkan:

3 Melakukan koneksi ke SSH

Untuk melakukan koneksi ke SSH Anda, selanjutnya Anda dapat mengklik tombol “Connect” pada notifikasi seperti screenshoot di atas. Atau Anda dapat menggunakan list SSH yang sudah muncul pada Remote explorer

Saat pertama connect Anda akan ditanya pilihan untuk mengetahui tipe OS Remote Host yang ingin diremote:

Untuk share hosting, Anda dapat memilih linux.

Dan untuk pertama kali koneksi mungkin Anda akan menjumpai konfirmasi, Anda dapat pilih Continue:

Setelah itu Anda dapat masukkan password login ke SSH:

Jika informasi yang Anda masukkan sudah benar, selanjutnya Anda akan login dan VScode akan melakukan inisialisasi awal.

Setelah selesai, maka akan muncul list file pada window remote explorer pada sisi vscode.

Berikut adalah langkah-langkah untuk menggunakan Remote Explorer di Visual Studio Code (VS Code) untuk terhubung ke server SSH:

1. Instal VS Code dan Ekstensi Remote – SSH

1. Download dan Instal VS Code:
   • Jika belum menginstal VS Code, download dan instal dari Visual Studio Code.
2. Pasang Ekstensi Remote – SSH:
   • Buka VS Code.
   • Tekan Ctrl + P, ketik ext install ms-vscode-remote.remote-ssh, lalu tekan Enter.
   • Atau buka Extensions (ikon kotak di sidebar kiri), cari Remote – SSH, dan klik Install.

2. Konfigurasi Kunci SSH (Opsional)

Sebaiknya gunakan kunci SSH untuk otentikasi agar lebih aman. Jika Anda sudah menggunakan kunci SSH, lewati langkah ini.

1. Buat Kunci SSH:
   • Di terminal (Windows: gunakan Command Prompt atau PowerShell, Linux/Mac: terminal), jalankan: ssh-keygen -t rsa -b 4096
   • Tekan Enter untuk lokasi default (~/.ssh/id_rsa).
   • Masukkan passphrase jika ingin menambahkan kata sandi (opsional).
2. Salin Kunci Publik ke Server:
   • Jalankan perintah berikut: ssh-copy-id user@hostname Ganti user dengan nama pengguna SSH Anda dan hostname dengan alamat server (misal, example.com atau 192.168.1.1).

3. Tambahkan Konfigurasi SSH ke ~/.ssh/config

Konfigurasi ini memudahkan pengelolaan koneksi.

1. Buka file konfigurasi SSH: nano ~/.ssh/config Jika file belum ada, buat file tersebut.
2. Tambahkan konfigurasi untuk server Anda: Host myserver HostName example.com User username IdentityFile ~/.ssh/id_rsa
   • Host: Nama alias untuk koneksi.
   • HostName: Alamat server (IP atau domain).
   • User: Nama pengguna SSH Anda.
   • IdentityFile: Jalur ke kunci privat Anda (opsional jika default).
3. Simpan dan keluar (tekan Ctrl + O, lalu Ctrl + X).
4. Uji koneksi SSH untuk memastikan konfigurasi benar: ssh myserver

4. Menghubungkan VS Code ke SSH

1. Buka Remote Explorer:
   • Klik ikon Remote Explorer di sidebar kiri (ikon dengan dua monitor dan rantai).
   • Pilih Remote – SSH dari dropdown.
2. Tambahkan Host SSH:
   • Klik ikon plus (+) di sebelah SSH TARGETS.
   • Masukkan alamat server Anda dalam format berikut: ssh user@hostname Contoh: ssh myserver
   • Jika Anda menggunakan konfigurasi di ~/.ssh/config, Anda cukup mengetik myserver.
3. Pilih File Konfigurasi:
   • Saat diminta, pilih file ~/.ssh/config sebagai tempat menyimpan konfigurasi.
4. Hubungkan ke Server:
   • Klik nama server di daftar SSH TARGETS.
   • VS Code akan memulai koneksi dan meminta kata sandi SSH jika diperlukan.
5. Pilih Folder untuk Dibuka:
   • Setelah terhubung, pilih folder pada server yang ingin Anda buka.

5. Sesuaikan Pengaturan (Opsional)

1. Setel Terminal Default ke Remote:
   • Setelah terhubung, terminal akan otomatis terbuka di server. Anda bisa menjalankan perintah langsung di sana.
2. Install Dependencies di Server:
   • VS Code mungkin meminta Anda untuk menginstal server-side dependencies. Klik Install untuk melanjutkan.
3. Edit File Langsung di Server:
   • Sekarang Anda bisa mengedit file yang ada di server langsung melalui VS Code.

6. Memutuskan Koneksi

Untuk memutuskan koneksi:

• Klik ikon Remote Connection di kiri bawah (ikon komputer dengan rantai).
• Pilih Close Remote Connection.

Catatan Tambahan

• Jika server menggunakan port SSH selain default (22), tambahkan Port di konfigurasi: Host myserver HostName example.com User username Port 2222
• Jika ada masalah koneksi, periksa log di Output Panel (klik Ctrl + Shift + U).

Dengan langkah-langkah ini, Anda dapat dengan mudah terhubung ke server SSH menggunakan VS Code.

Pada tutorial ini Kita akan memandu sinkronisasi calendar webmail cpanel dengan Android menggunakan aplikasi One Calendar.

Anda dapat mencari pada play store Anda aplikasi “One Calendar”.

Setelah terinstall klik menu sebelah pojok kiri atas pada aplikasi One calendar, lalu klik menu Accounts. Lalu klik Add Account.

Pada pilihan yang muncul pilih CalDav, dan masukkan informasi email dan password serta URL Server dalam format https://[SMTP-HOST]:2080, setelah benar, klik tombol Connect

Jika data yang dimasukkan benar, maka akan muncul halaman terakhir yang berisi centang calendars, dan Anda klik Done.

Selanjutnya Anda dapat mengetest menambahkan Event baik pada webmail Anda, maupun via aplikasi One Calendar.

Pada halaman E-Mail Accounts, Anda dapat mengklik tanda tambah + pada bagian ujung email yang ingin diganti password.

Saat diklik akan muncul popup menu yang di sana terdapat link Change Password. Anda dapat klik link tersebut.

Pada kolom popup Password, Anda dapat isikan password yang baru dan klik “Save” untuk menyimpan password baru.

Silahkan login terlebih dahulu ke directadmin Anda.

Setelah masuk, pada sisi kiri klik icon User Profile,

Setelah diklik Anda akan mendapatkan form ubah password:

Anda dapat merubah dengan memasukkan password saat ini pada kolom “Current Directadmin password“, dan password baru pada kolom “New password“.

Selanjutnya klik “CHANGE PASSWORD“.

Pada kebanyakan kasus saat Anda membuat domain, Free SSL ini akan aktif dengan otomatis.

Namun terkadang untuk domain baru, atau untuk domain yang baru saja di ganti nameserver akan membutuhkan waktu resolve, sehingga aktifasi free SSL awal tidak berhasil, dan perlu dilakukan request manual.

Untuk request free SSL pada directadmin sangat mudah. Anda dapat menemukannya pada sub menu SSL Cetificates pada menu Account Manager.

Automated SSL Certificates Information

Setelah membuka halaman SSL Certificate, selanjutnya pada bagian “Automated SSL Certificates Information” pilih Manual Trigger.

Bagian ini bisa jadi tidak ada jika Anda sudah pernah request Free SSL dengan pilihan “Get automatic certificate from ACME Provider“

Jika sudah centang pada bagian Wildcard, dan klik “Trigger Retry For This Domain“.

Setelah selesai di klik, silahkan ditunggu, mungkin akan membuthkan beberapa menit untuk proses request Free SSL domainnya.

Seharusnya dalam beberapa menit domain Anda sudah aktif SSL nya dan dapat diakses via https://.

Jika dalam 30 menit masih belum bisa, silahkan dicoba kembali. Verifikasi free SSL menggunakan DNS, sehingga jika dari vendor SSL belum resolve ke IP yang seharusnya akibat misal domainnya baru dan belum resolve, atau baru saja melakukan penggantian NS maka perlu ditunggu beberapa waktu.

Get automatic certificate from ACME Provider

Pada bagian ini, Anda dapat mengganti provider Free SSL nya, misal dari Letencrypt (default) menjadi ZeroSSL misalkan. Kondisi ini bisa saja terjadi misal Anda ingin mencoba mengganti provider SSL karena default Letencrypt nya belum resolve ke domain baru anda.

Pada common name ada pilihan wildcard yang dapat Anda manfaatkan jika ingin meng-cover domain dan semua subdomain berkenaan. Namun jika tidak dibutuhkan kami sarankan cukup domain utama saja dan subdomain www untuk di aktifkan, agar mempercepat aktifasi.

Selain itu, fitur ini juga berguna jika domainnya menggunakan provider DNS terpisah yang dapat di pilih pada menu DNS Provider (jika tidak ada berarti tidak support). Jika provider DNS external nya terdapat pada pilihan, Anda dapat pilih dan isikan data API yang di request.

Jika sudah selesai setting nya, Anda dapat klik save untuk memulai request.

Dan silahkan ditunggu 30 menit untuk memastikan semua proses sudah selesai. Dan sembari mencoba akses domainnya dengan https://

Antarmuka Pengguna:

• cPanel:
  • Antarmuka cPanel memiliki tata letak yang berfokus pada ikon-ikon untuk memudahkan navigasi.
  • Menu utama cPanel terbagi menjadi sejumlah kategori seperti Files, Databases, Email, dan lainnya.
• DirectAdmin:
  • DirectAdmin memiliki antarmuka yang lebih sederhana dengan opsi menu utama di bagian atas layar.
  • Menu DirectAdmin terorganisir dengan rapi di sepanjang bagian atas layar.

Manajemen File:

• cPanel:
  • File Manager pada cPanel memungkinkan pengguna untuk mengelola file secara langsung dari antarmuka web.
  • Fitur pencarian, pengarsipan, dan pengunggahan file yang nyaman.
• DirectAdmin:
  • File Manager di DirectAdmin juga memungkinkan pengelolaan file dengan mudah, termasuk fungsi pencarian dan pengarsipan.
  • Antarmuka sederhana untuk mempermudah navigasi.

Manajemen Database:

• cPanel:
  • cPanel menyediakan alat manajemen database seperti phpMyAdmin untuk database server.
  • Pembuatan database, pengguna, dan hak akses dilakukan melalui antarmuka yang nyaman.
• DirectAdmin:
  • DirectAdmin juga menyediakan phpMyadmin untuk mengelola database server.
  • Pengelolaan database dan pengguna dapat diakses dengan mudah melalui menu Database.

Manajemen Email:

• cPanel:
  • cPanel menyediakan antarmuka yang jelas untuk manajemen email dengan opsi seperti pembuatan akun email, pengalihan, dan filter spam.
• DirectAdmin:
  • DirectAdmin memiliki modul Email Management yang memfasilitasi pembuatan dan pengelolaan akun email. Directadmin juga memiliki fitur forward dan juga spam filter.

Instalasi Aplikasi:

• cPanel:
  • cPanel memiliki opsi Softaculous untuk instalasi aplikasi web populer dengan beberapa klik.
• DirectAdmin:
  • DirectAdmin juga menyediakan opsi Softaculous untuk memudahkan instalasi aplikasi.

Software Yang digunakan:

• cPanel:
  • cPanel menggunakan Apache webserver atau Litespeed, Exim Mail server, MariaDB/Mysql untuk database sevrer dan juga menggunakan Cloudlinux & Imunify360 untuk keamanan server.
• DirectAdmin:
  • DirectAdmin juga menggunakan Apache webserver atau litespeed, exim sebagai mail server, MariaDB/Mysql untuk database sevrer dan juga menggunakan Cloudlinux & Imunify360 untuk mengamankan server.

Dengan samanya software yang digunakan, dapat di simpulkan performanya sama persis, karena kontrol panel tidak berkaitan denagn performa server.

Kesimpulan:

Meskipun terdapat perbedaan dalam tata letak dan presentasi, baik cPanel maupun DirectAdmin memiliki kemampuan dasar yang sama untuk mengelola server web dan situs. Pengguna yang terbiasa dengan satu panel kontrol seharusnya dapat dengan mudah beradaptasi dengan yang lain. Pilihan antara cPanel dan DirectAdmin lebih bergantung pada preferensi pribadi dan kebutuhan spesifik pengguna.

Dengan menggunakan tutorial ini, diharapkan pengguna dapat memahami bahwa meskipun terdapat perbedaan antara DirectAdmin dan cPanel, keduanya memiliki kemiripan yang signifikan dalam fungsi dasar dan tujuan utama.

Namun paling banyak adalah karena saat diupload belum disesuaikan path di index.php terhadap folder laravel nya.

Saat error 500, dapat dilihat alasan error nya pada file error_log.

Contoh:

[21-Nov-2023 00:16:57 UTC] PHP Fatal error: require(): Failed opening required '/home2/xyz/domain/public/vendor/autoload.php' (include_path='.:/opt/cpanel/ea-php74/root/usr/share/pear') in /home2/xyz/domain/public/index.php on line 34

Terlihat pada error perlu disesuaikan alamat autoload.php agar sesuai dengan lokasi pada folder laravel sebenarnya.

Untuk mengatasinya silahkan buka file index.php dan sesuaikan semua path pada file php yang di include pada index.php.

Contoh file public dari laravel ada di public_html, dan folder laravel ada di folder laravel di home, sehingga settingannya menjadi seperti:

'/../storage/framework/maintenance.php'

menjadi

'/../laravel/storage/framework/maintenance.php'

Kemudian

'/../vendor/autoload.php'

menjadi

'/../laravel/vendor/autoload.php'

dan

'/../bootstrap/app.php'

menjadi

'/../laravel/bootstrap/app.php'

Jika sudah benar kemudian di save, dan dicoba kembali

Jika struktur folder laravel dan posisi index.php nya berbeda, cukup menyesuaikan sesuai struktur yang dimiliki.