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, atau personal.

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_HOST dan 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 Sekarang