新一代 Vue2 + Nuxt.js + Semantic UI 搭建的个人博客,支持服务端渲染。
-
👥 演示站: blog.kamtao.com
-
📘 inis 接口文档: inis.cc
-
服务端渲染
-
支持移动端
-
支持暗黑模式、圆滑和锐利模式。
-
代码拆分每一个 page
-
仅加载关键 css(页面级)
-
自定义底部等
-
路由平滑切换处理
项目基于 inis 开发,相关 API 需要 inis 加持。
如未部署 inis 博客系统,请移步:https://inis.cn/#/article/1
-
安装好宝塔面板
-
一个可以连接你的服务器的 shh 工具
-
一颗坚持不懈的心(重要)
首先先安装一下 pm2 管理工具,去宝塔软件商店里面下载。 (如果已经安装,忽略此步骤)
添加站点,这个自行绑定域名哦
然后把整个 nuxt 项目拷贝到域名绑定的目录下(这个目录位置是上一步的目录)
然后打开,项目文件 nuxt.config.js,把 api 地址修改为你的后台接口的域名,见图示。
使用 ssh 工具连接你的服务器,之后进入到你网站目录里,如 cd /www/xxx,之后执行一下命令
# cd到网站目录(是你的项目目录)
$ cd /www/xxx
# 安装依赖(请注意 要在你的站点目录下执行,请注意node版本是14)
$ npm install 或者 cnpm install
# 构建你的项目
$ npm run build 或者 nuxt build
# 运行
$ pm2 start
# 测试一下
$ pm2 list
# 如果看到以下的样子 说明成功了
这个时候如果没有啥问题的话就成功了,之后我们去设置反向代理,找到刚刚创建的网站,点击设置,找到反向代理,具体设置如图
特别的:如果你当前的端口和你已经设置的冲突,那可以修改端口(在项目文件根目录的 ecosystem.config.js),请注意修改后要重启 PM2。(如果端口没有冲突,请忽略)
# 重启PM2
$ pm2 restart all
- 这个时候访问一下,你的网址试试。到了这里基本就已经成功了。
如果仍然无法访问,有可能是端口的问题。 阿里云、腾讯云在安全组那里开放一下,宝塔的安全组也要开放。
enjoy it!
安装和使用过程中,如果遇到问题,请给作者提 Issue 。 qq 交流群:632274746
欢迎小伙伴以各种形式的贡献,包括但不限于:界面、功能、改进、 修复 Bug 等。