nuxt-tailwind-blog

This project was inspired by VuePress, but based on Nuxt.js

Introduction

Supporting nuxt universal mode and static hosting

This side project using the following packages:

• markdown-it: This project uses markdown-it as the Markdown renderer
• Prism: This project uses Prism to highlight language syntax in Markdown code blocks
• Tailwind CSS: A utility-first CSS framework
• PurgeCSS: A tool to remove unused CSS
• vue-automatic-import-loader: A tool to automatically import Vue components by using a match function
• @nuxtjs/gtm: Google Tag Manager Module for Nuxt.js
• @nuxtjs/robots: a middleware to generate a robots.txt file
• @nuxtjs/sitemap: Automatically generate or serve dynamic sitemap.xml

Usage

At first, you should create .env file at root directory.

The following environment variables are necessary:

BASE_URL=http://localhost:3000
GTM_ID=GTM-XXX
GOOGLE_SITE_VERIFICATION=XXXXXXXXXXXXXXXXXXXXX

If you don't need GTM_ID and GOOGLE_SITE_VERIFICATION, you can turn off in nuxt.config.js

Nuxt Generate Mode

Before you generate static html by script yarn generate, you should run script yarn start for running the backend API.

Build Setup

# install dependencies
$ yarn install

# serve with hot reload at localhost:3000
$ yarn dev

# build for production and launch server
$ yarn build
$ yarn start

# generate static project
$ yarn generate

Demo

Deployment

You can easily deploy this project by using Vercel (It was called Zeit before)

# deploy preview application
$ now
# deploy to production
$ now --prod

You have to set the environment variables in your Vercel project