赞
踩
最近在想更新一把自己的前端吧小博客,但发现wordPress版本停留在了5年之前,发现变化挺大,不支持在线直接更新,服务器正在运行的php等环境完全不支持wordPress最新版本。如果想使用最新版本,服务器环境配置必须更新,只能慢慢折腾了。
然后在想能不能用vitePress + CMS探索重构的可能性,所以接下来这是自己用vitePress搭建的纯文档博客的步骤和vitePress博客模板,在此记录一下详细过程。
首先我们要知道,VitePress 是 VuePress 小兄弟, 它基于 Vite构建的,而VuePress 是基于 Webpack构建的。
VitePress使用vite和Vue3的驱动的静态站点生成器,比之VuePress更加简约、轻型和高效。特点如下
更多特点和不同查看:什么是 VitePress? | VitePress中文网
官方英文文档:VitePress | Vite & Vue Powered Static Site Generator
中文相关文档:
创建一个qianduan8目录,进入到目录,执行初始化命令
pnpm init
pnpm add -D vitepress
我们创建一个docs/.vitepress的目录和配置文件、首页,public等。
开始我们创建的目录结构如下所示:
- ├─ docs
- │ ├─ .vitepress
- │ │ └─ config.js
- │ └─ index.md
- │ └─ public
- └─ package.json
说明如下:
docs/.vitepress: 用于存放全局的配置、自定义组件, 自定义主题(theme)等。
config.js: 项目配置文件。
public: 公共文件目录,存放静态资源目录。(之后在首页和主题配置里可以直接使用 “/logo.png”引入)
index.md:则是站点的首页。
其中,config.js是配置VitePress网站的必要条件,它将导出一个JS对象,如果项目越来越大时,配置可以抽出来。
config.js初步配置如下:
- export default {
- title: '前端吧',
- description: '关注web前端开发为主的博客网站和前端网址大全',
- // 打包目录
- outDir: './dist',
- head: [
- // 添加图标
- ['link', { rel: 'icon', href: '/favicon.ico' }]
- ],
- }
如上所示,我们只简单地设置了网站标题,网站描述,打包的 dist 目录,以及网站图标,后面更多配置都是在config.js这个文件完成。
在package.json下配置,如下:
- "scripts": {
- "dev": "vitepress dev docs",
- "build": "vitepress build docs",
- "serve": "vitepress serve docs"
- }
执行命令 pnpm dev
效果如下,现在还没有什么内容,接下来我们就开始配置博客的首页
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。