Tailwind Resources Logo Tailwind Resources
Blog Next screenshot

Blog Next

Author Avatar Theme by Bketelsen
Updated: 10 Mar 2021
13 Stars

NextJS/Tailwind/Strapi

Github Live Preview

Categories

Nextjs React Styled components

Overview:

The tailwind-nextjs-banner is a Next.js and Tailwind CSS blogging starter template that is designed to make technical writing easy. It is highly customizable and easily configurable, making it a great option for replacing existing Jekyll and Hugo individual blogs. Inspired by Lee Robinson’s blog and adapted from Tailwindlabs blog, it offers nearly the same feature-rich experience as popular blogging templates like beautiful-jekyll and Hugo Academic, while leveraging React’s ecosystem and current web development best practices.

Features:

  • Easy styling customization with Tailwind 2.0: Allows for easy customization of the blog’s styling using Tailwind CSS.
  • Near perfect lighthouse score: Achieves a high lighthouse score, indicating optimized performance and user experience.
  • Lightweight and mobile-friendly: Lightweight with a 43kB first load JS and a mobile-friendly view.
  • MDX support: Supports writing JSX in markdown documents, allowing for more flexibility in content creation.
  • Server-side syntax highlighting: Provides syntax highlighting for code blocks on the server side using rehype-prism.
  • Math display support: Supports math typesetting via KaTeX.
  • Automatic image optimization: Automatically optimizes images using next/image for improved performance.
  • Flexible data retrieval: Offers flexible data retrieval using next-mdx-remote.
  • Tag support: Supports tags, where each unique tag will have its own page.
  • Projects page: Includes a projects page to showcase projects.
  • SEO friendly: SEO friendly with support for RSS feed, sitemaps, and more.

Installation:

To install the tailwind-nextjs-banner theme, follow these steps:

  1. Fork this project.
  2. Rename the project to .github.io.
  3. Personalize siteMetadata.json by modifying it with the site-related information you need.
  4. Modify projectsData.js to personalize the data used to generate styled cards on the projects page.
  5. Customize the navigation links by modifying headerNavLinks.js.
  6. Replace logo.svg with your own logo.
  7. Replace the contents of blog with your own blog posts.
  8. Use the /public/static directory to store assets like images and favicons.
  9. Customize the tailwind.css file to change the overall look and feel of the site.
  10. To add other icons, copy an SVG file from Simple Icons to the social-icons folder and map them in index.js.
  11. To pass your own JSX code or React component, modify MDXComponents.js. You can then call them directly in .mdx or .md files. By default, a custom link and image component is provided.
  12. The theme includes main templates in the layouts folder and various pages in the pages folder. Refer to the Next.js documentation for more information on how to use and customize these.

Once the theme has been customized to your liking, you can deploy it on Vercel.

Summary:

The tailwind-nextjs-banner is a Next.js and Tailwind CSS blogging starter template that offers a feature-rich experience for technical writing. With easy styling customization, support for MDX, server-side syntax highlighting, and more, it provides a modern and customizable solution for creating a personal blog. Additionally, the theme is lightweight, mobile-friendly, and SEO friendly, making it a versatile option for bloggers looking to migrate or start a blog using Next.js and Tailwind CSS.