Blog Template using NextJs, Typescript and Tailwind CSS.

This is a starter blog template using Next.js, Typescript and Tailwind CSS, maybe one of the most feature-rich Next.js component based blogging template. This template is configured with the latest technologies and has many versatile component which allows you to write your article with ease and also provide some design customization. Easily to configure and setup and it is completely static so there is no need to setup a server just export the project to create static file and deploy it on any static site hosting service. A good replacement to existing heavy wordpress or blogger websites.

Check out the demo website for all the required documentation to get started.

Motivation

We wanted to create and start a blog with as little investment as possible and the criteria was that it should be fast, static, easy to work on and no backend or server required, so we started working on a blog for ourself and in the middle we thought of making it in such a way that it is easy for others also including non techies to just simply download the code and start their own blog.

We wanted to make it as feature rich as medium or dev.to, so we took some design ideas and inspirations from them and tried to make a template which suits our need and might help others too.

In this template we have used Next.js SSG to create static HTML files which can be hosted on firebase or any static site hosting service. There is also options like vercel for hosting Next.js dynamic webistes but we wanted this template to be easy to use for any non techie person too, so we explored the option of static site generation.

Features

• Easy styling customization with Tailwind CSS.
• Near perfect lighthouse and page speed insights score.
• Fully responsive and mobile friendly.
• Light and dark theme.
• Support for multiple authors.
• Minimilistic Blog templates, Default and Centered Layout and Components. You can check all the list of components here.
• Static site generation.
• SEO friendly including metadata, Open Graph tags with Next SEO.

Requirements

• Node.js
• NPM
• Firebase for hosting
• VS Code for editing
• Imp VS Code plugins:
  Path Intellisense ,
  Tailwind CSS IntelliSense

Why not Wordpress or other CMS.

Well, first of all we wanted a highly customizable code so by default we didn't wanted to use any template or CMS as after a while it becomes quite difficult to change and modify the themes. Secondly, we wanted to be able to work offline and then deploy the article after we are done with the work.
We had some experience working with wordpress in the past and it was a bit slow and we felt our hands were tied, with this template we can add & remove features and mould it in any ways we desire.You can find this project on Github.
A live demo is hosted on nextjs-simple-blog-template.web.app, this includes demo of all components, layouts, tutorials to setup your blog and how to deploy it on firebase.

This is an open source project and everyone is welcome to contribute. Feel free to open an issue, if you have any questions or incase you find a bug. Create your versions of this template and help the community, also if you are using our template a little credit will be much appreciated.

Created by Rupali Yadav and Mayur Nalwala from WebExpe with ♥