服务器CentOS+宝塔面板快速部署vuepress(自动发布静态)
很多小伙伴需求将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.做完任何修改后 ,需要构建静态文件,才能在前端看到效果
更多推荐
所有评论(0)