VitePress + Tailwind CSS 实现的 个人博客
# https://vitepress.dev/guide/getting-started
$ pnpm add -D vitepress
$ pnpm vitepress init
# Theme 选择 Default Theme + Customization
# https://tailwindcss.com/docs/guides/vite#vue
$ pnpm install -D tailwindcss postcss autoprefixer
$ npx tailwindcss init -p
Configure your template paths.
.md
files and .vue
files
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
".vitepress/theme/components/*.vue",
".vitepress/theme/pages/*.vue",
"./posts/**/*.md",
],
theme: {
extend: {},
},
plugins: [],
}
add to style.css
@tailwind base;
@tailwind components;
@tailwind utilities;
- dotenv/con
# https://github.com/motdotla/dotenv
$ pnpm i -S dotenv
Read Time
#
$ pnpm i -D reading-time
Enhanced Markdown
$ pnpm i -D markdown-it-footnote markdown-it-image-figures markdown-it-mathjax3
sips -Z 1080 *.png
由于启动了 cleanUrls: true, 这个会让 /posts/a.html 变成 /posts/a ,路径更加简洁,单服务端也需要做出适配。
- ✅ Vercel 新增 vercel.json
{
"cleanUrls": true
}
- Ngix 配置
location /posts/ {
try_files $uri $uri.html
}
即找不到路径就在路径后加html试试