7 Langkah dan Cara Hosting Hugo Static App
Woi, yang suka pake Hugo statis! Udah pada tahu belum, ada cara hosting Hugo Static app? Nah, di artikel ini, ane bakal kasih tahu ente cara hosting Hugo Static app dengan langkah-langkah yang gampang banget. Nggak perlu pusing-pusing lagi, deh!
Apa Sih Static App Itu?
Sebelum bahas cara hosting Hugo Static app yang keren banget, kenalin dulu apa sih Static app itu. Jadi, Static app itu adalah platform hosting yang mirip-mirip sama Netlify, GitHub, dan Cloudflare Pages. Bedanya, Static app ini lebih ngebuat hidup ente makin seru karena nyediain kemudahan dan akses gratis!
Kalo ente orang yang pengen efisiensi dan praktis, Static app tuh solusi yang pas banget buat ente. Platform ini bisa nyederin proses hosting dan pengelolaan web Hugo dengan cepat, jadi ente bisa nge-publish dan update kontennya dengan mudah!
Langkah hosting Hugo Static App
Nah, sekarang masuk ke inti artikel ini. langkah-langkah hosting Hugo Static app itu bisa dibilang lebih mudah kalo dibanding hosting hugo pada cloudflare pages. Langsung aja, ane kasih tahu langkah-langkahnya yang simpel abis. Siap-siap ya!
Langkah 1: Membuat Akun Static App
Pertama-tama, ente harus bikin akun di platform Static app. Langsung aja kunjungi website Static App dan ikutin proses pendaftarannya yang gampang banget. Setelah bikin akun, ente bakal punya akses ke dashboard pengguna yang seru!
Langkah 2: Persiapan Proyek Hugo
Sebelum mulai hosting Hugo Static app, ane mau ngingetin ente, nih: ane pake tema Paper dalam contoh ini. Pastiin ente udah instal Hugo di komputer dan udah siapin proyek Hugo. Atur tema dan struktur kontennya dengan baik, jangan lupa isi kontennya sesuai kebutuhan.
Kalo ente masih bingung atau butuh panduan buat bikin proyek Hugo, coba deh baca artikel ane tentang Cara Membuat Blog Hugo yang seru abis!
Langkah 3: Konfigurasi Hugo untuk Static App
Setelah proyek Hugo siap, pastiin ngupdate konfigurasi Hugo buat nyambungin dengan URL dan pengaturan yang bener buat pengelolaan kontennya. Ada beberapa konfigurasi yang perlu ente lakuin.
Proses hosting Hugo Static app ini pada tahapan konfigurasi di file config.toml gampang banget, gak pake ribet. Ente tinggal sesuaiin aja parameter-parameter ini dengan pengaturan yang dipake di Static app.
Buka file config.toml pake editor kode favorit, trus masukin kode-kode keren berikut:
baseURL = "https://tuklik.static.app/" author = "Tukik" languageCode = "id-idn" title = "Tuklik Adalah Ndondeng" theme = "paper" enableRobotsTXT = true
Gampang banget, kan? Parameter-parameter itu nanti bisa disesuaikan dengan kebutuhan. Jadi, bisa pake custom sub-domain yang ente pengenin buat website.
Penjelasannya sederhana, nih:
- BaseURL: Sub-domain kustom yang bakal dipake buat publikasi website ente nanti.
- Author: Nama penulis konten, tulis nama ente yang keren abis!
- LanguageCode: Ini disesuaikan dengan bahasa yang dipake buat konten blog. Misalnya, kalo ente pake bahasa Indonesia, tulis “id-idn”. Kalo kontennya bahasa Inggris, bisa diubah jadi “en-us”. Jadi, diatur sesuai kode bahasa yang ente mau.Dukungan kode bahasa
- Title: Judul artikel yang ente bikin.
- Theme: Sesuaikan dengan tema yang dipake.
- enableRobotsTXT: Biarin aja true, jadi Google bisa crawler dan index situs dengan lancar.
Parameter-parameter ini udah cukup buat hosting Hugo Static app. Kalo mau belajar lebih detail atau mau konfigurasi yang lebih kompleks, bisa baca documentation dari theme yang dipake atau documentation resmi Hugo.
Baca Juga: Mengenal Directory Structure Hugo Sebelum Membangun Situs
Langkah 4: Indexing dan Memasukan Kode Iklan
Langkah ini sebenernya opsional, tergantung kebutuhan buat hosting Hugo Static app. Kalo cuma buat testing hasilnya, bisa skip langkah ini. Tapi kalo emang mau nyari penghasilan, perlu masukin kode buat indexing dan iklan. Nah, ini langkah-langkahnya:
Ada 2 cara buat masukin kode indexing dan iklan, tergantung ente pake OS Windows, Linux, atau Macintosh. Bisa langsung masukin kode lewat folder atau lewat terminal.
Melalui Folder Langsung
Pertama, masukin ke folder proyek Hugo, terus cari file dengan format “head.html”. Nah, buka file head.html ini pake editor kode favorit.
Project Hugo -> Themes - nama themes -> Layouts -> Partials -> Head.html
Terus masukin kode-kode keren di antara tag <head> dan </head>. Simpen perubahannya, selesai!
Terminal atau Commond Prompt
Cara kerjanya sama persis kayak sebelumnya, cuma bedanya ini ente pake terminal. Jadi, masukin dulu ke folder proyek Hugo, terus cari file head.html di path ini:
cd Folder-penyimpan-hugo/nama-proyek/themes/nama-thema/layouts/partials nano head.html
Trus, buka file head.html pake editor kode kayak Nano, terus masukin kode-kode. Simpen perubahannya dengan menekan tombol CTRL+X, trus tekan Enter. Selesai!
Catatan: Secara umum, ini bisa relevan atau nggak tergantung dari tema yang dipake atau pengembang tema. Tapi biasanya, struktur Hugo ini nggak jauh beda kok.
Langkah 5: Deploy Hugo
Setelah lewatin langkah-langkah hosting Hugo Static app dan masukin kode indexing sama iklan (kalo ada), sekarang saatnya deploy situs Hugo. Tinggal ketik perintah ini:
Buat ngecek hasilnya dulu sebelum publikasi
Hugo serve atau hugo server
Terus, buka browser, buka alamat localhost:1313 atau sesuai port yang diatur. Tapi kalo males ngecek langsung dan pengen langsung publish hasilnya, ente bisa langsung ketik perintah ini:
hugo
Tunggu sampe proses build Hugo selesai, deh!
Baca Juga: Cara Hosting Hugo Cloudflare Pages
Langkah 6: Mengubah Menjadi Format ZIP
Kalo proses deploy udah selesai, di proyek Hugo ente bakal muncul folder baru namanya “Public”. Nah, tugas selanjutnya adalah ngubah folder ini jadi format ZIP.
Langkah 7: Mengupload Proyek Hugo ke Static App
Sekarang saatnya upload proyek Hugo ente ke Static app. Di dashboard Static app, bakal nemuin opsi buat upload situs web. Pilih file ZIP proyek Hugo, terus upload ke Static app. Tunggu sampe proses upload selesai, deh!
Klik New Website -> Kemudian Unggah File Public.zip
Custom Domain Static App
Pas hosting Hugo Static app, ente punya 2 pilihan buat kasih nama domain buat website Hugo. Bisa pake domain pribadi yang udah punya atau sub-domain gratis yang udah disediain sama Static app. Ini langkah-langkahnya:
Sub-domain Gratis
Hosting Hugo Static app juga nyediain sub-domain gratis yang bisa custom sesuai keinginan. Bukan cuma netlify, github, sama Cloudflare Pages aja yang bisa!
Sub-domain gratis ini bisa ente sesuaiin sama pengaturan di config.toml (di langkah 3) biar pas diakses nggak ada masalah.
Domain Personal atau Khusus
Kalo ente pengen ngatur domain pribadi, caranya agak beda dikit dari sub-domain. Tapi santai aja, gampang kok. Ini caranya:
Di laman yang sama, sebelum ente hubungin domain pribadi, pastiin udah bikin catatan A-record atau TXT-Record verification di platform DNS favorit, kayak Cloudflare misalnya.
Terus, kalo catatan A-record-nya udah dibikin, langsung aja masukin alamat domain di kolom “Domain Name”. Jangan lupa klik “Test Domain” buat ngecek kalo domain udah terhubung dengan bener. Terakhir, simpen perubahannya.
Kesimpulan
Gimana, udah pada paham kan langkah-langkah hosting Hugo Static app yang seru abis ini? Dengan 7 langkah dan cara yang ane kasih, ente bisa ngatur situs Hugo dengan mudah dan seru, tanpa ribet konfigurasi yang kompleks.
Jadi, buat pengembang web atau blogger yang pake Hugo statis, Static app tuh pilihan yang tepat buat hosting Hugo secara gratis. Makin seru dan praktis, deh!
Nah, itu dia artikel ane tentang 7 langkah dan cara hosting Hugo Static app yang bikin hidup makin seru! Semoga bermanfaat, ya!
