从0到1搭建和部署个人博客-CSDN博客

此教程会教你从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

1、启动swagger-editor：

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

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

2、编辑swagger-editor：

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

3、部署接口文档：

在项目根目录下新建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可以是：

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

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

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

服务器部署

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

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

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

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

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

重点说明

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

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

2、分别安装各自依赖。

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

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

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

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

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

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

线上部署地址:

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

差不多就这些了，撤了。。。。