
Hashnode: Platform Blog untuk Developer dan Tech Writer
Hashnode adalah platform blog yang dirancang khusus bagi developer dan penulis teknologi. Dengan menggabungkan berbagai fitur modern, Hashnode memungkinkan pengguna untuk membangun blog yang tidak hanya menarik tetapi juga sangat fungsional. Dalam tutorial ini, kita akan membahas cara menggunakan Hashnode sebagai Headless CMS menggunakan repositori Hashnode/starter-kit.
Prasyarat
- Pengetahuan dasar mengenai Git dan GitHub.
- Akuntabilitas di Vercel untuk deployment.
- Pemahaman tentang Next.js dan Tailwind CSS.
- Pengalaman dengan GraphQL akan sangat membantu.
Langkah Utama
Untuk memulai, kita akan mengikuti langkah-langkah berikut untuk melakukan setup Hashnode Blog Starter Kit.
Step 1: Fork Repositori
Fork repositori Hashnode/starter-kit ke akun GitHub Anda. Ini memungkinkan Anda untuk memiliki salinan repositori yang dapat dimodifikasi.
Step 2: Buat Proyek di Vercel
Setelah Anda melakukan fork, buat proyek baru di Vercel dan sambungkan repositori yang telah Anda fork. Pilih salah satu tema dari direktori packages/blog-starter-kit/themes/ sebagai direktori root saat mengimpor.
Ketika memilih tema, Anda memiliki opsi untuk memilih antara tema
enterprise,hashnode, ataupersonal.
Step 3: Mengatur Variabel Lingkungan
Setelah berhasil mengimpor, Anda perlu mengatur beberapa variabel lingkungan berikut:
NEXT_PUBLIC_HASHNODE_GQL_ENDPOINT=https://gql.hashnode.com
NEXT_PUBLIC_HASHNODE_PUBLICATION_HOST=your_blog_hashnode_url
NEXT_PUBLIC_BASE_URL=/blog
NEXT_PUBLIC_MODE=production
Pastikan untuk mengganti your_blog_hashnode_url dengan URL Hashnode blog Anda.
Step 4: Deployment
Setelah semua konfigurasi selesai, lakukan deployment dan kunjungi domain yang dihasilkan oleh Vercel untuk memverifikasi apakah blog Anda sudah berjalan dengan baik.
Konfigurasi Lanjutan
Jika Anda ingin menginstall blog di bawah subpath dari domain kustom, ikuti langkah-langkah berikut.
Menambahkan Rewrite di Vercel
async rewrites() {
return [
{
source: "/blog",
destination: "https://your-vercel-deployment-url/blog"
},
{
source: "/blog/:path*",
destination: "https://your-vercel-deployment-url/blog/:path*"
}
]
}
Gantilah https://your-vercel-deployment-url dengan URL deployment Vercel Anda.
Best Practices
- Gunakan tema yang responsif untuk memastikan blog Anda terlihat baik di semua perangkat.
- Selalu perbarui dependensi dan library untuk menjaga keamanan dan stabilitas proyek Anda.
- Optimalkan gambar dan konten untuk kecepatan muat yang lebih baik.
- Periksa dan validasi konfigurasi GraphQL untuk menghindari masalah saat mengambil data.
Troubleshooting
Berikut adalah beberapa masalah umum yang mungkin Anda temui beserta solusinya:
- Post tidak muncul: Periksa variabel lingkungan
NEXT_PUBLIC_HASHNODE_PUBLICATION_HOSTdan pastikan URL yang Anda masukkan benar. - Error saat mengambil data dari GraphQL: Cek koneksi ke endpoint GraphQL dan pastikan tidak ada kesalahan pengetikan dalam URL.
- Blog tidak terdeploy: Pastikan semua langkah diikuti dengan benar dan periksa log kesalahan di Vercel.
Kesimpulan
Dengan mengikuti langkah-langkah di atas, Anda sekarang memiliki blog yang terintegrasi dengan Hashnode sebagai Headless CMS menggunakan GraphQL APIs. Hashnode menawarkan banyak fleksibilitas dan kemampuan untuk penulis teknologi dan developer.
Jika Anda membutuhkan jasa setup lebih lanjut atau bantuan, jangan ragu untuk menghubungi kami!
Konsultasi Jasa Setup SekarangVerifikasi Teknis
Panduan ini disusun berdasarkan referensi teknis terbaru. Namun, konfigurasi server dapat bervariasi. Lihat sumber referensi asli →