tailwind-nextjs-starter-blog README

The project's README from github.com/timlrx/tailwind-nextjs-starter-blog. As one markdown file: README.md.

tailwind-nextjs-banner

Tailwind Nextjs Starter Blog

GitHub Repo stars GitHub forks Twitter URL Sponsor

Deploy with Vercel

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

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.

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

Sample posts

Quick Start Guide

  1. Clone the repo
npx degit 'timlrx/tailwind-nextjs-starter-blog'
  1. Personalize siteMetadata.js (site related information)
  2. Modify the content security policy in next.config.js if you want to use other analytics provider or a commenting solution other than giscus.
  3. Personalize authors/default.md (main author)
  4. Modify projectsData.ts
  5. Modify headerNavLinks.ts to customize navigation links
  6. Add blog posts
  7. 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

tailwind-nextjs-starter-blog (timlrx/tailwind-nextjs-starter-blog)

tailwind-css
Searching Database…

10.6K ·GitHub
Tailwind-nextjs-starter-blog
What is this?A Next.js and Tailwind CSS blogging starter template, preconfigured for technical writing and positioned as a replacement for existing Jekyll or Hugo personal blogs.
Is this a hosted blogging service, or something I run myself?It's a code template, not a service: you clone the repo, edit the config and markdown files, and deploy the resulting site yourself — the quick start ends with deploying on Vercel.
How do I go from cloning this repo to a live blog?Clone the repo, personalize siteMetadata.js and authors/default.md, tweak projectsData.ts and headerNavLinks.ts, add your posts, and deploy on Vercel; locally the dev server runs via next dev.
Any pitfalls I should know about before starting?Two small ones: on Windows you may need to run an extra command during install, and if you use an analytics or commenting provider other than the default giscus, you must update the content security policy in next.config.js.
Why did the author build this instead of using Jekyll or Hugo?He wanted to port his existing blog to Next.js and Tailwind CSS and found no easy out-of-the-box template, so he created one — aiming for the feature richness of templates like beautiful-jekyll and Hugo Academic but with React's ecosystem and current web development best practices.
Is there an Astro or Remix version?Yes, both exist as community-contributed forks — a Tailwind Astro template and a Tailwind Remix-run starter blog — plus an internationalization variant, but the README explicitly marks these variations as not officially supported.
Who actually uses it?A long showcase of live sites runs on it: personal dev blogs, portfolios, a podcast site and product blogs, including the author's own blog. If your blog uses the template, the README invites you to add it to the V2 examples list via a PR.
What are similar projects?NotionNext, beautiful-jekyll, jekyll-theme-chirpy, astro, Next-js-Boilerplate, react-static, sales-crm, gatsby
Which topics is it in?blogging, tailwind-css, publishing, ssg, jamstack, mdx, rss, static-site, blog, seo, syntax-highlighting, vercel
Creator
timlrx
Size
9.6 MB
Stars
10.6K
Updated
CommitFeb 08Releasev2.4.0Mar 31
Age
5y
Commits · 90 Days