Tailwind Nextjs Starter Blog
This is a Next.js, Tailwind CSS blogging starter template. Version 2 is based on Next App directory with React Server Component and uses Contentlayer to manage markdown content.
Probably the most feature-rich Next.js markdown blogging template out there. Easily configurable and customizable. Perfect as a replacement to existing Jekyll and Hugo individual blogs.
Check out the documentation below to get started.
Facing issues? Check the FAQ page and do a search on past issues. Feel free to open a new issue if none has been posted previously.
Feature request? Check the past discussions to see if it has been brought up previously. Otherwise, feel free to start a new discussion thread. All ideas are welcomed!
Variations
Note: These are community contributed forks using different frameworks or with significant changes to the codebase - not officially supported.
Astro alternative - Tailwind Astro Template.
Remix-run alternative - Tailwind Remix-run Starter Blog Template.
Internationalization support - Template with i18n and source code.
Examples V2
- Demo Blog - this repo
- My personal blog - modified to auto-generate blog posts with dates
- Karhdo's Blog - Karhdo's Blog - Karhdo's Coding Adventure (source code)
- SOTO's Blog - A more personalized personal website upgraded from V1 (source code)
- Prabhu's Blog - Prabhu's Personal website with blog (source code)
- Rabby Hasan's Blog - Rabby Hasan's personal blog about full stack development with cloud (source code)
- enscribe.dev - enscribe's personal blog; cybersecurity shenanigans, frontend webdev, etc. (source code)
- dalelarroder.com - Dale Larroder's personal website upgraded from V1 (source code)
- thetalhatahir.com - Talha Tahir's personal blog. Added article thumbnails, linkedIn card, Beautiful hero content, technology emoticons.
- homing.so - Homing's personal blog about the stuff he's learning (source code)
- zS1m's Blog - zS1m's personal blog for recording and sharing daily learning technical content (source code)
- dariuszwozniak.net - Software development blog (source code)
- dreams.plus - Blog site for some thoughts and records for life and technology.
- francisaguilar.co blog - Francis Aguilar's personal blog that talks about tech, fitness, and personal development.
- Min71 Dev Blog - Personal blog about Blockchain, Development and etc. (source code)
- Bryce Yu's Blog - Bryce Yu's personal Blog about distributed system, database, and web development. (source code)
- Remote Startup Senpai Anime Series Website - Landing page for the anime series Remote Startup Senpai.
- Secret Base - Jac Hsu's personal Blog.talks about tech, thought, and life in general.
- Zsebinformatikus - The information superhighway guide blog.
- Anton Morgunov's Blog - talking about science without oversimplifications or why theoretical and computational chemistry is cool.
- Hans Blog - Hans' personal blog, front-end technology, gallery and travel diary 中文. (source code)
- London Tech Talk - A podcast exploring technology trends and expatriate living experiences. - 日本語
- CRUD Flow Blog - A technical blog about AI, Cloud Engineering, Data Science and Personal development
- Trillium's Blog - Modified to render resume pdf on
/resume page. (source code)
- Wujie's Blog: 旅行者计划 - Wujie's personal digital garden (source code)
- Xiaodong's Blog - Xiaodong's personal blog about front-end technology, and life. 「中文」(source code)
- Azurtelier.com - Amos's personal website for tech, music, AI illustrations, etc. [English/中文] (Source code)
- JoshHaines.com - Personal website for Josh Haines. (source code)
- Jigu's Blog - Jigu's personal blog about tech, crypto, golang, and life. 「中文」
- andrewsam.xyz - Andrew's Personal website using ShadCN, Prisma, MongoDB, Auth.js, Resume Page, Custom Experience timeline and technologies components. (source code)
- Rulli Damara Putra's Portfolio - Rully's personal blog and portfolio.
- blog.taoluyuan.com 套路猿 - A personal tech blog that supports multi-theme switching. 「中英」
- LyricsDecode.com - A song lyrics website offering original lyrics, Romanisation, and English translations with customisable viewing options.
- bmacharia.com - Benson Macharia's technical blog about Cybersecurity and IT Risk Management.
- armujahid.me - Abdul Rauf's personal blog about tech and random stuff.
- leohuynh.dev - 🇻🇳 Leo's dev blog – stories, insights, and ideas. Add
/snippets, /books pages, add ProfileCard, CareerTimeline components and many more. (source)
- OpenSats Blog - A 501(c)(3) public charity which aims to sustainably fund free and open-source projects. (source code)
- Schedles Blog - Social media scheduling tips, strategies, and product updates for content creators. (Project Link)
- YawDev Blog - IT-Agency / Software Development. Blog about tech and business (Project Link)
- Engineering Notes - Jonas Vetterle Personal Website & Blog. I'm writing articles about software engineering that interest me, including AI and Quantum Computing
- Screenager.dev - Personal Website as Portfolio & Blog. Documenting my learning journey and some guides.
- kezhenxu94's blog - Blogging about dev, tips & tricks, tutorials and more.
- Parminder's blog - Thoughts on software development, life and more.
- wheelcircuit.com - Automotive YouTube News & Videos blog, updated daily.
- taitrd.com - Tai's personal dev blog, technologies and coding activity with Dynamodb practice (source code).
- Shelton's Blog - Sharing insights on TypeScript full-stack development (Next.js, React, Hono, Supabase), web crawlers, and other cutting-edge technologies.
- Culture DevOps - Technical blog on DevOps practices and tools (source code).
- InnovateWire Blog - A tech blog about software automation and automation tools (Project Link)
- MichaelScheiwiller.com - Mix of software and data engineering blog as well as personal notes and updates
- Wahyu Ikbal Personal Website - Personal website with blog and ai feature, share about Technology literacy (source code)
- ByteGeometry Blog - Software development blog about tech trends and business growth. AI and web-apps development (Project Link)
- Farhad's Blog - Farhad's personal website sharing tech news and insights on emerging technologies, with a focus on AI and Data Science (Project Link)
- Utanzu Cybersecurity – A thriving community where mentorship and expert training help cybersecurity professionals unlock their full potential and advance their careers.
- trungtmnguyen.com - 🇻🇳 Trung's personal and technical blogs – some idea about me, tips, ideas and learned. Add some custom components, like: UnderlineHoverLink, Timeline, neon-border styles and will have more in the future. (source)
- Ryan Fitton's Blog – A custom theme version with 'Portfolio' section. Used as a personal Blog/Portfolio for development projects. (source code)
- ktovoz.com - Kto's personal blog, sharing life, technology. Added article categories and article directory navigation 「中文」
Using the template? Feel free to create a PR and add your blog to this list.
Examples V1
v1-blogs-showcase.webm
Thanks to the community of users and contributors to the template! We are no longer accepting new blog listings over here. If you have updated from version 1 to version 2, feel free to remove your blog from this list and add it to the one above.
- Aloisdg's cookbook - with pictures and recipes!
- GautierArcin's demo with next translate - includes translation of mdx posts, source code
- David Levai's digital garden - customized design and added email subscriptions
- thvu.dev - Added
mdx-embed, view count, reading minutes and more.
- irvin.dev - Irvin Lin's personal site. Added YouTube embedding.
- KirillSo.com - Personal blog & website.
- slightlysharpe.com - Tincre's main company blog
- blog.b00st.com - b00st.com's main music promotion blog
- astrosaurus.me - Ephraim Atta-Duncan's Personal Blog
- dhanrajsp.me - Dhanraj's personal site and blog.
- blog.r00ks.io - Austin Rooks's personal blog (source code).
- honghong.me - Tszhong's personal website (source code)
- marceloformentao.dev - Marcelo Formentão personal website (source code).
- abiraja.com - with a runnable JS code snippet component!
- bpiggin.com - Ben Piggin's personal blog
- maqib.cn - A blog of Chinese front-end developers 狂奔小马的博客 (源码)
- ambilena.com - Electronic Music Blog & imprint for upcoming musicians.
- techipedia - Simple blogging progressive web app with custom installation button and top progress bar
- reubence.com - Reuben Rapose's Digital Garden
- axolo.co/blog - Engineering management news & axolo.co updates (with image preview for article in the home page)
- musing.vercel.app - Parth Desai's personal blog (source code)
- onyourmental.com - Curtis Warcup's website for the On Your Mental Podcast (source code)
- cwarcup.com - Curtis Warcup's personal website and blog (source code).
- jmalvarez.dev - José Miguel Álvarez's personal blog (source code)
- justingosses.com - Justin Gosses's personal website and blog (source code)
- raphaelchelly.com - Raphaël Chelly's personal website and blog (source code)
- kaveh.page - Kaveh Tehrani's personal blog. Added tags directory, profile card, time-to-read on posts directory, etc.
- drakerossman.com - Drake Rossman's blog about NixOS, Rust, Software Architecture and Engineering Management, as well as general musings.
- meamenu.com - Landing page and product blog starting from this template. It also uses framer-motion for animations, custom layout templates, waline for blog comments and primereact forms [Ita]
- giovanni.orciuolo.it - Giovanni Orciuolo's personal website, blog and everything nerd.
Motivation
I wanted to port my existing blog to Nextjs and Tailwind CSS but there was no easy out of the box template to use so I decided to create one. Design is adapted from Tailwindlabs blog.
I wanted it to be nearly as feature-rich as popular blogging templates like beautiful-jekyll and Hugo Academic but with the best of React's ecosystem and current web development's best practices.
Features
- Next.js with Typescript
- Contentlayer to manage content logic
- Easy styling customization with Tailwind 3.0 and primary color attribute
- MDX - write JSX in markdown documents!
- Near perfect lighthouse score - Lighthouse report
- Lightweight, 85kB first load JS
- Mobile-friendly view
- Light and dark theme
- Font optimization with next/font
- Integration with pliny that provides:
- Multiple analytics options including Umami, Plausible, Simple Analytics, Posthog and Google Analytics
- Comments via Giscus, Utterances or Disqus
- Newsletter API and component with support for Mailchimp, Buttondown, Convertkit, Klaviyo, Revue, Emailoctopus and Beehiiv
- Command palette search with Kbar or Algolia
- Server-side syntax highlighting with line numbers and line highlighting via rehype-prism-plus
- Math display supported via KaTeX
- Citation and bibliography support via rehype-citation
- Github alerts via remark-github-blockquote-alert
- Automatic image optimization via next/image
- Support for tags - each unique tag will be its own page
- Support for multiple authors
- 3 different blog layouts
- 2 different blog listing layouts
- Support for nested routing of blog posts
- Projects page
- Preconfigured security headers
- SEO friendly with RSS feed, sitemaps and more!
Sample posts
Quick Start Guide
- Clone the repo
npx degit 'timlrx/tailwind-nextjs-starter-blog'
- Personalize
siteMetadata.js (site related information)
- Modify the content security policy in
next.config.js if you want to use
other analytics provider or a commenting solution other than giscus.
- Personalize
authors/default.md (main author)
- Modify
projectsData.ts
- Modify
headerNavLinks.ts to customize navigation links
- Add blog posts
- Deploy on Vercel
Installation
yarn
Please note, that if you are using Windows, you may need to run:
$env:PWD = $(Get-Location).Path
Development
First, run the development server:
yarn dev
Open http://localhost:3000 with your browser to see the result.
Edit the layout in app or content in data. With live reloading, the pages auto-updates as y
Это стартовый шаблон для блога на Next.js и Tailwind CSS, заранее настроенный для технических текстов и позиционируемый как замена существующих личных блогов на Jekyll или Hugo.