服务器CentOS+宝塔面板快速部署vuepress（自动发布静态）

一、部署环境

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.做完任何修改后 ，需要构建静态文件，才能在前端看到效果