/nuxt-blog

Nuxt Blog is a blog web application built with Nuxt.js and Tailwind CSS.

Primary LanguageVue

wakatime

Nuxt Blog

Nuxt Blog is a blog web application built with Nuxt.js and Tailwind CSS. It uses the Nuxt Content module to load markdown files as blog posts.

Features

  • Markdown blog posts
  • Dark mode
  • RSS feed
  • SEO
  • Table of Content
  • Next Article / Previous Article
  • Sitemap
  • etc.

Setup

  1. Clone this repository
  2. Setup Environment Variables:
NUXT_PUBLIC_GTAG_ID=G-XXXXXXXXXX
  1. Start the server:
# Recommended Node.js version: >=20.0.0

# Make sure to install the dependencies:
yarn install

# Start the development server on http://localhost:3000
yarn dev

# Build the application for production:
yarn build

# Locally preview production build:
yarn preview

Blog Post Template

For a new blog post, create a new markdown file in the content/posts directory. The file name should be the slug of the post. For example, hello-world.md will have the slug hello-world.

Following by Nuxt Content's doc, the markdown file should have the following frontmatter:

---
title: 'My Page Title'
description: 'What a lovely page.'
image:
  src: '/assets/image.jpg'
  alt: 'An image showcasing My Page.'
  width: 400
  height: 300
head:
  meta:
    - name: 'keywords'
      content: 'nuxt, vue, content'
    - name: 'robots'
      content: 'index, follow'
    - name: 'author'
      content: 'NuxtLabs'
    - name: 'copyright'
      content: '© 2022 NuxtLabs'
---

## Sub-title 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl eu aliquam ultricies, massa nunc aliquet nisi, vitae luctus nunc nunc eu nisi. Donec euismod, nisl eu aliquam ultricies, massa nunc aliquet nisi, vitae luctus nunc nunc eu nisi.

## Sub-title 2
...

Learn More

This project uses the following tech: