Overview
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.
The blog is designed to be simple and fast. It uses Tailwind CSS for styling and DaisyUI for additional components. The blog is also SEO-friendly with a sitemap and RSS feed.
The blog is deployed on Cloudflare Pages and uses Google Analytics for tracking.
Features
Here are some of the features of this blog:
- Markdown blog posts
- Dark mode
- RSS feed
- SEO
- Table of Content
- Next Article / Previous Article
- Sitemap
- etc.
Tech
This project uses the following tech:
Setup
- Clone this repository
- Setup Environment Variables:
NUXT_PUBLIC_GTAG_ID=G-XXXXXXXXXX
- 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
...
