尤大低仿博客带回家

前言

就在上周六看到阿里云服务器搞一个活动，6元钱一年的共享虚拟主机。可是以前有使用过，以为最蛋疼的地方是，它只给你开放一个ftp，并且权限上面也有一些控制。因此一直在考虑是否好入手玩一下。后来想了想6块钱又很少，咱们搞起来吧。

好了，你们注意了。你没有看错，只需几小时，低仿的尤大（Vue.js做者）博客你带回家，有的小朋友可能注意到，为啥这里没说同款和高仿的缘由是在Markdown还有一些其余的方面，都是简单的实现，我怕说了高仿以后，遭到板砖这样就很差了，如今看病也挺贵的?。

先放上尤大的博客Evan You
而后放上低仿连接吧BIGTIGER.ME
再就是项目的地址Blog

声明

本文仅仅是提供一种思路想跟你们交流，在实践的过程当中一些地方可能不是最佳。千万不要用板砖拍我，人家第一次写文章啊。若是你有更好的方案或者实践思路，能够分享给我，期待~

联系方式: liujinyang@bigtiger.me

咱们要指望的

1. 使用Markdown 进行编辑博客内容

2. 不须要后台提供接口

3. 不使用数据库

4. 使用Vue全家桶（你抄人家的博客，再不用人家的东西就有点过度了）

5. 使用NPM脚本一键发布博客

实践过程

购买服务器

放一个地址共享虚拟主机普惠版，选择Linux，其余的就略过了。

使用FTP链接服务器

这个放在最后吧，由于操做有些人已经会了，详细描述还挺麻烦的。可是为了让你们均可以快速的搭建，因此我选择放在后面，有点像附录?。

服务器上面的目录结构

最终咱们须要把你的博客文件放到htdocs目录下。

使用vue-cli快速构建目录结构

在执行以后操做前，你确保你的电脑已经安装过node(>=4.x, 6.x)

$ npm install -g vue-cli

$ vue init webpack 这里写你的项目名

$ cd 这里写你的项目名

$ npm i

而后下面有几项能够配置

具体就不详细介绍了

将Markdown文件转换成json

不想听我啰嗦的能够直接看这部分的源码，/build/create-posts-json.js

这里用到了两个第三方的库，第一个是markdown-to-json，第二个是markdown-js

大概思路是，在/build/posts目录下去写.md文件，而后经过markdown-to-json去构建一个文章的json列表，而后再分别构建单个文件的json，并将json中的content用markdown.toHTML转换成HTML，最后将生成的json文件放到/build/static/posts目录下。

这里面须要讲的是，markdown-to-json须要在文件中添加相应的信息才能构建出列表

转换成json是

而后将这个js文件分别引入到/build/build.js和/build/dev-server.js中，放在顶部就能够了。

使用Vue全家桶进行页面的开发

老样子放上源码/build/src

大概的思路就是用，vue-router管理页面路由，vue-resource去静态资源中请求对应的json文件，vuex用来切换页面时开关Loading...

打包和部署

$ npm run build

等待打包结束后，使用FTP把/build/dist文件夹下面的文件扔到服务器上面就能够了。

这个时候输入你的域名就能够看到你的博客了。

你觉得这样就完了？

答案是并无！

细心的小伙伴们会发现，这样的话，我岂不是每次发布文章都须要构建，而后手动上传到服务器？的确这样很不便捷和高效。

那咱们接下来就要解决这个问题。

好了，惯例，先放源码，不爱听我哔哔的能够去看了/build/release.js

这个使用了两个node的第三方库，分别是ftp和async

大致思路是使用node-ftp去链接服务器，而后将本地生成的json文件上传。可是当咱们须要上传多个json文件的时候，咱们就须要使用async来控制回调。

而后将咱们以前写的create-posts-json.js引用进来，再在package.json文件中的script中写下

"release": "node build/release.js",

接下来你就能够愉快地使用npm run release来一键发布你的文章了。

总结

最后咱们实现了一个简单的博客系统，时间虽然短，项目也很简单。可是完整的走了一遍实际开发中，从需求定制到产品完成的一套流程。

但毕竟实现的时间有限，有些不足之处，有待完善：

1. Markdown处理的不够完全，好比代码显示等等

2. SEO优化，博客仍是之内容为主。

3. 当Markdown文件没有修改，应该不须要从新上传，可是如今须要从新上传。

4. Loading切换生硬

5. 首页列表分页没作...懒得作了

6. 评论回复...懒得嵌入了

7. 等等等...

最后谢谢你们听我哔哔...

鼓掌?

附录

FTP链接服务器

购买以后，会让你设置3个密码，分别是登陆控制台的密码（固然这个从阿里云的控制台也能够）、数据库的密码（固然也没有什么卵用）、最后就是FTP的密码！

我链接的方式是使用FileZilla的客户端。Mac和Windows都有，它张这个样子，你们能够自行下载。

而后咱们须要找到咱们须要用到的主机地址、用户名、密码。

步骤以下：

1. 首先登陆阿里云控制台。

2. 找到产品与服务 -> 域名与网站 -> 云虚拟主机
   

3. 在面板上面找到你的刚刚购买的主机，点击管理
   

4. 而后在页面中你就能够找到你要的信息
   

接下来就是使用客户端链接，这个没有什么好说的，我就放一张图片就能够了。