vitepress博客搭建

要使用国内镜像安装nvm

1:登陆云服务器这一步基本都没问题，

2:输入安装nvm命令:

1
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash

3:安装的时候 或许会出现错误:# Failed to connect to raw.githubusercontent.com port 443

原因:由于某些你懂的因素，导致GitHub的raw.githubusercontent.com域名解析被污染了

解决办法:使用国内镜像安装，命令如下

镜像安装

1
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash -s -- --mirror=https://npm.taobao.org/mirrors/nvm

刷新配置

1
source ~/.bashrc
1
nvm --version

安装最新的node LTS版本

1
nvm install --lts

安装前可以通过：

1
nvm list

查看已安装管理的 node 版本；
还可以通过：

1
nvm list available

npm 换源

查看配置

1
npm config ls

将npm换源

1
npm config set registry https://registry.npm.taobao.org

快速搭建

首先创建并进入一个新目录：

1
mkdir -p ~/app/lycheelab && cd lycheelab

接着，使用你喜欢的包管理器进行初始化。这里我用pnpm，如下代码所示:

1
2
3
4
5
# 如果没有安装过pnpm，可以全局安装下
sudo npm install -g pnpm

# 用pnpm初始化
pnpm init

项目初始化完成以后，使用pnpm将vitepress安装为本地依赖。如下代码所示：

1
2
3
4
5
6
7
8
9
10
11
# 安装命令
pnpm add vitepress -D

# 如果使用pnpm初始化的话，需要在package.json加上一下代码
"pnpm": {
  "peerDependencyRules": {
    "ignoreMissing": [
      "@algolia/client-search"
    ]
  }
}

在vitepress官方文档中提到，vitepress附带了一个命令行向导，来帮助我们构建一个基本的项目。通过以下命令来执行该操作：

1
pnpm exec vitepress init

构建完成如下图所示：

img

此时文件的目录结构是这样的，日下树状代码所示：

1
apt install tree
1
2
3
4
5
6
7
8
9
10
# tree .
.
├── docs
│   ├── api-examples.md
│   ├── index.md #入口文件
│   └── markdown-examples.md
├── node_modules
│   └── vitepress -> .pnpm/registry.npmmirror.com+vitepress@1.0.0-rc.4_search-insights@2.7.0/node_modules/vitepress
├── package.json
└── pnpm-lock.yaml

到这里，我们就基本完成了vitepress项目的初始化。最后，我们运行 pnpm run docs:dev 来打开项目。效果如下: