# Build a blog using Nuxt and Tailwind CSS

URL: https://onthegoalways.com/blog/how-to-create-nuxt-blog
Author: Sachin Ghait
Published: 2021-02-01
Updated: 2026-09-29
Category: Frontend

> **TL;DR:** A walkthrough of how this blog was built using Nuxt, Tailwind CSS, and Tailblocks for pre-made UI components. Covers creating the Nuxt app, adding the content module for Markdown-based blog posts, styling with Tailwind, and displaying blog data dynamically. The post also covers generating a static build and deploying it to Netlify for free hosting with automatic deploys.

In this post I will walk you through how I created this blog

**Version note:** this post shows the original Nuxt 2 setup with Nuxt Content v1 (`$content`). This blog now runs on Nuxt 4 with Nuxt Content v3, where you fetch posts with `queryCollection('blog')` instead. The overall steps are the same.


## Frameworks used

- Nuxt
- Tailwind CSS
- Tailblocks

### What is Nuxt?

Nuxt.js is a free and open source web application framework based on Vue.js, Node.js, Webpack and Babel.js.
You can also create Static sites and server side rendered webapp with nuxt.
It abstracts most of the complex configuration involved in managing things like asynchronous data, middleware, and routing.

## How do I create a Nuxt app?

Create nuxt app using below command

```bash{1,3-5}
yarn create nuxt-app <project-name>
```

You can choose to add nuxt content module while project create.
Or you can add it manually by following the [Nuxt Content installation guide](https://content.nuxt.com/).

```bash{1,3-5}
yarn add @nuxt/content
```

## How do I add ready-made UI blocks from Tailblocks?

Navigate to [tailblocks.cc](https://tailblocks.cc/).
Choose any header footer and content blocks you like.
Add these blocks to nuxt `layouts/default.vue` file

    <div>
        <Header></Header>
        <Nuxt/>
        <Footer></Footer>
    </div>

`<Nuxt/>` will render pages as per routes.
Add `pages/index.vue` and `pages/blog/index.vue` they will serve on `/` and `/blog` route.
Put homepage content in `pages/index.vue` and blog layout in `pages/blog/index.vue`

## Writing Content

create a `content/` directory in your project:

```
content/
  blogs/
    article-1.md
    article-2.md
  home.md
```

In Each `article.md` file you can add your content as below

```
---
title: Introduction
description: Learn how to use @nuxt/content.
---
## Markdown content
more details...
```

## How do I display blog posts?

You need to fetch all posts as below and display in your vue template

```js{1,3-5}
async  asyncData({ $content }) {
	const  posts  =  await  $content('blog').fetch()
	return {
		posts,
	}
},
```

`posts` variable will have all posts from that folder, you can loop over and display them in any format. There are various ready to use blocks on [tailblocks.cc](https://tailblocks.cc/).

Further you can create a `pages/blog/_slug.vue` this will show content for route `/blog/article-1`.
You need to fetch individual post as below and display in your vue template

```js{1,3-5}
async  asyncData({ $content, params }) {
	const  post  =  await  $content('blog', params.slug).fetch()
	return { post }
},
```

## How do I create a static build?

After you have created the blog setup, static build can be generated by using below command

```bash{1,3-5}
nuxt generate //or
npm run generate
```

## Bonus: How do I host it on Netlify?

You can easily host project from github on netlify.

- Go to [www.netlify.com](http://www.netlify.com/) and login or signup.
- Select “New site from git”.
- Choose your provider (e.g. GitHub) — You may need to authenticate here.
- Select the git repository you want to create a site from.
- Select the branch you want to deploy from.
- Choose any commands that need to be run. — _in our case its `npm run generate`_
- Choose the directory that you will publish from. It will contain files such as index.html. — _in our case its `dist`._
- Select “Build Site”.

## How do I host it on Cloudflare Pages?

This blog is now hosted on Cloudflare Pages. In the Pages project I connect the GitHub repository, then set:

- Production branch: `main`
- Build command: `bun install && bun run generate`
- Build output directory: `dist`

Every push to `main` triggers a new deploy automatically. See the [Cloudflare Pages docs](https://developers.cloudflare.com/pages/) for the full setup.

## Source code

- [ssghait007/blog on GitHub](https://github.com/ssghait007/blog)

## Frequently Asked Questions

### How do I fetch posts in Nuxt Content v3?

Use `queryCollection('blog').order('createdAt', 'DESC').all()` inside `useAsyncData`. For one post, use `queryCollection('blog').path(route.path).first()`.

### What is the difference between nuxt build and nuxt generate?

`nuxt build` creates a server app. `nuxt generate` pre-renders every page to static HTML files, which you can host on any static host such as Netlify.

### How much does Netlify hosting cost for a blog like this?

A small static blog fits in Netlify's free plan. Check [Netlify's pricing page](https://www.netlify.com/pricing/) for the current limits.

## References

- [Nuxt](https://nuxt.com/)
- [Nuxt Content](https://content.nuxt.com/)
- [Tailwind CSS](https://tailwindcss.com/)
- [Tailblocks](https://tailblocks.cc/)
- [Netlify](https://www.netlify.com/)