My new static blog using Next.js, TypeScript, and tailwindcss

nextjs tailwindcss blog

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 post using indigo theme

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, TypeScript, and tailwindcss. So I decided to use that stack and, on top of that, unified.js and remark 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 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 and remark-highlight

Metadata

I can easily add metadata to my blog posts by including the following heading at the top:

---
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

Yellow theme applied

post using yellow theme

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 on Github with a detailed README that includes clear instructions for initial setup, customization, static export, and roadmap. So if you want to have a blog, and don't have time to build it from scratch, check out my repo.