ansidev 's blog
Introduction
This source code is based on Vitesse by Anthony Fu.
Features
- β‘οΈ Vue 3, Vite, pnpm, esbuild - born with fastness
- π File based routing
- π¦ Components auto importing
- π Layout system
- π² PWA
- π Use icons from any icon sets with classes
- π I18n ready
- π Markdown Support
- π₯ Use the new
<script setup>
syntax - π€π» Reactivity Transform enabled
- π₯ APIs auto importing - use Composition API and others directly
- π¨ Static-site generation (SSG) via vite-ssg
- π¦Ύ TypeScript, of course
- βοΈ Deploy on Netlify, zero-config
Pre-packed
UI Frameworks
- TailwindCSS - A utility-first CSS framework.
Icons
- Iconify - use icons from any icon sets πIcΓ΄nes
Vite Plugins
- Vue Router
vite-plugin-pages
- file system based routingvite-plugin-vue-layouts
- layouts for pages
unplugin-vue-components
- components auto importunplugin-auto-import
- Directly use Vue Composition API and others without importingvite-plugin-pwa
- PWAvite-plugin-md
- Markdown as components / components in Markdownmarkdown-it-shiki
- Shiki for syntax highlighting
- Vue I18n - Internationalization
unplugin-vue-i18n
- unplugin for Vue I18n
- VueUse - collection of useful composition APIs
vite-ssg-sitemap
- Sitemap generator@vueuse/head
- manipulate document head reactively
Blog Plugins
All plugin is located at ./src/plugins and their config is saved in ./src/site.config.ts.plugins
.
- Counter Analytics
- Donation
- Facebook Comment
- Google Analytics
- I18n
- Medium Zoom
- Nprogress
- Sharing
- Substack Newsletter
- Swetrix Analytics
Coding Style
- Use Composition API with
<script setup>
SFC syntax - ESLint with @antfu/eslint-config, single quotes, no semi.
Dev tools
- TypeScript
- pnpm - fast, disk space efficient package manager
vite-ssg
- Static-site generation- Netlify - zero-config deployment
- VS Code Extensions
- Vite - Fire up Vite server automatically
- Volar - Vue 3
<script setup>
IDE support - Iconify IntelliSense - Icon inline display and autocomplete
- i18n Ally - All in one i18n support
- ESLint
Try it now!
This source code requires Node >=14.18
Clone to local
If you prefer to do it manually with the cleaner git history
git clone git@github.com:ansidev/blog.git my-blog
cd my-blog
pnpm i # If you don't have pnpm installed, run: npm install -g pnpm
Usage
Development
Just run and visit http://localhost:3333
pnpm dev
Build
To build the App, run
pnpm build
And you will see the generated file in dist
that ready to be served.
Deploy on Netlify
Go to Netlify and select your clone, OK
along the way, and your App will be live in a minute.