Skip to content

基于Vue+Nuxt.js服务器渲染(SSR)搭建的个人博客系统

Notifications You must be signed in to change notification settings

lewkamtao/Geek_Blog

Repository files navigation

Geek Blog(暂停维护)

新一代 Vue2 + Nuxt.js + Semantic UI 搭建的个人博客,支持服务端渲染。

链接

特征

  • 服务端渲染

  • 支持移动端

  • 支持暗黑模式、圆滑和锐利模式。

  • 代码拆分每一个 page

  • 仅加载关键 css(页面级)

  • 自定义底部等

  • 路由平滑切换处理

安装

项目基于 inis 开发,相关 API 需要 inis 加持。

如未部署 inis 博客系统,请移步:https://inis.cn/#/article/1

前期准备

  • 安装好宝塔面板

  • 一个可以连接你的服务器的 shh 工具

  • 一颗坚持不懈的心(重要)

第一步

首先先安装一下 pm2 管理工具,去宝塔软件商店里面下载。 (如果已经安装,忽略此步骤)

img

第二步

添加站点,这个自行绑定域名哦

img

第三步

然后把整个 nuxt 项目拷贝到域名绑定的目录下(这个目录位置是上一步的目录)

img

然后打开,项目文件 nuxt.config.js,把 api 地址修改为你的后台接口的域名,见图示。

img

img

第四步

使用 ssh 工具连接你的服务器,之后进入到你网站目录里,如 cd /www/xxx,之后执行一下命令

# cd到网站目录(是你的项目目录)
$ cd /www/xxx

# 安装依赖(请注意 要在你的站点目录下执行,请注意node版本是14)
$ npm install  或者 cnpm install

# 构建你的项目
$ npm run build 或者 nuxt build

# 运行
$ pm2 start

# 测试一下
$ pm2 list

# 如果看到以下的样子 说明成功了

img

第五步

这个时候如果没有啥问题的话就成功了,之后我们去设置反向代理,找到刚刚创建的网站,点击设置,找到反向代理,具体设置如图

img

特别的:如果你当前的端口和你已经设置的冲突,那可以修改端口(在项目文件根目录的 ecosystem.config.js),请注意修改后要重启 PM2。(如果端口没有冲突,请忽略)

# 重启PM2
$ pm2 restart all

img

最后一步

  • 这个时候访问一下,你的网址试试。到了这里基本就已经成功了。

如果仍然无法访问,有可能是端口的问题。 阿里云、腾讯云在安全组那里开放一下,宝塔的安全组也要开放。

enjoy it!

反馈

安装和使用过程中,如果遇到问题,请给作者提 Issue 。 qq 交流群:632274746

贡献

欢迎小伙伴以各种形式的贡献,包括但不限于:界面、功能、改进、 修复 Bug 等。