Vuepress博客笔记安装与迁移

https://theme-hope.vuejs.press/zh/

准备运行环境

Node.js

Node.js 是一个基于Chrome V8 引擎的 JavaScript 运行时环境。

下载地址

Pnpm

终端使用命令安装Pnpm

corepack enable
corepack prepare pnpm@latest --activate

创建项目

创建项目目标文件夹

# Windows直接创建文件夹后 cmd
d:
cd vuepressProj

# Mac Terminal
mkdir -p /User/Znyoung/vuepressProj
cd /User/Znyoung/vuepressProj

初始化项目（含主题）

终端执行命令，Windows用管理员权限，最好用pnpm

# pnpm
pnpm create vuepress-theme-hope my-docs

# yarn
yarn create vuepress-theme-hope my-docs

# npm
npm init vuepress-theme-hope my-docs

这里的 my-docs 是一个参数，代表 VuePress Theme Hope 项目的文件夹名称，在本教程中，我们将项目生成至当前目录下的 my-docs 文件夹。

版本升级命令

#pnpm
pnpm dlx vp-update
#yarn
yarn dlx vp-update
#npm
npx vp-update

部署与常用命令

服务器直接跑开发服务器方案

• 这个方案其实就是在服务器主机上跑dev开发服务器命令，像本地写文章时部署一样，默认绑定了8080端口。相当于在主机8080端口上跑了一个服务。

# 进入路径
cd 项目根路径
# npm启动开发服务器
npm run docs:dev

• 解析域名至服务器主机IP，配合使用Nginx Proxy Manager（有UI版本易用易理解的Nginx），通过监听域名将流量转发至8080端口，只要开发服务器不中断，就没问题。

Vuepress编译纯静态网页方案

• 这个方案就是在服务器主机上跑build命令，用vuepress将自己的主题与文章编译成一个个静态网页文件。

# 进入路径
cd 项目根路径
# npm编译
npm run docs:build

• 解析域名至主机，我这里是搭配了宝塔面板，直接新建一个纯静态站点，绑定域名就可以了
• 如果不用宝塔面板，配置nginx监听域名，转发至本地静态网页的根目录应该就可以了。
• 直接将编译后页面放到云平台的对象存储，将静态网页直接托管给OSS，用bucket域名访问应该也可以。
• 网页或对象存储前采用CDN方案，可以加速网页访问，如果是OSS，可以降低流量费用。

数据迁移/本地搭建

• 保存迁移前项目根目录src文件夹下的所有文件，这些文件我托管到gitee平台上
• 准备运行环境
• 创建项目、开发服务器启动成功
• 停止开发服务器，删除新创建项目src文件夹下所有文件
• gitee平台上将所有托管的代码clone到src文件夹下
• 重新启动开发服务器成功