Vitesse ✘ QB Template
Building a static personal website template by Vite-SSG
Page data and page feature are made, implemented,and maintained by yourself
More control on the build process and tooling
Feel the lightweight, fast and free website building process
Tip: If you like out of the box declarative configuration build website, or dont know about page build development, you may be more suitable for Vitepress or other modern Static Site Generator
If you decide to use Vite-SSG to build personal website. Let’s explore together. The template extends the following feature and devDepends, which can be changed or deleted by yourself:
- Basic style for website
- Basic style for writing Markdown articles
- Some Markdown enhanced syntax
- Site common build scripts
Pre-packed
- UI Frameworks: UnoCSS - The instant on-demand atomic CSS engine.
- Icons: Iconify - use icons from any icon sets 🔍Icônes
- Markdown-it:
- markdown-it-shiki - Shiki for syntax highlighting
- markdown-it-container - creating block-level custom containers
- markdown-it-mark - <mark> tag for markdown
- markdown-it-task-checkbox - create GitHub-style task lists
- markdown-it-anchor - Header anchors
- markdown-it-link-attributes - attributes for links
- markdown-it-table-of-contents - adding a table of contents
- Plugin:
- unplugin-vue-components - components auto import
- unplugin-auto-import - Directly use Vue Composition API and others without importing
- vite-plugin-pages - file system based routing
- vite-plugin-vue-layouts - layouts for pages
- vite-plugin-pwa - PWA
- vite-plugin-vue-markdown - Markdown as components / components in Markdown
- @vueuse/head - manipulate document head reactively
- …
Scripts
json
{
"scripts": {
// development mode
"dev": "vite --host",
// build site
"build": "vite-ssg build && pnpm build:post",
// Generate RSS and sitemap concurrently after building the site
"build:post": "run-p -c gen:rss gen:sitemap",
// Preview the built site
"serve": "vite preview --host",
// Lint code
"lint": "eslint .",
// Fast commit cli: Define common message aliases(.czrc)
// Usage e.g: pnpm cz :a
"cz": "czg",
// Generate posts RSS
"gen:rss": "tsx ./build/node/rss.ts",
// Generate sitemap
"gen:sitemap": "tsx ./build/node/sitemap.ts"
}
}
{
"scripts": {
// development mode
"dev": "vite --host",
// build site
"build": "vite-ssg build && pnpm build:post",
// Generate RSS and sitemap concurrently after building the site
"build:post": "run-p -c gen:rss gen:sitemap",
// Preview the built site
"serve": "vite preview --host",
// Lint code
"lint": "eslint .",
// Fast commit cli: Define common message aliases(.czrc)
// Usage e.g: pnpm cz :a
"cz": "czg",
// Generate posts RSS
"gen:rss": "tsx ./build/node/rss.ts",
// Generate sitemap
"gen:sitemap": "tsx ./build/node/sitemap.ts"
}
}
Directory
sh
├── build
│ ├── markdown Markdown-it plugin register and custom plugin
│ └── node scripts
├── pages site page content writing
│ └── posts * where you write articles
├── public static resources
└── src
├── components page components
├── composables public logic
├── layouts page layouts
├── modules global module
├── styles page style
└── utils utiliy
├── build
│ ├── markdown Markdown-it plugin register and custom plugin
│ └── node scripts
├── pages site page content writing
│ └── posts * where you write articles
├── public static resources
└── src
├── components page components
├── composables public logic
├── layouts page layouts
├── modules global module
├── styles page style
└── utils utiliy
LICENSE
MIT Copyright 2023 © Q.Ben Zheng
Thanks and inspired by:
- Anthony Fu : https://antfu.me/
- Vitepress: https://vitepress.vuejs.org/
- Shu Ding: https://shud.in/
- Xiaohan Zou: https://zxh.io/