stablo

Stablo Blog Template - Next.js & Sanity CMS

Stablo adalah template blog Jamstack yang dibangun dengan Next.js, Tailwind CSS & Sanity CMS oleh Web3Templates. Muncul dengan versi gratis & pro.

Instalasi ↓

Demo langsung

Demo Versi Gratis →

Demo Versi Pro →

Fitur

Fitur	Versi gratis	Versi Pro
Next.js v13	✅	✅
/Direktori Aplikasi	✅	✅
Tailwind CSS	✅	✅
Sanity CMS (V3)	✅	✅
Revalidasi sesuai permintaan		✅
Memperbarui pos baru secara otomatis	Berbasis waktu	✅
Responsif seluler	✅	✅
Mode gelap & terang	✅	✅
Halaman kontak yang berfungsi	✅	✅
Arsip (pagination)	✅	✅
Halaman kategori		✅
Halaman Penulis		✅
Halaman pencarian		✅
Beranda - Default	✅	✅
Beranda - Alternatif		✅
Beranda - Minimal		✅
Beranda - Lifestlye		✅
Beranda - dua kolom		✅
Posting Blog - Default	✅	✅
Posting Blog - Minimal		✅
Posting Blog - Lifestlye		✅
Posting Blog - dengan bilah sisi		✅
Dukungan 6 bulan		✅
Pembaruan gratis	✅	✅
Lisensi	Gpl-2.0	Komersial
Harga	Bebas	$ 49
	Diseret secara gratis	Beli Pro

Klik tombol di atas untuk klon satu klik & penyebaran untuk template ini. Baca Panduan Mulai Cepat di bawah ini.

Pratinjau template

Pratinjau Sanity CMS

Instalasi

Langkah 1: Menyebarkan ke Vercel

Gunakan tombol Deploy di bawah ini. Ini akan memungkinkan Anda menggunakan starter menggunakan Vercel serta menghubungkannya ke studio kewarasan Anda menggunakan integrasi Sanity Vercel.

Penyebaran di atas akan secara otomatis mengonfigurasi yang berikut:

• Buat repositori baru di github
• Buat proyek kewarasan
• Instal Sanity Integration di Vercel
• Tambahkan pengaturan CORS & API yang diperlukan dalam proyek
• Menyebarkan Frontend ke Vercel

Atau, Anda dapat menggunakan layanan lain seperti halaman Netlify atau CloudFlare atau AWS Amplify.

Langkah 2: Siapkan proyek secara lokal.

Setelah Anda menggunakan situs web, itu akan terlihat seperti kosong atau tidak dikonfigurasi dengan benar. Ini diharapkan. Kita perlu melakukan beberapa langkah lagi untuk membuatnya seperti yang terlihat pada demo.

Pertama, klon Vercel repositori GitHub yang dibuat ke dalam mesin lokal Anda. Gunakan struktur perintah berikut. Pastikan terminal ada di folder yang tepat sebelum menjalankan perintah ini.

git clone https://github.com/ < usename > / < repo > .git your-project-name

Setelah dikloning, jalankan perintah berikut dari direktori root proyek. Ini akan menautkan proyek Vercel Anda.

npx vercel link

Sekarang, jalankan perintah berikut untuk menarik variabel .env ke sistem lokal Anda.

npx vercel env pull

Sekarang Anda dapat melihat bahwa file .env.local baru telah dibuat. Jika ini tidak berhasil, Anda juga dapat mengganti nama .env.local.example menjadi .env.local dan menambahkan ID proyek kewarasan secara manual.

Sekarang, Anda dapat membuka editor kode Anda (jika belum) kami lebih suka vscode. Jalankan perintah di terminal terintegrasi di dalam editor kode.

npm install
# or
yarn install
# or
pnpm install

Kami lebih suka pnpm untuk menyimpan ruang disk Anda.

Langkah 3: Impor Data Demo (Opsional)

Untuk terlihat seperti apa yang telah Anda lihat di demo, dengan semua konten dan gambar, ikuti langkah -langkah di bawah ini:

1. Jika Anda belum menginstal @sanity/cli menginstalnya secara global terlebih dahulu.

npm install -g @sanity/cli
# or
pnpm install -g @sanity/cli

Kemudian login ke kewarasan menggunakan perintah sanity login

 sanity login

Sekarang, Anda akan dapat mengimpor konten demo dengan menjalankan perintah sanity-import . File -file tersebut terletak di /lib/sanity/data/production.tar.gz dan akan memuat secara otomatis dengan menjalankan perintah di bawah ini.

npm run sanity-import
# or
pnpm sanity-import

Langkah 4: Selesaikan!

Sekarang, jalankan proyek Anda menggunakan perintah di bawah ini.

npm run dev
# or
pnpm dev

Sekarang proyek Anda harus naik dan frontend berikutnya.js akan berjalan di http: // localhost: 3000.

Sanity Studio dapat diakses menggunakan http: // localhost: 3000/studio atau Anda dapat menjalankannya pada https: // localhost: 3333 server yang terpisah menggunakan perintah berikut.

npm run sanity
# or
pnpm sanity

Langkah 5. Redaman

Setelah semua perubahan di atas dibuat, pastikan untuk menggunakan kembali ke Vercel sekali lagi untuk melihat semua perubahan Anda dalam produksi.

Anda dapat git push perubahan dan itu harus secara otomatis memicu penyebaran baru. Jika tidak, Anda juga dapat menggunakan Vercel menggunakan perintah berikut.

 npx vercel --prod

Instalasi Manual

Kami menyarankan Anda untuk menggunakan opsi One-Click Deploy di atas. Untuk beberapa alasan, jika Anda tidak bisa, gunakan langkah -langkah berikut untuk menginstalnya secara manual.

Langkah 1. Kloning repo

Klon repo github atau gunakan file yang diunduh di mesin lokal Anda.

Langkah 2. Pengaturan .env Variabel.

Buka folder proyek dan ganti nama .env.local.example ditempatkan di folder root ke .env.local dan tambahkan ID proyek kewarasan Anda. Anda dapat membuat proyek baru dengan mengunjungi tautan ini: https://www.sanity.io/get-started/create-project

Jika Anda sudah memiliki proyek, salin ID proyek dari https://sanity.io/Manage

 NEXT_PUBLIC_SANITY_PROJECT_ID=xxyyzz

Langkah 3. Izinkan CORS Origins

Untuk membuat studio berfungsi dengan baik, Anda harus menambahkan CORS Origin in Sanity. Ini biasanya diatur secara otomatis jika Anda menggunakan Vercel Deploy. Kunjungi https://www.sanity.io/manage/personal/project/<project-id>/api di browser Anda untuk menambahkan asal CORS.

Klik Add CORS origin dan masukkan URL sebagai http://localhost:3000 dan centang kotak centang Izinkan Kredensial.

Langkah 4 Lanjutkan dari langkah -langkah di atas

Sekarang, Anda akan dapat melanjutkan dari instruksi di atas untuk mengimpor data demo dan menjalankan proyek secara lokal.

Bantuan dan dukungan

Ada sesuatu yang tidak berfungsi seperti yang diharapkan? Naikkan masalah GitHub. Jika Anda memerlukan dukungan atau bantuan yang dipersonalisasi, silakan pertimbangkan untuk membeli versi Pro dan kami akan membantu Anda melalui email.

Sponsor