简单搭建一个基于 VitePress 的网站

工具

• markdown相关软件（vscode、dillinger、MaHua、MarkdownPad、Typora） 有很多，自己搜索一下markdown软件vscode, markdown文件编写nodejs，用于运行本地项目yarn，用于运行本地项目

安装

1、vscode

除了使用markdown软件编辑markdow文件之外，还可以用vscode编辑；

下载地址：https://code.visualstudio.com/

下载完成之后，安装vscode，vscode安装完成之后，在打开vscdoe的请况下再安装以下插件，点击install即可： markdown插件：https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one markdown预览插件：https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced

安装完成后，可以直接用vscode打开markdown文件，点击右键 “MPE打开侧边预览查看” 效果

2、nodejs

下载地址：http://nodejs.cn/download/

安装直接下一步下一步即可； 安装完nodejs后，进入命令窗口，不会的请直接搜索命令窗口怎么进； 输入

node --version

版本号大于 v16 即可 再次输入

npm --version

版本号大于 6 即可

3、yarn

必需安装完nodejs后，开始安装yarn；如果没有安装，请查看第2条安装nodejs方法；

安装yarh有多种方式，任意选择一种方式安装成功即可：

注意： 苹果电脑可能有的没有权限执行以下方法的时候要加一个sudo

方法一

npm install --global yarn

苹果电脑

sudo npm install --global yarn

安装后检查 通过如下命令测试 Yarn 是否安装成功：

yarn --version

开始

1、初始化目录及index.md

   yarn init

   yarn add --dev vitepress

创建文件夹docs，新建index.md (docs/index.md)

2、添加这些脚本到 package.json

"scripts": {

    "docs:dev": "vitepress dev docs",

    "docs:build": "vitepress build docs",

    "docs:serve": "vitepress serve docs"

}

3、在 docs 目录下创建 .vitepress 目录即可开始设置配置

module.exports = {
    title: '王旭晨的文档网站', // 网站标题
    description: '总结归纳学习中的知识', // 网站的描述
    base: '/base/', //  部署时的路径 默认 / ，使用二级地址 /base/
    head: [['link', {rel: 'icon', href: '/favicon.ico'}]],// 添加网站图标
    // 主题配置
    themeConfig: {
        // 导航栏配置
        nav: [
            {text: '首页', link: '/'},
            {text: '指南', link: '/guide/'},
            {text: 'HTML/CSS', items: [
                    {text: 'HTML5', link: '/htmldocs/'},
                    {text: 'CSS3', link: '/cssdocs/'}]},
            {text: 'JavaScript', link: '/jsdocs/'},
            {text: '面试题', link: ''},
            {text: '关于作者', link: ''},
        ],
        //  左侧导航栏配置
        sidebar: {
            'htmldocs': [{text: 'HTML5', children: [
                            {text: '概况', link: '/htmldocs/'},
                            {text: '入门', link: '/htmldocs/htmlone'},
                            {text: '进阶', link: '/htmldocs/htmltwo'},]}],
            'cssdocs': [{text: 'css3', children: [
                            {text: 'css文档', link: '/cssdocs/'},
                            {text: 'css文档1', link: '/cssdocs/cssone'}]}],
        }
    }
}

4、本地启动服务

yarn docs:dev

这样我们这个网站就搭建完成了。

感谢你的阅读！如果你有任何问题或想法，请随时在评论区与我们分享。期待与你在更多的技术话题上交流和学习！