跳至主要內容

Vuepress博客笔记安装与迁移

Znyoung软路由Vuepress博客个人笔记

https://theme-hope.vuejs.press/zh/open in new window

准备运行环境

Node.js

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

下载地址open in new window

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文件夹下
  • 重新启动开发服务器成功
上次编辑于:
贡献者: 麦正阳