从0到1搭建和部署我的博客

此教程会教你从0到1搭建一个完整的博客，包括前端展现页、后台管理系统、后端接口及接口文档、服务端部署整个完整流程。这个博客十分简单，功能远少于咱们所用的博客。可是学会了整个流程，再在此基础上扩展就会很容易了。

因此此教程适合新手小白，高手请绕道，浪费你的时间。

（关于项目源码以及线上地址请参考文章结尾）

概述

搭建本身的博客，一方面是想了解博客搭建和部署整个过程，另外一方面本身想学习过程当中一些东西想沉淀下来，因此就想到写博客。写博客过程当中，我会发现有些知识点其实还没彻底搞清楚，这样会促使我深刻学习。总而言之，写博客会造成一个良性循环。

其实整个博客搭建去年就完成了，项目都跑在个人服务器上，可是个人我的文章尚未放在上面，等功能完善了再上吧。当时准备写这篇文章，只不过当时公司项目忙，给忘了。如今想起来就把这篇文章完成了。

再次说明，本人是前端码农，对于服务端部署，后端接口什么的基本不懂，全部的东西都是现学现用，跟专业的后端和运维差太远，只是让项目能正常跑起来。关于后端以及部署的安全性和稳定性方面都没有涉及，因此项目仅供参考。

前端项目

当时作前端项目时准备用vue-cli来搭建的，可是了解处处都说服务端渲染，而我主要使用vue较多。因此为了尝试一下vue ssr，就有了如今这个项目。查了一下vue ssr，主要有官方版本和nuxt两个用的比较多些，看了一下发现nuxt节省了各类配置，上手更快，因此就用nuxt踩了一下坑。

当时刚推出nuxt1.0版本，官方文档也还比较详细。搭建完成后丢到服务器运行，发现页面打开速度确实比较快，基本是秒开。因为nuxt1.0当时要求node是8.0以上版本，低于8.0会报错，因此我用nvm来管理node版本，注意clone个人项目后安装依赖必定要在node 8.0以上版本下安装。

这个项目很简单，就只有文章列表页和文章详情页，再就是简单的兼容了下移动端。因为很简单就不展开说了，关于nuxt使用仍是推荐多看官方教程。

后台管理项目

前端后台管理项目是基于vue-cli完成的，关于vue-cli的使用网上的教程很是多，不作叙述。ajax请求用的axios库， ui使用的element-ui。主要页面有

• 注册、登陆
• 新建文章
• 编辑文章
• 新建分类
• 编辑分类
• 删除文章
• 删除分类
• 换肤等功能

该项目搭建时有点早，clone个人项目后安装依赖后项目能正常跑起来，当时会有一些warning，由于有些npm包被废弃了，推荐新的包什么的。

后端接口以及接口文档

后端项目采用的是express和mongolass，后端node项目主要参考cnode社区一个大佬的一步一步学习node的项目。后端项目的接口主要对应前端管理页面那些接口。

接口文档是用的 swagger来编写的，使用swagger-editor来编写配置文件，将其转换为json，将配置文件放入到swagger-ui文件中，放到服务器部署就好了。

运行本项目除了clone该项目的代码安装依赖外，还要在本地电脑安装mongodb，而且成功启动mongodb服务。本项目才能正常启动。

接口文档编写

准备：下载swagger-ui和swagger-edit。(参考个人github readme)

本地运行swagger-editor

一、启动swagger-editor：

在本项目下执行http-server swagger-editor -p8989。在浏览器中打开localhost:8989便可打开swagger-editor。

注意：要全局安装http-server。默认端口号为8080。

二、编辑swagger-editor：

在editor中编辑代码，左边是编辑区，右边是视觉效果。编辑好后导出json文件。关于文档的编写这里不展开讲解，能够参考这篇文章传送门，文章写得很详细。

三、部署接口文档：

在项目根目录下新建swagger文件夹，将下载的swagger-ui文件中dist目录下的全部文件复制到public文件夹下。将2步骤导出的json文件也放入swagger文件夹下。修改swagger下index.html文件中 url = "http://petstore.swagger.io/v2/swagger.json"，将其改成swagger.json。在index.js中加上静态模块：

app.use('/swagger', express.static('./swagger'));
复制代码

用node启动index.js，若是端口号为3000，在浏览器中打开 http://localhost:3000/swagger便可查看接口文档。

接口文档链接服务器，实时获取接口数据：

swagger.json中有个host字段，要想接口文档能调通地址，需此host地址与浏览器中请求的地址如出一辙。本地开服务ip能够是：

一、本机内网ip地址：如192.168.0.217:3000 (你本机的ip地址),

二、本机本地服务地址：127.0.0.1:3000,

三、本机本地服务简写：localhost:3000

服务器部署

再就是服务器部署，我买的服务器是阿里云服务器，装的系统是centos7.3。为了项目正常运行，在服务器上装了，ftp、git、node、nginx、mongodb。当时安装部署遇到很多问题，关于每个安装部署我都有详细教程，有兴趣的能够去看看。

node项目部署——阿里云centos部署ftp

node项目部署——阿里云cento部署node和nginx

node项目部署——阿里云centos部署git服务

node项目部署——阿里云centos部署mongodb

重点说明

本项目想正常跑起来步骤：

一、clone 我博客项目前端、后台管理、后端项目到本地

二、分别安装各自依赖。

三、本地电脑安装mongodb，最好注册为服务。（推荐Robomongo可视化管理mongodb）（node安装就不说了）

四、先启动mongodb服务，再启动后端项目。（此时在浏览器能够打开接口文档了）

五、依次启动后台管理项目、前端项目。

六、项目都成功启动了，可是没有数据，能够经过后台管理系统添加文章和分类。（也能够手动经过robomongo添加文章到mongodb）

七、此时应该能正常看到文章了。

最后附上项目连接地址，欢迎star ^_^

博客前端项目

博客后台管理页面

博客接口以及接口文档

线上部署地址:

线上接口文档

线上前端页面

管理项目地址就不放出了，api接口只提供查看文章等读取功能，不提供注册、添加文章等写入功能。

差很少就这些了，撤了。。。。