尤大低仿博客带回家

内容简介：尤大低仿博客带回家

前言

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

好了，大家注意了。你没有看错， 只需几小时，低仿的尤大（Vue.js作者）博客你带回家 ，有的小朋友可能注意到，为啥这里没说同款和高仿的原因是在Markdown还有一些其他的方面，都是简单的实现，我怕说了高仿之后，遭到板砖这样就不好了，现在看病也挺贵的:grin:。

先放上尤大的博客 Evan You

然后放上低仿链接吧 BIGTIGER.ME

再就是项目的地址 Blog

声明

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

联系方式: liujinyang@bigtiger.me

我们要期望的

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

2. 不需要后台提供接口

3. 不使用数据库

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

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

实践过程

购买服务器

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

使用FTP连接服务器

这个放在最后吧，因为操作有些人已经会了，详细描述还挺麻烦的。但是为了让大家都可以快速的搭建，所以我选择放在后面，有点像附录:grin:。

服务器上面的目录结构

最终我们需要把你的博客文件放到 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]( https://github.com/liujinyang... ）

这个使用了两个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. 等等等...

最后谢谢大家听我哔哔...

鼓掌:clap:

附录

FTP连接服务器

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

我连接的方式是使用FileZilla的客户端。Mac和Windows都有，它张这个样子，大家可以自行下载。

然后我们需要找到我们需要用到的 主机地址 、 用户名 、 密码 。

步骤如下：

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

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

   

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

   

4. 然后在页面中你就可以找到你要的信息

   

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

• Blazor 0.2.0 发布 ，将 .NET 带回到浏览器
• netty的Future异步回调难理解？手写个带回调异步框架就懂了
• Django搭建个人博客：编写博客文章的Model模型
• MoguBlog（蘑菇博客） v5.3 发布，前后端分离博客系统
• IPC之—消息队列 - chan0311的博客 - 博客频道 - CSDN.NET
• 【单页面博客从前端到后端】基于 DVA+ANTD 搭建博客前后台界面

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。