Your First Blog Website using NextJS + TailwindCSS

How to Make Blog Website Using NextJS & TailwindCSS

Install

Clone the Official Tailwind Nextjs Starter Blog Template from GitHub repository Tailwind Nextjs Starter Blog Template.

• Click use this template to make a new repository from template.

• You can download directly the .zip or clone the template using git clone

git clone https://github.com/timlrx/tailwind-nextjs-starter-blog.git

• Install required dependencies

npm i

Development

First, run the development server:

npm start

or

npm run dev

Open localhost:3000 with your browser to see the website.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

Features

• Easy styling customization with Tailwind 3.0 and primary color attribute
• Near perfect lighthouse score - Lighthouse report
• Lightweight, 45kB first load JS, uses Preact in production build
• Mobile-friendly view
• Light and dark theme
• Self-hosted font with Fontsource
• Supports plausible, simple analytics and google analytics
• MDX - write JSX in markdown documents!
• 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
• Automatic image optimization via next/image
• Flexible data retrieval with mdx-bundler
• Support for tags - each unique tag will be its own page
• Support for multiple authors
• Blog templates
• TOC component
• Support for nested routing of blog posts
• Newsletter component with support for mailchimp, buttondown, convertkit, klaviyo and revue
• Supports giscus, utterances or disqus
• Projects page
• Preconfigured security headers
• SEO friendly with RSS feed, sitemaps and more!

Now you can redesign with your creativity! Enjoy!~