Tailwind Nextjs Starter Blog

Jika Anda sedang mencari platform yang tepat untuk membuat web blog, kami sangat merekomendasikan template ini. Ini adalah template awal untuk blog yang dibangun menggunakan Next.js dan Tailwind CSS. Ini mungkin adalah template blog markdown Next.js dengan fitur paling lengkap yang ada saat ini. Hadir secara siap pakai yang telah dikonfigurasi dengan teknologi terbaru untuk membuat kegiatan menulis teknis menjadi sangat mudah. Mudah dikonfigurasi dan disesuaikan. Sangat sempurna sebagai pengganti untuk blog individu yang sebelumnya menggunakan Jekyll maupun Hugo.

Simak dokumentasi di bawah ini untuk memulai.

Mengalami kendala? Cek halaman FAQ dan lakukan pencarian pada isu-isu sebelumnya. Jangan ragu untuk membuka isu (issue) baru jika belum ada yang memposting masalah serupa.

Punya permintaan fitur? Cek diskusi terdahulu untuk melihat apakah hal tersebut sudah pernah dibahas. Jika belum, silakan mulai utas diskusi baru. Semua ide sangat diterima!

Contoh

Demo Blog - repositori ini
Blog pribadi saya - dimodifikasi agar secara otomatis membuat artikel blog dengan tanggal
Buku resep Aloisdg - dengan gambar dan resep masakan!
Demo GautierArcin dengan next translate - dilengkapi dengan terjemahan postingan mdx, kode sumber
Digital garden David Levai - desain yang dikustomisasi dan tambahan langganan email
Thinh's Corner - tata letak khusus dengan daftar isi samping yang melekat (sticky)

Menggunakan template ini? Jangan sungkan untuk membuat PR (Pull Request) dan tambahkan blog Anda ke dalam daftar ini.

Motivasi

Saya ingin memindahkan blog lama saya ke Next.js dan Tailwind CSS, tetapi belum ada template siap pakai yang mudah digunakan, jadi saya memutuskan untuk membuatnya sendiri. Desainnya diadaptasi dari Blog Tailwindlabs.

Saya ingin template ini hampir sama kaya fiturnya dengan template blog populer seperti beautiful-jekyll dan Hugo Academic, tetapi dengan memanfaatkan ekosistem React terbaik dan praktik pengembangan web paling mutakhir saat ini.

Fitur

Kustomisasi tampilan yang mudah dengan Tailwind 3.0 dan atribut warna utama (primary color)
Skor Lighthouse yang hampir sempurna - Laporan Lighthouse
Sangat ringan, file JS pada muatan pertama hanya 45kB, menggunakan Preact di build produksi
Tampilan yang ramah perangkat seluler (Mobile-friendly)
Tema terang dan gelap (Light and dark theme)
Font yang di-host sendiri dengan Fontsource
Mendukung plausible, simple analytics, dan Google Analytics
MDX - tulis JSX di dalam dokumen markdown!
Sorotan sintaks (syntax highlighting) di sisi server dengan nomor baris dan sorotan baris melalui rehype-prism-plus
Mendukung tampilan Matematika melalui KaTeX
Mendukung sitasi dan daftar pustaka melalui rehype-citation
Optimasi gambar otomatis melalui next/image
Pengambilan data yang fleksibel dengan mdx-bundler
Mendukung tag - setiap tag unik akan memiliki halamannya sendiri
Mendukung multi-penulis (multiple authors)
Berbagai template blog
Komponen Daftar Isi (TOC)
Mendukung nested routing (rute bersarang) untuk artikel blog
Komponen buletin (Newsletter) yang mendukung Mailchimp, Buttondown, Convertkit, Klaviyo, Revue, Emailoctopus, dan Beehiiv
Mendukung sistem komentar giscus, utterances, atau disqus
Halaman proyek
Header keamanan yang sudah dikonfigurasi sebelumnya
Ramah SEO dengan RSS feed, sitemap, dan banyak lagi!

Contoh Artikel

Panduan Mulai Cepat

JS (dukungan resmi) - npx degit [https://github.com/timlrx/tailwind-nextjs-starter-blog.git](https://github.com/timlrx/tailwind-nextjs-starter-blog.git) atau TS (dukungan komunitas) - npx degit timlrx/tailwind-nextjs-starter-blog#typescript
Personalisasi file siteMetadata.js (informasi terkait situs)
Modifikasi content security policy (kebijakan keamanan konten) di next.config.js jika Anda ingin menggunakan penyedia analitik apa pun atau solusi komentar selain giscus.
Personalisasi authors/default.md (penulis utama)
Modifikasi projectsData.ts
Modifikasi headerNavLinks.ts untuk mengkustomisasi tautan navigasi
Tambahkan artikel blog
Deploy (sebarkan) di Vercel

Pengembangan

Pertama-tama, jalankan server pengembangan:

npm start
# atau
npm run dev

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

Anda dapat mulai mengedit halaman dengan mengubah pages/index.js. Halaman tersebut akan diperbarui secara otomatis saat Anda mengedit filenya.

Perluas / Kustomisasi

data/siteMetadata.js - berisi sebagian besar informasi terkait situs web yang harus dimodifikasi sesuai dengan kebutuhan pengguna.

data/authors/default.md - informasi default penulis (wajib ada). Penulis tambahan dapat ditambahkan sebagai file di dalam folder data/authors.

data/projectsData.js - data yang digunakan untuk membuat kartu bergaya khusus pada halaman proyek.

data/headerNavLinks.js - tautan navigasi.

data/logo.svg - ganti dengan logo milik Anda sendiri.

data/blog - ganti dengan artikel blog Anda sendiri.

public/static - tempat menyimpan aset seperti gambar dan favicon.

tailwind.config.js dan css/tailwind.css - berisi stylesheet Tailwind yang dapat dimodifikasi untuk mengubah tampilan dan nuansa situs secara keseluruhan.

css/prism.css - mengontrol gaya (style) yang terkait dengan blok kode. Silakan kustomisasi dan gunakan tema prismjs pilihan Anda, misalnya prism themes.

components/social-icons - untuk menambahkan ikon lain, cukup salin file svg dari Simple Icons dan petakan (map) di dalam file index.js. Ikon-ikon lain menggunakan heroicons.

components/MDXComponents.js - masukkan kode JSX Anda sendiri atau komponen React dengan menentukannya di sini. Anda kemudian dapat memanggilnya secara langsung di dalam file .mdx atau .md. Secara default, sebuah komponen tautan dan gambar khusus (custom) sudah disediakan.

layouts - template utama yang digunakan dalam halaman.

pages - rute halaman. Baca Dokumentasi Next.js untuk informasi lebih lanjut.

next.config.js - konfigurasi yang berkaitan dengan Next.js. Anda perlu menyesuaikan Content Security Policy (Kebijakan Keamanan Konten) jika Anda ingin memuat skrip, gambar, dan lain-lain dari domain eksternal.

Artikel

Frontmatter

Frontmatter mengikuti Standar Hugo.

Saat ini 10 kolom atau field didukung.

title (wajib)
date (wajib)
tags (wajib, bisa berupa array kosong)
lastmod (opsional)
draft (opsional)
summary (opsional)
images (opsional, jika tidak ada gambar yang diberikan maka secara default menggunakan socialBanner di konfigurasi siteMetadata)
authors (daftar opsional yang harus sesuai dengan nama file di `data/authors`. Akan menggunakan `default` jika tidak ada yang ditentukan)
layout (daftar opsional yang harus sesuai dengan nama file di `data/layouts`)
canonicalUrl (opsional, url kanonikal dari artikel untuk keperluan SEO)

Berikut adalah contoh frontmatter sebuah artikel blog:

---
title: 'Memperkenalkan Tailwind Nextjs Starter Blog'
date: '2021-01-12'
lastmod: '2021-01-18'
tags: ['next-js', 'tailwind', 'panduan']
draft: false
summary: 'Mencari template siap pakai yang berkinerja tinggi dengan teknologi web terbaik untuk mendukung kebutuhan blogging Anda? Coba lihat template Tailwind Nextjs Starter Blog.'
images: ['/static/images/canada/mountains.jpg', '/static/images/canada/toronto.jpg']
authors: ['default', 'sparrowhawk']
layout: PostLayout
canonicalUrl: https://tailwind-nextjs-starter-blog.vercel.app/blog/introducing-tailwind-nextjs-starter-blog
---

Menulis (Compose)

Jalankan node ./scripts/compose.js untuk membuat artikel baru dengan cepat.

Ikuti panduan interaktif yang muncul untuk menghasilkan sebuah file post dengan frontmatter yang sudah terisi sebelumnya.

Deploy (Penyebaran)

Vercel

Cara termudah untuk mendeploy template ini adalah dengan menggunakan Platform Vercel yang dibuat oleh pencipta Next.js. Simak Dokumentasi deploy Next.js untuk mendapatkan detail lebih lanjut.

Netlify / GitHub Pages / Firebase dll.

Karena template ini menggunakan next/image untuk optimasi gambar, konfigurasi tambahan harus dilakukan saat melakukan deploy ke situs web hosting statis populer lainnya seperti Netlify atau GitHub Pages. Anda harus menggunakan penyedia optimasi gambar alternatif seperti Imgix, Cloudinary, atau Akamai. Sebagai alternatif, gantilah komponen next/image dengan tag standar <img>. Lihat [Dokumentasi next/image](https://nextjs.org/docs/basic-features/image-optimization) untuk detail selengkapnya.

Rute API yang digunakan di dalam komponen newsletter tidak dapat digunakan dalam ekspor situs statis. Anda perlu menggunakan penyedia endpoint API formulir dan mengganti rute di dalam komponen newsletter secara sesuai. Platform hosting lain seperti Netlify juga menawarkan solusi alternatif - silakan merujuk ke dokumentasi mereka untuk informasi lebih lanjut.

Dukungan

Sedang menggunakan template ini? Dukung usaha pengembangan ini dengan memberikan bintang (star) di GitHub, membagikan blog buatan Anda, dan memberikan mention (shoutout) di Twitter atau jadilah sponsor proyek ini.

Rekomendasi Terbaik: Memperkenalkan Tailwind Nextjs Starter Blog