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)

Searching Database…

10.6K ·GitHub
Tailwind-nextjs-starter-blog
这是什么？一个基于 Next.js 和 Tailwind CSS 的博客入门模板，专为技术写作预设好配置，定位是替代现有的 Jekyll 或 Hugo 个人博客。
这是一个托管的博客服务，还是需要我自己运行的？它是一个代码模板，不是服务：你需要克隆仓库、修改配置和 markdown 文件，然后自己部署生成的网站——快速上手指南的最后一步就是部署到 Vercel。
从克隆仓库到博客上线，我该怎么做？克隆仓库，修改 siteMetadata.js 和 authors/default.md，调整 projectsData.ts 和 headerNavLinks.ts，添加你的文章，然后部署到 Vercel；在本地通过 next dev 运行开发服务器。
开始之前有什么需要留意的坑吗？有两个小问题：在 Windows 上安装时可能需要额外运行一条命令；另外，如果你使用的统计分析或评论服务不是默认的 giscus，就必须更新 next.config.js 里的内容安全策略。
作者为什么不直接用 Jekyll 或 Hugo，而要自己开发这个？他想把现有的博客迁移到 Next.js 和 Tailwind CSS，却找不到一个开箱即用的模板，于是自己做了一个——目标是达到 beautiful-jekyll 和 Hugo Academic 这类模板的功能丰富度，同时享受 React 生态和现代 Web 开发的最佳实践。
有 Astro 或 Remix 版本吗？有，两者都有社区贡献的分支版本——一个 Tailwind Astro 模板和一个 Tailwind Remix-run 入门博客，还有一个国际化版本，不过 README 中明确标注这些变体不受官方支持。
实际有哪些人在用它？有很多正在运行的网站在用它：个人开发博客、作品集、播客网站和产品博客，其中包括作者自己的博客。如果你的博客用了这个模板，README 欢迎你通过 PR 把它加进 V2 示例列表。
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