Next.js - TypeScript - tailwindcss blog boilerplate
Tags: javascript, react, typescript, showdev
Published: 2021-01-12 00:00:00

---
title: Next.js - TypeScript - tailwindcss blog boilerplate
description: I built a boilerplate for my personal blog focusing on developer experience. You can use it for your blog.
tags: js, react, typescript, showdev
cover_image: https://i.imgur.com/JbzQL2y.png
published: true
date: '2021-01-12'
theme: 'pink'
canonical_url: 'https://maurogarcia.dev/posts/my-new-static-blog-using-nextjs-typescript-and-tailwind-css/'
---

In 2019, my goal was to generate content regularly, and during four months, I managed to create a post per week. 

I must say that it was a great experience and I learned a lot along the way.
But in 2020, finishing my university studies became my top priority in order to get more time for my side-projects and for content creation. So I decided to stop blogging for a while.

Now that that chapter of my life is finally closed, my main focus for this year will be content creation. And even though I always share my content on DEV, I built my own blog: 

[Link to my blog](https://maurogarcia.dev)
![post using indigo theme](https://i.imgur.com/BaKbzNU.gif)

I thought a lot and I came with a list of qualities that I wanted for my blog:
- Easy to share with others
- Must be simple and minimalist
- Great developer experience
- Must be easy to create or edit content
- Easy to export/publish
- Fast
- Extensible
- DEV friendly: Easy to export to DEV

When I thought about what does it mean a great developer experience for me, the first things that came to my mind were: [Next.js](https://nextjs.org/), [TypeScript](https://www.typescriptlang.org/), and [tailwindcss](https://tailwindcss.com/). So I decided to use that stack and, on top of that, [unified.js](https://unifiedjs.com/) and [remark](https://remarkjs.com/#1) to implement a markdown parser that includes syntax highlight using highlight.js

Here is a detailed list of all the features that I decided to include on my MVP:

## TypeScript 
Applied to the entire project and ready to be used in any custom component.

## TailwindCSS 2.0.2
The entire blog was built using tailwindcss. The [typography plugin](https://tailwindcss.com/docs/typography-plugin) was also used to generate beautiful typographic defaults to any vanilla HTML on my posts.

## Markdown support 
To create a new post, I just need to create a new markdown file within the posts folder located at the root of my project.

### Syntax highlight
All my posts will include syntax highlight thanks to [unified.js](https://github.com/unifiedjs/unified) and [remark-highlight](https://github.com/remarkjs/remark-highlight.js?files=1)

### Metadata
I can easily add metadata to my blog posts by including the following heading at the top:
```md
---
title: 'Title for my blog post'
date: '2021-01-07'
description: 'Description of my blog posts'
coverUrl: 'https://path/to/your/post/cover/image.png'
tags: 'nextjs,tailwindcss,markdown'
theme: 'indigo'
---
```
### Themes
By adding the "theme" metadata at the top of my posts, I can change the accent color. This feature uses the tailwindcss colors behind the scene so I can choose between red, green, blue, indigo, yellow, etc.

**Indigo theme applied**

![post using indigo theme](https://i.imgur.com/IEaBMys.png)

**Yellow theme applied**

![post using yellow theme](https://i.imgur.com/hbjW5vN.png)

## Responsive design
The entire blog was carefully optimized to look good on any screen.

## Font Awesome
The project uses font awesome for the social links and those included in the post header.

# You can use my boilerplate! 
It was a lot of fun building my blog with all those features, but my vision was to also serve other devs who needed their own blog. That's why I decided to share the boilerplate for my blog:

{% github mauro-codes/nextjs-tailwindcss-blog-starter %} 

The README file includes clear instructions for initial setup, [customization](https://github.com/mauro-codes/nextjs-tailwindcss-blog-starter/#Customization), static export, and [roadmap](https://github.com/mauro-codes/nextjs-tailwindcss-blog-starter/#Roadmap).
So if you want to have a blog, and don't have time to build it from scratch, check out my repo.
 
### I would love to hear your thoughts about this boilerplate! 
### What features do you think I could add to the following releases? 
### Please let me know in the comments below :thumbsdown: