一、部署环境

1.1 服务器系统:CentOS 8.4.0(这里是指小编在操作的系统版本)

1.2 宝塔面板

宝塔面板安装参考:>>>【官方教程】宝塔Linux面板安装教程

vuepress交流群:>>点击进vuepress交流群

PS:个人觉得,vuepress最难的不是部署,而是侧边栏设置,我研究了2天,查了N多资料,搞不定我想要的,这里推荐一款vuepress主题,样式很漂亮,也能够自动生成导航和侧边栏!

主题演示站:>>vuepress-theme-vdoing-doc

源码仓下载:>>github源码仓链接

二、宝塔软件安装

2.1 Nginx/Apache(根据个人需求任意安装一个,用于反向代理做域名绑定或80端口访问使用)

2.2 Node.js版本管理器(划重点:是Node.js版本管理器,不是PM2管理器)

2.3 在Node.js版本管理器中安装Node版本版本(选择最新的版本点击右侧的安装即可)

2.2 Node.js设置很重要:命令运行版本默认状态是:未设置,这里我们需要选择一下版本,否则后面安装vuepress无法使用命令行模式。registy源默认使用 官方源 即可

2.3 开放8080端口

1. 服务器开放端口(这里只写腾讯和阿里云的教程,其他服务器自动查找资料或联系官方)

阿里云开放端口:>>【官方】阿里云服务器端口开放教程

腾讯云开放端口(云服务器):>>【官方】腾讯云服务器开放端口教程

腾讯云开放端口(轻量云):>>【官方】腾讯轻量云开放端口教程

2.宝塔面板开放端口

   宝塔面板左侧菜单栏找到【安全】点击进入,参考下图填写端口后点击【放行】

  【注意】如果服务器8080端口已被占用,可使用其他端口,如:8081等...

三、建立网站及运行目录

3.1 在宝塔中新建网站(如需域名解析访问或80端口访问,就新建网站,如果不需要,就不用)

(如果是域名访问,不要忘了做解析呀!!)

3.2 添加站点配置(注意:数据库选择 【不创建】,PHP版本选择【纯静态】

 3.3 打开网站目录,删除网站目录下的默认文件(如需SSL,可在网站设置中的SSL中直接自动生成)

 (user.ini文件无法被批量删除,就点击文件右侧的删除按钮进行删除)

 (切记:操作完以上步骤后再申请SSL证书)

 四、命令行部署vuepress

忙活了半天,终于可以上主菜了,请认真看!(PS:其实剩下的就非常简单了)

4.1 重新打开网站目录

 4.2 在网站目录下打开宝塔终端(切记:一定要在网站根目录打开)

4.1 在终端中依次执行如下命令

# 在你的项目中安装
yarn add -D vuepress@next

# 新建一个 markdown 文件 (如果用命令新建的README.md显示乱码,就直接手动在目录下新建一个同名文件)
echo '# Hello VuePress!' > README.md

(默认主题样式设置请点击下方红字参考官方文档)


# 开始写作
yarn vuepress dev

# 构建静态文件(一定要构建静态文件,否则域名或IP访问403错误)
yarn vuepress build

vuepress默认首页设置参考官方文档:>>【官方】默认首页样式设置

4.2 设置完成后回到 【网站】,打开网站设置

4.3 在网站设置中,重新设置网站目录,定位到:/www/wwwroot/你的网站目录/.vuepress/dist 

     ~~~然后保存~~

      注意关闭放跨站攻击

关于自动构建静态

1.打开宝塔的【计划任务】 ,新建shell脚本类型计划任务,执行周期根据自己情况设置

(构建静态过程中非常消耗服务器配置,建议最短每天一次,推荐一周一次)

  在计划任务中添加  cd /你的网站目录 && npm run build

  参考:cd /www/wwwroot/vuepress && npm run build

 这时候访问你的域名或ip,就可以开始体验vuepress带来的丝滑了!

注意事项:

1.教程中默认安装的是vuepress v2.x版本

2.其他关于首页、导航栏、侧边栏等设置,请参考官方文档

3.做完任何修改后 ,需要构建静态文件,才能在前端看到效果

Logo

前往低代码交流专区

更多推荐