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!
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.
/resume
page. (source code)/snippets
, /books
pages, add ProfileCard
, CareerTimeline
components and many more.Using the template? Feel free to create a PR and add your blog to this list.
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.
mdx-embed
, view count, reading minutes and more.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.
npx degit 'timlrx/tailwind-nextjs-starter-blog'
siteMetadata.js
(site related information)next.config.js
if you want to use
other analytics provider or a commenting solution other than giscus.authors/default.md
(main author)projectsData.ts
headerNavLinks.ts
to customize navigation links
yarn
Please note, that if you are using Windows, you may need to run:
$env:PWD = $(Get-Location).Path
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 you edit them.
data/siteMetadata.js
- contains most of the site related information which should be modified for a user's need.
data/authors/default.md
- default author information (required). Additional authors can be added as files in data/authors
.
data/projectsData.js
- data used to generate styled card on the projects page.
data/headerNavLinks.js
- navigation links.
data/logo.svg
- replace with your own logo.
data/blog
- replace with your own blog posts.
public/static
- store assets such as images and favicons.
tailwind.config.js
and css/tailwind.css
- tailwind configuration and stylesheet which can be modified to change the overall look and feel of the site.
css/prism.css
- controls the styles associated with the code blocks. Feel free to customize it and use your preferred prismjs theme e.g. prism themes.
contentlayer.config.ts
- configuration for Contentlayer, including definition of content sources and MDX plugins used. See Contentlayer documentation for more information.
components/MDXComponents.js
- pass your own JSX code or React component by specifying it over here. You can then use them directly in the .mdx
or .md
file. By default, a custom link, next/image
component, table of contents component and Newsletter form are passed down. Note that the components should be default exported to avoid existing issues with Next.js.
layouts
- main templates used in pages:
PostLayout
, PostSimple
and PostBanner
. PostLayout
is the default 2 column layout with meta and author information. PostSimple
is a simplified version of PostLayout
, while PostBanner
features a banner image.ListLayout
, the layout used in version 1 of the template with a search bar and ListLayoutWithTags
, currently used in version 2, which omits the search bar but includes a sidebar with information on the tags.app
- pages to route to. Read the Next.js documentation for more information.
next.config.js
- configuration related to Next.js. You need to adapt the Content Security Policy if you want to load scripts, images etc. from other domains.
Content is modelled using Contentlayer, which allows you to define your own content schema and use it to generate typed content objects. See Contentlayer documentation for more information.
Frontmatter follows Hugo's standards.
Please refer to contentlayer.config.ts
for an up to date list of supported fields. The following fields are supported:
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)
Here's an example of a post's frontmatter:
---title: 'Introducing Tailwind Nexjs Starter Blog'date: '2021-01-12'lastmod: '2021-01-18'tags: ['next-js', 'tailwind', 'guide']draft: falsesummary: '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: PostLayoutcanonicalUrl: https://tailwind-nextjs-starter-blog.vercel.app/blog/introducing-tailwind-nextjs-starter-blog---
A pages.yml
workflow is already provided. Simply select "GitHub Actions" in: Settings > Pages > Build and deployment > Source
.
The easiest way to deploy the template is to deploy on Vercel. Check out the Next.js deployment documentation for more details.
Netlify’s Next.js runtime configures enables key Next.js functionality on your website without the need for additional configurations. Netlify generates serverless functions that will handle Next.js functionalities such as server-side rendered (SSR) pages, incremental static regeneration (ISR), next/images
, etc.
See Next.js on Netlify for suggested configuration values and more details.
Run:
$ EXPORT=1 UNOPTIMIZED=1 yarn build
Then, deploy the generated out
folder or run npx serve out
it locally.
[!IMPORTANT] If deploying with a URL base path, like https://example.org/myblog you need an extra
BASE_PATH
shell-var to the build command:
$ EXPORT=1 UNOPTIMIZED=1 BASE_PATH=/myblog yarn build=> In your code,
${process.env.BASE_PATH || ''}/robots.txt
will print"/myblog/robots.txt"
in theout
build (or only/robots.txt
ifyarn dev
, ie: on localhost:3000)
[!TIP] Alternatively to
UNOPTIMIZED=1
, to continue usingnext/image
, you can use an alternative image optimization provider such as Imgix, Cloudinary or Akamai. See image optimization documentation for more details.
Consider removing the following features that cannot be used in a static build:
headers()
from next.config.js
.api
folder and components which call the server-side function such as the Newsletter component. Not technically required and the site will build successfully, but the APIs cannot be used as they are server-side functions.Using the template? Support this effort by giving a star on GitHub, sharing your own blog and giving a shoutout on Twitter or becoming a project sponsor.
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!
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.
/resume
page. (source code)/snippets
, /books
pages, add ProfileCard
, CareerTimeline
components and many more.Using the template? Feel free to create a PR and add your blog to this list.
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.
mdx-embed
, view count, reading minutes and more.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.
npx degit 'timlrx/tailwind-nextjs-starter-blog'
siteMetadata.js
(site related information)next.config.js
if you want to use
other analytics provider or a commenting solution other than giscus.authors/default.md
(main author)projectsData.ts
headerNavLinks.ts
to customize navigation links
yarn
Please note, that if you are using Windows, you may need to run:
$env:PWD = $(Get-Location).Path
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 you edit them.
data/siteMetadata.js
- contains most of the site related information which should be modified for a user's need.
data/authors/default.md
- default author information (required). Additional authors can be added as files in data/authors
.
data/projectsData.js
- data used to generate styled card on the projects page.
data/headerNavLinks.js
- navigation links.
data/logo.svg
- replace with your own logo.
data/blog
- replace with your own blog posts.
public/static
- store assets such as images and favicons.
tailwind.config.js
and css/tailwind.css
- tailwind configuration and stylesheet which can be modified to change the overall look and feel of the site.
css/prism.css
- controls the styles associated with the code blocks. Feel free to customize it and use your preferred prismjs theme e.g. prism themes.
contentlayer.config.ts
- configuration for Contentlayer, including definition of content sources and MDX plugins used. See Contentlayer documentation for more information.
components/MDXComponents.js
- pass your own JSX code or React component by specifying it over here. You can then use them directly in the .mdx
or .md
file. By default, a custom link, next/image
component, table of contents component and Newsletter form are passed down. Note that the components should be default exported to avoid existing issues with Next.js.
layouts
- main templates used in pages:
PostLayout
, PostSimple
and PostBanner
. PostLayout
is the default 2 column layout with meta and author information. PostSimple
is a simplified version of PostLayout
, while PostBanner
features a banner image.ListLayout
, the layout used in version 1 of the template with a search bar and ListLayoutWithTags
, currently used in version 2, which omits the search bar but includes a sidebar with information on the tags.app
- pages to route to. Read the Next.js documentation for more information.
next.config.js
- configuration related to Next.js. You need to adapt the Content Security Policy if you want to load scripts, images etc. from other domains.
Content is modelled using Contentlayer, which allows you to define your own content schema and use it to generate typed content objects. See Contentlayer documentation for more information.
Frontmatter follows Hugo's standards.
Please refer to contentlayer.config.ts
for an up to date list of supported fields. The following fields are supported:
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)
Here's an example of a post's frontmatter:
---title: 'Introducing Tailwind Nexjs Starter Blog'date: '2021-01-12'lastmod: '2021-01-18'tags: ['next-js', 'tailwind', 'guide']draft: falsesummary: '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: PostLayoutcanonicalUrl: https://tailwind-nextjs-starter-blog.vercel.app/blog/introducing-tailwind-nextjs-starter-blog---
A pages.yml
workflow is already provided. Simply select "GitHub Actions" in: Settings > Pages > Build and deployment > Source
.
The easiest way to deploy the template is to deploy on Vercel. Check out the Next.js deployment documentation for more details.
Netlify’s Next.js runtime configures enables key Next.js functionality on your website without the need for additional configurations. Netlify generates serverless functions that will handle Next.js functionalities such as server-side rendered (SSR) pages, incremental static regeneration (ISR), next/images
, etc.
See Next.js on Netlify for suggested configuration values and more details.
Run:
$ EXPORT=1 UNOPTIMIZED=1 yarn build
Then, deploy the generated out
folder or run npx serve out
it locally.
[!IMPORTANT] If deploying with a URL base path, like https://example.org/myblog you need an extra
BASE_PATH
shell-var to the build command:
$ EXPORT=1 UNOPTIMIZED=1 BASE_PATH=/myblog yarn build=> In your code,
${process.env.BASE_PATH || ''}/robots.txt
will print"/myblog/robots.txt"
in theout
build (or only/robots.txt
ifyarn dev
, ie: on localhost:3000)
[!TIP] Alternatively to
UNOPTIMIZED=1
, to continue usingnext/image
, you can use an alternative image optimization provider such as Imgix, Cloudinary or Akamai. See image optimization documentation for more details.
Consider removing the following features that cannot be used in a static build:
headers()
from next.config.js
.api
folder and components which call the server-side function such as the Newsletter component. Not technically required and the site will build successfully, but the APIs cannot be used as they are server-side functions.Using the template? Support this effort by giving a star on GitHub, sharing your own blog and giving a shoutout on Twitter or becoming a project sponsor.