tailwind nextjs starter blog

Blog starter tailwind nextjs

Ini adalah Template Starter Blogging Blogging CSS Tailwind CSS. Versi 2 didasarkan pada direktori aplikasi berikutnya dengan komponen React Server dan menggunakan ContentLayer untuk mengelola konten Markdown.

Mungkin templat blogging Markdown Markdown yang paling kaya fitur di luar sana. Mudah dikonfigurasi dan dapat disesuaikan. Sempurna sebagai pengganti blog individu Jekyll dan Hugo yang ada.

Lihat dokumentasi di bawah ini untuk memulai.

Menghadapi masalah? Periksa halaman FAQ dan lakukan pencarian tentang masalah masa lalu. Jangan ragu untuk membuka masalah baru jika tidak ada yang telah diposting sebelumnya.

Permintaan fitur? Periksa diskusi masa lalu untuk melihat apakah telah dibesarkan sebelumnya. Kalau tidak, jangan ragu untuk memulai utas diskusi baru. Semua ide disambut!

Variasi

Catatan : Ini adalah garpu yang disumbangkan komunitas menggunakan kerangka kerja yang berbeda atau dengan perubahan signifikan pada basis kode - tidak didukung secara resmi.

Alternatif Astro - Templat Astro Tailwind.

Alternatif Remix-Run-Template Blog Starter Tailwind Remix-Run.

Dukungan Internasionalisasi - Template dengan I18N dan kode sumber.

Contoh v2

• Blog demo - repo ini
• Blog Pribadi Saya - Dimodifikasi untuk Menghasilkan Posting Blog dengan Tanggal
• Blog Karhdo - Blog Karhdo - Petualangan Pengkodean Karhdo (Kode Sumber)
• Blog Ben.Codes - Blog Pribadi Benoit Tentang Pengembangan Perangkat Lunak (Kode Sumber)
• TSIX Blog - Insinyur front -end digunakan untuk merekam beberapa titik pengetahuan dalam pekerjaan dan belajar中文
• Blog Soto - situs web pribadi yang lebih personal ditingkatkan dari V1 (kode sumber)
• Blog Prabhu - Situs web pribadi Prabhu dengan blog (kode sumber)
• Blog Rabby Hasan - Blog Pribadi Rabby Hasan Tentang Pengembangan Tumpukan Penuh Dengan Cloud (Kode Sumber)
• Enscribe.dev - Menerapkan blog pribadi; Shenanigans Cybersecurity, Frontend Webdev, dll. (Kode Sumber)
• Dalelarroder.com - Situs web pribadi Dale Larroder ditingkatkan dari V1 (kode sumber)
• thetalhatahir.com - Blog pribadi Talha Tahir. Tambahan thumbnail artikel, kartu LinkedIn, konten pahlawan yang indah, emotikon teknologi.
• homing.so - blog pribadi Homing tentang hal -hal yang dia pelajari (kode sumber)
• Blog ZS1M - Blog Pribadi ZS1M untuk merekam dan berbagi Konten Teknis Pembelajaran Harian (Kode Sumber)
• Dariuszwozniak.net - Blog Pengembangan Perangkat Lunak (kode sumber)
• Dreams.plus - Situs blog untuk beberapa pemikiran dan catatan untuk kehidupan dan teknologi.
• Blog Francisaguilar.co - Blog pribadi Francis Aguilar yang berbicara tentang teknologi, kebugaran, dan pengembangan pribadi.
• Min71 Dev Blog - Blog Pribadi Tentang Blockchain, Pengembangan dan dll. (Kode Sumber)
• Blog Bryce Yu - Blog Pribadi Bryce Yu tentang sistem terdistribusi, database, dan pengembangan web. (Kode Sumber)
• Situs Web Seri Anime Remote Startup Senpai - Halaman arahan untuk Seri Anime Remote Startup Senpai.
• Basis Rahasia - Blog Pribadi Jac Hsu.kalks tentang teknologi, pemikiran, dan kehidupan secara umum.
• Zsebinformatikus - Blog Panduan Informasi Superhighway.
• Blog Anton Morgunov - berbicara tentang sains tanpa penyederhanaan yang berlebihan atau mengapa kimia teoretis dan komputasi itu keren.
• Blog Hans - Blog Pribadi Hans, Teknologi Front -End, Galeri dan Buku Harian Perjalanan 中文. (Kode Sumber)
• Portofolio Cub3y0nd - Catatan Studi Keamanan Cyber Cub3y0nd 「中文」
• London Tech Talk - Podcast yang mengeksplorasi tren teknologi dan pengalaman hidup ekspatriat. - 日本語
• Blog Aliran CRUD - Blog Teknis Tentang AI, Teknik Cloud, Ilmu Data dan Pengembangan Pribadi
• Blog Trillium - Modifikasi untuk Render Resume PDF pada /resume Halaman. (Kode Sumber)
• Blog Teknologi Frank - Blog Pribadi Frank tentang Pengembangan dan Teknologi Perangkat Lunak. (Kode Sumber)
• Blog Wujie: 旅行者计划 - Taman Digital Pribadi Wujie (Kode Sumber)
• Blog Xiaodong - blog pribadi Xiaodong tentang teknologi front -end, dan kehidupan. 「中文」 (kode sumber)
• Azurtelier.com - Situs web pribadi Amos untuk teknologi, musik, ilustrasi AI, dll. [Bahasa Inggris/中文] (kode sumber)
• Joshhaines.com - Situs web pribadi untuk Josh Haines. (Kode Sumber)
• • Blog Jigu - Blog Pribadi Jigu tentang Tech, Crypto, Golang, dan Life. 「中文」
• Andrewsam.xyz - Situs web pribadi Andrew menggunakan shadcn, prisma, mongoDB, auth.js, halaman resume, timeline pengalaman kustom dan komponen teknologi. (Kode Sumber)
• Portofolio Rulli Damara Putra - Blog dan portofolio pribadi Rully.
• Blog.taoluyuan.com 套路猿 - Blog teknologi pribadi yang mendukung pengalihan multi -tema. 「中英」
• LirikDecode.com - situs web lirik lagu yang menawarkan lirik asli, romanisation, dan terjemahan bahasa Inggris dengan opsi tampilan yang dapat disesuaikan.
• Bmacharia.com - Blog teknis Benson Macharia tentang cybersecurity dan manajemen risiko TI.
• Armujahid.me - Blog pribadi Abdul Rauf tentang teknologi dan hal -hal acak.
• leohuynh.dev - ?? Blog Dev Leo - Cerita, Wawasan, dan Gagasan. Tambah /snippets , /books halaman, tambahkan ProfileCard , komponen CareerTimeline dan banyak lagi.
• Blog OpenSats - 501 (c) (3) amal publik yang bertujuan untuk mendanai proyek bebas dan sumber terbuka secara berkelanjutan. (Kode Sumber)
• Jadwal Blog - Kiat Penjadwalan Media Sosial, Strategi, dan Pembaruan Produk untuk Pembuat Konten. (Tautan Proyek)
• Blog Yawdev - Pengembangan IT -Agency / Perangkat Lunak. Blog Tentang Teknologi dan Bisnis (Tautan Proyek)
• Catatan Teknik - Jonas Vetterle Pribadi Situs Web & Blog. Saya menulis artikel tentang rekayasa perangkat lunak yang menarik minat saya, termasuk AI dan komputasi kuantum
• Screenager.dev - Situs web pribadi sebagai portofolio & blog. Mendokumentasikan perjalanan belajar saya dan beberapa panduan.
• Blog Kezhenxu94 - Blogging tentang dev, tips & trik, tutorial dan banyak lagi.

Menggunakan template? Jangan ragu untuk membuat PR dan menambahkan blog Anda ke daftar ini.

Contoh v1

v1-blogs-showcase.webm

Terima kasih kepada komunitas pengguna dan kontributor untuk template! Kami tidak lagi menerima daftar blog baru di sini. Jika Anda telah memperbarui dari versi 1 ke versi 2, jangan ragu untuk menghapus blog Anda dari daftar ini dan menambahkannya ke yang di atas.

• Cookbook Aloisdg - dengan gambar dan resep!
• Demo Gautierarcin dengan Translate Berikutnya - Termasuk terjemahan posting MDX, kode sumber
• Digital Garden David Levai - Desain Kustomisasi dan Langganan Email Menambahkan
• thvu.dev - Menambahkan mdx-embed , lihat hitungan, menit membaca dan banyak lagi.
• Irvin.dev - Situs pribadi Irvin Lin. Menambahkan embedding youtube.
• Kirillso.com - Blog & Situs Web Pribadi.
• Secondsharpe.com - Blog Perusahaan Utama Tincre
• Blog.b00st.com - Blog Promosi Musik Utama B00st.com
• Astrosaurus.me - Blog Pribadi Ephraim Atta -Duncan
• Dhanrajsp.me - situs dan blog pribadi Dhanraj.
• Blog.r00ks.io - Blog pribadi Austin Rooks (kode sumber).
• Honghong.me - Situs Web Pribadi Tszhong (Kode Sumber)
• Marceloformentao.dev - situs web pribadi Marcelo Formentão (kode sumber).
• abiraja.com - dengan komponen cuplikan kode JS yang dapat dijalankan!
• Bpiggin.com - Blog Pribadi Ben Piggin
• maqib.cn - blog pengembang front -end Cina 狂奔小马的博客 (源码)
• Ambilena.com - Blog Musik Elektronik & Jejak untuk musisi yang akan datang.
• 0xchai.io - Blog Pribadi Chai
• Techipedia - Aplikasi Web Progresif Blogging Sederhana Dengan Tombol Instalasi Kustom dan Bilah Kemajuan Teratas
• Reubence.com - Taman Digital Reuben Rapose
• Axolo.co/Blog - Berita Manajemen Teknik & Pembaruan Axolo.co (dengan Pratinjau Gambar untuk Artikel di Halaman Beranda)
• Musing.vercel.App - Blog Pribadi Parth Desai (Kode Sumber)
• Onyourmental.com - Situs web Curtis Warcup untuk Podcast Mental Anda (Kode Sumber)
• CWARCUP.com - Situs web dan blog pribadi Curtis Warcup (kode sumber).
• Ondiek-elijah.me - situs web dan blog Ondiek Elijah (kode sumber).
• jmalvarez.dev - blog pribadi José Miguel álvarez (kode sumber)
• JUSTINGOSSES.COM - Situs web dan blog pribadi Justin Gosses (kode sumber)
• https://bitoflearning-9a57.fly.dev/ - blog pribadi Sangeet Agarwal, yang diputar ulang untuk remix menggunakan tumpukan indie (kode sumber)
• raphaelchelly.com - Situs web dan blog pribadi Raphaël Chelly (kode sumber)
• KAVEH.PAGE - Blog pribadi Kaveh Tehrani. Direktori Tag yang Ditambahkan, Kartu Profil, Direktori Waktu-ke-Baca pada Posting, dll.
• Drakerossman.com - Blog Drake Rossman tentang Nixos, Rust, Arsitektur Perangkat Lunak dan Manajemen Teknik, serta renungan umum.
• Meamenu.com - Halaman arahan dan blog produk mulai dari template ini. Ini juga menggunakan Motion-Motion for Animations, Template Tata Letak Kustom, Waline untuk Komentar Blog dan Formulir PrimereAct [ITA]
• giovanni.orciuolo.it - situs web pribadi Giovanni Orciuolo, blog dan semuanya kutu buku.

Motivasi

Saya ingin port blog saya yang ada ke NextJS dan Tailwind CSS tetapi tidak ada template yang mudah digunakan untuk digunakan jadi saya memutuskan untuk membuatnya. Desain diadaptasi dari blog Tailwindlabs.

Saya ingin itu hampir sama kaya fiturnya dengan templat blogging populer seperti Beautiful-Jekyll dan Hugo Academic tetapi dengan yang terbaik dari ekosistem React dan praktik terbaik pengembangan web saat ini.

Fitur

• Next.js dengan naskah
• ContentLayer untuk mengelola logika konten
• Kustomisasi gaya yang mudah dengan tailwind 3.0 dan atribut warna primer
• MDX - Tulis JSX di Dokumen Markdown!
• Near Perfect Lighthouse Skor - Laporan Mercusuar
• Ringan, 85kb First Load JS
• Tampilan ramah seluler
• Tema terang dan gelap
• Optimalisasi Font dengan Next/Font
• Integrasi dengan Pliny yang menyediakan:
  • Beberapa opsi analitik termasuk umami, masuk akal, analitik sederhana, posthog dan analitik Google
  • Komentar melalui Giscus, ucapan atau disqus
  • Newsletter API dan Komponen dengan Dukungan untuk MailChimp, Buttondown, ConvertKit, Klaviyo, Revue, Emailoctopus dan Beehiiv
  • Pencarian Palet Perintah dengan KBAR atau Algolia
• Penyerbuan Sintaks Sisi Server dengan Nomor Garis dan Sorot Line Via Rehype-Prism-Plus
• Tampilan matematika didukung melalui Katex
• Kutipan dan Dukungan Bibliografi melalui Kutipan Rehipe
• Peringatan gitub melalui komersi-github-blockquote-alert
• Optimalisasi Gambar Otomatis Melalui Next/Image
• Dukungan untuk Tag - Setiap tag unik akan menjadi halamannya sendiri
• Dukungan untuk beberapa penulis
• 3 tata letak blog yang berbeda
• 2 tata letak daftar blog yang berbeda
• Dukungan untuk perutean posting blog bersarang
• Halaman Proyek
• Header keamanan yang telah dikonfigurasikan sebelumnya
• Seo Friendly dengan umpan RSS, sitemaps dan banyak lagi!

Posting Sampel

• Panduan Markdown
• Pelajari lebih lanjut tentang gambar di Next.js
• Tur pengaturan huruf matematika
• Kisi gambar MDX sederhana
• Contoh prosa panjang
• Contoh pos rute bersarang

Panduan Mulai Cepat

1. Kloning repo

npx degit ' timlrx/tailwind-nextjs-starter-blog '

2. Personalisasi siteMetadata.js (informasi terkait situs)
3. Ubah Kebijakan Keamanan Konten di next.config.js Jika Anda ingin menggunakan penyedia analitik lain atau solusi komentar selain Giscus.
4. Personalisasi authors/default.md (Penulis Utama)
5. Modifikasi projectsData.ts
6. Ubah headerNavLinks.ts untuk menyesuaikan tautan navigasi
7. Tambahkan posting blog
8. Menyebarkan di Vercel

Instalasi

yarn

Harap dicatat, bahwa jika Anda menggunakan Windows, Anda mungkin perlu menjalankan:

 $env :PWD = $( Get-Location ) .Path

Perkembangan

Pertama, jalankan server pengembangan:

yarn dev

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

Edit tata letak di app atau konten dalam data . Dengan pemuatan ulang langsung, halaman-halaman pembaruan otomatis saat Anda mengeditnya.

Perpanjang / Kustomisasi

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

data/authors/default.md - Informasi penulis default (diperlukan). Penulis tambahan dapat ditambahkan sebagai file dalam data/authors .

data/projectsData.js - Data yang digunakan untuk menghasilkan kartu gaya di halaman proyek.

data/headerNavLinks.js - tautan navigasi.

data/logo.svg - Ganti dengan logo Anda sendiri.

data/blog - Ganti dengan posting blog Anda sendiri.

public/static - Simpan aset seperti gambar dan favicons.

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

css/prism.css - Mengontrol gaya yang terkait dengan blok kode. Jangan ragu untuk menyesuaikannya dan menggunakan tema prismj yang Anda sukai misalnya tema prisma.

contentlayer.config.ts - Konfigurasi untuk ContentLayer, termasuk definisi sumber konten dan plugin MDX yang digunakan. Lihat Dokumentasi ContentLayer untuk informasi lebih lanjut.

components/MDXComponents.js - Lewati kode JSX Anda sendiri atau komponen reaksi dengan menentukannya di sini. Anda kemudian dapat menggunakannya langsung di file .mdx atau .md . Secara default, tautan khusus, komponen next/image , komponen Daftar Isi dan bentuk buletin diturunkan. Perhatikan bahwa komponen harus diekspor default untuk menghindari masalah yang ada dengan Next.js.

layouts - templat utama yang digunakan dalam halaman:

• Saat ini ada 3 tata letak pos yang tersedia: PostLayout , PostSimple dan PostBanner . PostLayout adalah tata letak 2 kolom default dengan meta dan informasi penulis. PostSimple adalah versi sederhana dari PostLayout , sementara PostBanner menampilkan gambar spanduk.
• Ada 2 tata letak daftar blog: ListLayout , tata letak yang digunakan dalam versi 1 dari templat dengan bilah pencarian dan ListLayoutWithTags , yang saat ini digunakan dalam versi 2, yang menghilangkan bilah pencarian tetapi menyertakan bilah samping dengan informasi pada tag.

app - Halaman untuk merutekan ke. Baca dokumentasi Next.js untuk informasi lebih lanjut.

next.config.js - Konfigurasi terkait dengan Next.js. Anda perlu menyesuaikan kebijakan keamanan konten jika Anda ingin memuat skrip, gambar dll dari domain lain.

Pos

Konten dimodelkan menggunakan ContentLayer, yang memungkinkan Anda untuk menentukan skema konten Anda sendiri dan menggunakannya untuk menghasilkan objek konten yang diketik. Lihat Dokumentasi ContentLayer untuk informasi lebih lanjut.

Frontmatter

Frontmatter mengikuti standar Hugo.

Silakan merujuk ke contentlayer.config.ts untuk daftar terkini dari bidang yang didukung. Bidang -bidang berikut didukung:

 title (required)
date (required)
tags (optional)
lastmod (optional)
draft (optional)
summary (optional)
images (optional)
authors (optional list which should correspond to the file names in `data/authors`. Uses `default` if none is specified)
layout (optional list which should correspond to the file names in `data/layouts`)
canonicalUrl (optional, canonical url for the post for SEO)

Berikut adalah contoh frontmatter postingan:

 ---
title: 'Introducing Tailwind Nexjs Starter Blog'
date: '2021-01-12'
lastmod: '2021-01-18'
tags: ['next-js', 'tailwind', 'guide']
draft: false
summary: 'Looking for a performant, out of the box template, with all the best in web technology to support your blogging needs? Checkout the Tailwind Nextjs Starter Blog template.'
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
---

Menyebarkan

Halaman GitHub

Alur kerja pages.yml sudah disediakan. Cukup pilih "Tindakan GitHub" di: Settings > Pages > Build and deployment > Source .

Vercel

Cara termudah untuk menggunakan template adalah menggunakan Vercel. Lihatlah dokumentasi penempatan selanjutnya.js untuk lebih jelasnya.

Netlify

Netlify's Next.js Runtime Mengkonfigurasi Mengaktifkan fungsionalitas key next.js di situs web Anda tanpa perlu konfigurasi tambahan. Netlify menghasilkan fungsi tanpa server yang akan menangani fungsionalitas selanjutnya next/images

Lihat Next.js di Netlify untuk nilai konfigurasi yang disarankan dan detail lebih lanjut.

Layanan Hosting Statis (Halaman GitHub / S3 / Firebase dll.)

Berlari:

$ EXPORT=1 UNOPTIMIZED=1 yarn build

Kemudian, gunakan folder yang out atau jalankan npx serve out secara lokal.

Penting

Jika digunakan dengan jalur dasar URL, seperti https://example.org/myblog Anda memerlukan BASE_PATH shell-var tambahan ke perintah build:

$ EXPORT=1 UNOPTIMIZED=1 BASE_PATH=/myblog yarn build

=> Dalam kode Anda, ${process.env.BASE_PATH || ''}/robots.txt akan mencetak "/myblog/robots.txt" di out build (atau hanya /robots.txt if yarn dev , yaitu: di localhost: 3000)

Tip

Atau untuk UNOPTIMIZED=1 , untuk terus menggunakan next/image , Anda dapat menggunakan penyedia optimasi gambar alternatif seperti IMGIX, Cloudinary atau Akamai. Lihat Dokumentasi Optimalisasi Gambar untuk detail lebih lanjut.

Pertimbangkan untuk menghapus fitur -fitur berikut yang tidak dapat digunakan dalam bangunan statis:

1. Komentari headers() dari next.config.js .
2. Hapus folder api dan komponen yang memanggil fungsi sisi server seperti komponen buletin. Tidak diperlukan secara teknis dan situs akan berhasil dibangun, tetapi API tidak dapat digunakan karena mereka adalah fungsi sisi server.

Pertanyaan yang sering diajukan

• Bagaimana cara menambahkan komponen MDX khusus?
• Bagaimana cara menyesuaikan pencarian kbar ?
• Digunakan dengan Docker

Mendukung

Menggunakan template? Dukung upaya ini dengan memberikan bintang di GitHub, berbagi blog Anda sendiri dan memberikan teriakan di Twitter atau menjadi sponsor proyek.

Lisensi

MIT © Timothy Lin