digital garden

Template Blog Pengembang Modern (Digital Garden Starter)

Lebih banyak tangkapan layar di sini

Template Blogging Sumber Terbuka (Digital Gardening) untuk pengembang yang menggunakan router aplikasi Next.js, MDX, ContentLayer, Tailwind CSS, @shadcn/UI, Ikon Lucide, dan banyak lagi.

Jika Anda menyukai template ini dan/atau menggunakannya, silakan berikan bintang di GitHub. Ini akan membantu lebih banyak orang menemukannya, sehingga membantu meningkatkan templat.

Catatan: Proyek ini selalu berkembang dan jauh dari sempurna atau bahkan dilakukan. Saya selalu terbuka untuk saran dan kontribusi. Jangan ragu untuk membuka masalah atau PR jika Anda memiliki ide atau saran. Anda juga dapat melihat peta jalan untuk fitur yang direncanakan jika Anda ingin berkontribusi.

Daftar isi

• Motivasi
• Memulai
  • Menulis konten
    • Frontmatter
  • Penyebaran
• Kustomisasi
  • Font
  • Warna
  • Tanda tangan
  • Gambar
    • Avatar beranda
  • Metadata
    • Navigasi
    • Tautan sosial
  • Analitik
    • Vercel
    • Umami
    • Masuk akal
    • Google Analytics
    • Penyedia analisis lainnya
  • Langganan buletin
    • Mailerlite
    • Penyedia buletin lainnya
  • Bagian Pahlawan
  • Tip & Trik Lainnya
    • Optimalisasi Gambar
• Contoh
• Fitur & peta jalan
• Berkontribusi
  • Kontributor
  • Bagaimana?
• Inspirasi & menyebutkan
• Mendukung

Motivasi

Sebagai pengembang yang membuat konten, saya ingin memiliki blog & taman digital di mana saya dapat berbagi pemikiran dan ide saya dengan dunia. Sekarang, tidak ada "solusi sempurna" untuk ini saat ini. Dengan analitik yang disertakan, SEO, langganan email, perkakas modern, desain sederhana, dll. Kami harus membangun satu dari awal, menggunakan templat desain dan kode fitur, atau menggunakan alat CMS/no-kode.

Jadi saya memutuskan untuk membangun solusi yang akan saya gunakan sendiri. Inilah hasilnya.

Memulai

Jika Anda ingin melihat bagaimana saya mengatur templat ini untuk taman digital saya sendiri, Anda dapat memeriksa komit ini dengan semua perubahan.

1. Gunakan repo sebagai templat
2. Instal dependensi dengan pnpm install
3. Edit utils/metadata.ts dengan informasi dan pengaturan umum Anda
4. Edit utils/uses-data.ts dengan perangkat lunak & perangkat keras yang Anda gunakan
5. Edit utils/projects-data.ts dengan proyek Anda
6. Edit utils/navigation-links.ts dengan tautan yang Anda inginkan di navigasi
7. Edit content/pages/now dengan ketersediaan Anda
8. Edit content/pages/about dengan bio Anda
9. Jalankan server pengembangan dengan pnpm dev

Buka http: // localhost: 3000 di browser Anda untuk melihat hasilnya.

Menulis konten

Anda dapat menulis konten dalam Markdown atau MDX. Konten terletak di content/ dan diatur dalam folder. Folder pages berisi halaman. Folder posts berisi posting blog. Folder projects berisi proyek.

Halaman daftar pengeditan dilakukan di folder lib .

• /uses - lib/uses-data.ts
• /projects - lib/projects-data.ts
• /social - lib/social-data.ts

Frontmatter

Frontmatter digunakan untuk mendefinisikan metadata untuk halaman dan posting. Terletak di bagian atas file dan ditulis di YAML. Anda dapat menentukan bidang berikut:

• title - judul halaman/posting
• description - Deskripsi halaman/posting
• publishedDate - tanggal posting (tidak digunakan di halaman)
• lastUpdatedDate - Tanggal halaman/posting
• tags - Daftar tag untuk posting. Anda dapat menambahkan tag baru dengan menambahkannya ke daftar tagOptions . (Tidak digunakan di halaman)
• series - seri pos. Serial memiliki judul dan nomor pesanan untuk posting. (Tidak digunakan di halaman)
• author - Penulis posting. Seorang penulis memiliki nama, dan gambar. (Tidak digunakan di halaman)
• status - apakah halaman/posting diterbitkan atau draft

Penyebaran

Anda dapat menggunakan proyek dengan Vercel atau penyedia hosting lainnya. Jika Anda ingin menggunakan Vercel, Anda dapat menggunakan tombol di bagian atas readme ini.

1. Perbarui package.json Informasi Penulis
2. Publikasikan repo Anda ke GitHub
3. Buat proyek baru di Vercel dan impor repo Anda
4. Siapkan variabel lingkungan NEXT_PUBLIC_BASE_URL di Vercel untuk menunjuk ke URL root situs web Anda
5. Jika Anda berencana untuk menggunakan analitik dan/atau penyedia buletin, atur variabel lingkungan masing -masing di Vercel
6. Membangun dan menggunakan?

Kustomisasi

Font

Proyek ini menggunakan Inter sebagai font default. Anda dapat mengubahnya di app/layout.tsx menggunakan paket next/fonts .

Warna

Proyek ini menggunakan warna tailwind dan @shadcn/ui config. Kustomisasi warna di globals.css .

Tanda tangan

Ada komponen tanda tangan untuk digunakan di footer. Anda dapat mengedit tanda tangan pada components/signature.tsx . Saya menggunakan Figma untuk menulis tanda tangan dengan font Caveat dan mengekspornya sebagai SVG. Anda dapat melakukan hal yang sama dan memperbarui SVG di komponen.

Gambar

Gambar dan file media lainnya terletak di public/ direktori. Anda dapat menggunakannya di konten Anda dengan menggunakan jalur /<filename>.<ext>

Avatar beranda

Berikut tutorial singkat tentang cara membuat avatar serupa di Figma dalam waktu kurang dari 2 menit. https://youtu.be/ny-vaeehjkm

Metadata

Anda dapat mengubah detail metadata dan penulis di utils/metadata.ts . Ini akan digunakan di sekitar situs untuk judul, tautan sosial, pegangan sosial, SEO, dll.

Navigasi

Anda dapat mengedit tautan navigasi di lib/navigation-links.ts .

Tautan sosial

Anda dapat mengedit tautan sosial di lib/social-data.ts . Anda juga dapat menambahkan tautan sosial baru dengan menambahkannya ke file dan menggunakan nama platform sebagai kunci dan URL sebagai nilainya. Komponen SocialButton akan secara otomatis menambahkan ikon untuk platform jika didukung dalam ikon sederhana.

Analitik

Vercel

Untuk mengonfigurasi, Anda perlu mengaktifkannya di dasbor Vercel Project dengan memilih proyek Anda dan kemudian klik tab Analytics dan klik Aktifkan dari dialog.

Umami

Umami adalah solusi analisis web yang sederhana, mudah digunakan, dengan opsi hosting sendiri! Anda dapat membaca lebih lanjut tentang hal itu di situs web umami. (Petunjuk: di kereta api, Anda dapat mensembelcara sendiri biaya rendah atau bahkan gratis) .

Konfigurasikan: Atur NEXT_PUBLIC_UMAMI_SCRIPT_URL & NEXT_PUBLIC_UMAMI_WEBSITE_ID Variabel lingkungan pada file .env.local Anda dan di vercel dashboard.

Masuk akal

Plausible adalah alternatif sederhana, ringan, dan open-source untuk Google Analytics. Anda dapat membaca lebih lanjut tentang hal itu di situs web yang masuk akal.

Konfigurasi: Atur NEXT_PUBLIC_PLAUSIBLE_DOMAIN & NEXT_PUBLIC_PLAUSIBLE_SCRIPT_URL Variabel lingkungan pada file .env.local Anda dan di vercel dashboard. Jika Anda khawatir tentang pemblokir iklan, Anda dapat proksi skrip yang masuk akal melalui domain Anda sendiri. Anda dapat membaca lebih lanjut tentang itu di sini.

Google Analytics

Google Analytics adalah layanan analisis web yang ditawarkan oleh Google yang melacak dan melaporkan lalu lintas situs web, saat ini sebagai platform di dalam merek platform pemasaran Google. Anda dapat membaca lebih lanjut tentang hal itu di situs web Google Analytics.

Konfigurasi: Atur variabel lingkungan NEXT_PUBLIC_GOOGLE_ANALYTICS_ID pada file .env.local Anda dan di dasbor Vercel.

Penyedia analisis lainnya

Mendukung penyedia analisis lain sedang berlangsung. Jangan ragu untuk membuka masalah jika Anda memiliki saran atau PR jika Anda ingin mengimplementasikannya sendiri.

Langganan buletin

Mailerlite

MailerLite adalah alat pemasaran email sederhana untuk semua jenis bisnis. Anda dapat membaca lebih lanjut tentang hal itu di situs web MailerLite.

Konfigurasikan: Setel variabel lingkungan EMAIL_API_BASE , EMAIL_API_KEY , dan EMAIL_GROUP_ID pada file .env.local Anda dan di dasbor Vercel.

Penyedia buletin lainnya

Mendukung penyedia buletin lainnya sedang berlangsung. Jangan ragu untuk membuka masalah jika Anda memiliki saran atau PR jika Anda ingin mengimplementasikannya sendiri.

Bagian Pahlawan

Anda dapat memilih antara 3 varian pahlawan yang berbeda untuk digunakan di app/(site)/page.tsx dengan mengubah komponen pahlawan yang diimpor.

1. HeroSimple - Bagian Pahlawan Pusat Sederhana dengan Gambar, Judul, dan Subtitle.
2. HeroVideo - 2 bagian pahlawan kolom dengan VideoSk Embed di satu sisi dan judul dan subtitle di sisi lain.
3. HeroImage - 2 bagian pahlawan kolom dengan gambar di satu sisi dan judul, dan subtitle di sisi lain.
4. HeroMinimal - Nama Bagian Pahlawan Kecil & Judul Pekerjaan

Tip & Trik Lainnya

Optimalisasi Gambar

Saya sarankan mengoptimalkan gambar dengan cepat secara gratis dengan ImageOptim. Instal di Mac Anda, lalu buka folder public di Finder. Pilih semua gambar, klik kanan, dan pilih "Buka dengan> ImageOptim". Ini akan mengoptimalkan semua gambar di folder.

Catatan: Jangan berlebihan. Anda dapat dengan mudah membuat gambar terlihat buruk dengan algoritma kompresi lossy.

Contoh

• https://davidlevai.com/ - taman digital saya sendiri
• Naga dan Kode Taman Digital - Sumber Modifikasi Sederhana
• Blog Shafie Mukhre - Sumber
• Blog Praveen Kumars - Sumber
• Blog Steven Selolo - Sumber
• Blog Marton - Sumber

Buat PR dan tambahkan blog Anda ke daftar ini jika Anda menggunakan template!

Fitur & peta jalan

• Fungsi dasar membaca halaman dan posting
• Desain Dasar Mode Gelap/Cahaya
• Sorotan Kode MDX
• Readme.md
• robots.txt & sitemap.xml
• Feed RSS
• Perkiraan waktu membaca
• LISENSI
• berkontribusi.md
• Komponen MDX (TOC & Catatan Kaki)
• Konfigurasi Umum & Metadata (Penulis, URL, Sosial, dll.)
• menggunakan halaman
• Tautan di Halaman Bio
• Generasi gambar OG
• Halaman Proyek
• tentang bagian di beranda
• Cari & Bar Perintah
• Analytics: Vercel, Umami, masuk akal, Google Analytics
• Seri pos
• Tidak ditemukan halaman
• Dokumen yang berkontribusi
• Docs Refresh
• Kembali ke Tombol Atas
• Komponen Ikon Sosial
• Tombol Berbagi Sosial
• Tag
• Integrasi buletin (formulir, rute API, kunci, halaman terima kasih/selamat datang, penyedia mailerlite)
• Lebih banyak komponen MDX (Katex, Matematika)
• Definisi Konten Penulis
• Perbaikan SEO
• Penyedia buletin lainnya (ConvertKit, Substack, Buttondown, MailChimp, dll)
• Penyedia analitik lain (Fathom, Simplelytics, dll)
• Dukungan RTL
• Halaman Seri Posting
• Tautan PREV/POST berikutnya
• Posting Terkait/Serupa
• Donasi Komponen & Halaman
• CLI dan/atau resep
• Halaman Newsletter sebelumnya
• Sistem tata letak/templat
• Sumber Data Gagasan
• Sumber data kewarasan
• Peningkatan Desain (Whitespace, Tata Letak, dll.)
• Lightbox untuk gambar
• mengimplementasikan kebijakan keamanan konten
• Komponen Pratinjau Kode
• Kode Sorot Peningkatan (Kode Salin, Tema)
• Kartu Proyek Kaya
• Halaman arahan/halaman penawaran/halaman freebie
• Template CV
• Halaman yang diautentikasi dan/atau konten tersembunyi (di balik alamat email)
• 100 Skor Mercusuar
• Command Bar Fuzzy Search in Content
• Audit Aksesibilitas
• Lebih banyak komponen MDX (oEMBED)
• kesalahan, dan memuat halaman
• Perbaikan naskah
• Halaman Sosial Mendesain ulang (tautan dalam BIO)
• Redesign menggunakan halaman
• Halaman proyek desain ulang
• Refactor Umum
• Pembersihan Umum
• Menerapkan solusi seperti videoask untuk bagian pahlawan
• Perbaikan umpan RSS (gambar, deskripsi, dll.)
• CMS Admin Kustom (?)
• Judul Pahlawan dan Teks Subtitle Dukungan HTML (?)
• Pagination (?)
• Dukungan multi-penulis (?)
• Posting seperti counter (?)
• Penghitung pengunjung (?)
• kode taman bermain alih -alih menyorot kode (?)
• Sistem komentar (?)
• navigasi berbasis keyboard dengan hotkey (?)
• Dukungan multilang (?)

Berkontribusi

Kontributor

• @thedevdavid
• @BR4Adam

Proyek ini berasal dari pengembang untuk pengembang. Semua kontribusi dipersilakan! Silakan:

• Laporkan bug
• Diskusikan keadaan saat ini dan ide -ide untuk perbaikan
• Kirimkan perbaikan
• Mengusulkan fitur baru

Bagaimana?

1. Garakan repo dan buat cabang Anda dari develop .
2. Tambahkan kode Anda.
3. Perbarui dokumentasi.
4. Pastikan kode Anda serat dan aplikasi dibangun.
5. Buka permintaan tarik untuk develop cabang.

Kontribusi apa pun yang Anda buat akan berada di bawah lisensi perangkat lunak MIT. Singkatnya, ketika Anda mengirimkan perubahan kode, pengiriman Anda dipahami berada di bawah lisensi MIT yang sama yang mencakup proyek. Kode perilaku dapat ditemukan di sini.

Inspirasi & menyebutkan

• Blog Pribadi Delba Oliveira - Menggunakan dan Menyusun Daftar Isi dengan ContentLayer
• timlrx/tailwind-nextjs-starter-blog-ide

Mendukung

Jika Anda menyukai template ini dan/atau menggunakannya, silakan berikan bintang di GitHub.