<p align="center">
  <a href="https://blog.nurriyad.com" target="_blank">
    <img  src="./app/assets/images/dark.png">
  </a>
</p>

<h1 align="center">Nuxt Blog A Personal Blog Site</h1>

### Built with

<p align="center">
    <img width="200" src="./app/assets/images/logo.png">
</p>

Nuxt Blog built with [Nuxt4](https://nuxt.com), [Nuxt-Content3](https://content.nuxt.com/), [Vue3](https://vuejs.org) & [TailwindCss](https://tailwindcss.com/)

## Features

- Write blog with markdown file
- Auto generate category from blog post
- Blog list page with search and pagination
- About me page for user info
- Auto generate table of content for blog post
- Auto generate Sitemap
- Url preview with Nuxt ogImage
- Dark and light mode
- Server Side Rendered(SSR) with Nuxt4
- RSS feed

## How to Make This Blog Template Yours in 5 Minutes

- Clone this repo or use it as a template
- Go to `./app/data/index.ts` file & add your personal info
- Then head over to the `./content/blogs` folder to add new blogs
- Voilà! You've got a personalized blog site!

## Preview

<p align="center">
  <a href="https://blog.nurriyad.com" target="_blank">
    <img width="1090" src="./app/assets/images/preview1.png">
    <img width="1090" src="./app/assets/images/preview2.png">
    <img width="1090" src="./app/assets/images/preview3.png">
    <img width="1090" src="./app/assets/images/preview4.png">
    <br>
    Live Demo
  </a>
</p>

## Demo

https://blog.nurriyad.com

> Hosted on [Vercel](https://vercel.com/): `npm run build`

## Build Setup

**Requires Node.js 20.19+**

```bash
# install dependencies
yarn install

# serve in dev mode, with hot reload at localhost:5173
yarn run dev

# build for production
yarn run build

# serve in production mode
yarn run preview

```
