摘要：你没有看错，只需几小时，低仿的尤大作者博客你带回家，有的小朋友可能注意到，为啥这里没说同款和高仿的原因是在还有一些其他的方面，都是简单的实现，我怕说了高仿之后，遭到板砖这样就不好了，现在看病也挺贵的。步骤如下首先登录阿里云控制台。
前言
就在上周六看到阿里云服务器搞一个活动，6元钱一年的共享虚拟主机。但是之前有使用过，觉得最蛋疼的地方是，它只给你开放一个ftp，而且权限上面也有一些控制。所以一直在考虑是否好入手玩一下。后来想了想6块钱又不多，我们搞起来吧。
好了，大家注意了。你没有看错，只需几小时，低仿的尤大（Vue.js作者）博客你带回家，有的小朋友可能注意到，为啥这里没说同款和高仿的原因是在Markdown还有一些其他的方面，都是简单的实现，我怕说了高仿之后，遭到板砖这样就不好了，现在看病也挺贵的?。
先放上尤大的博客Evan You
然后放上低仿链接吧BIGTIGER.ME
再就是项目的地址Blog
本文仅仅是提供一种思路想跟大家交流，在实践的过程中一些地方可能不是最佳。千万不要用板砖拍我，人家第一次写文章啊。如果你有更好的方案或者实践思路，可以分享给我，期待~
联系方式: liujinyang@bigtiger.me
我们要期望的使用Markdown 进行编辑博客内容
不需要后台提供接口
不使用数据库
使用Vue全家桶（你抄人家的博客，再不用人家的东西就有点过分了）
使用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来一键发布你的文章了。
总结最后我们实现了一个简单的博客系统，时间虽然短，项目也很简单。但是完整的走了一遍实际开发中，从需求定制到产品完成的一套流程。
但毕竟实现的时间有限，有些不足之处，有待完善：
Markdown处理的不够彻底，比如代码显示等等
SEO优化，博客还是以内容为主。
当Markdown文件没有修改，应该不需要重新上传，但是现在需要重新上传。
Loading切换生硬
首页列表分页没做...懒得做了
评论回复...懒得嵌入了
等等等...
最后谢谢大家听我哔哔...
鼓掌?
附录 FTP连接服务器购买之后，会让你设置3个密码，分别是登录控制台的密码（当然这个从阿里云的控制台也可以）、数据库的密码（当然也没有什么卵用）、最后就是FTP的密码！
我连接的方式是使用FileZilla的客户端。Mac和Windows都有，它张这个样子，大家可以自行下载。
然后我们需要找到我们需要用到的主机地址、用户名、密码。
步骤如下：
首先登录阿里云控制台。
找到产品与服务 -> 域名与网站 -> 云虚拟主机
在面板上面找到你的刚刚购买的主机，点击管理
然后在页面中你就可以找到你要的信息
接下来就是使用客户端连接，这个没有什么好说的，我就放一张图片就可以了。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/91708.html
摘要：你没有看错，只需几小时，低仿的尤大作者博客你带回家，有的小朋友可能注意到，为啥这里没说同款和高仿的原因是在还有一些其他的方面，都是简单的实现，我怕说了高仿之后，遭到板砖这样就不好了，现在看病也挺贵的。步骤如下首先登录阿里云控制台。 前言 就在上周六看到阿里云服务器搞一个活动，6元钱一年的共享虚拟主机。但是之前有使用过，觉得最蛋疼的地方是，它只给你开放一个ftp，而且权限上面也有一些控制...
摘要：怎么才能把台式电脑带回家可以寄吗最好是自己带着，麻烦点。如果非要寄就寄顺丰，以下几个建议供参考主机是否能找到原包装，如果找到原包装，里面的泡沫塑料是根据机型定制的，效果最好。怎么才能把台式电脑带回家？可以寄吗？最好是自己带着，麻烦点。如果非要寄就寄顺丰，以下几个建议供参考:主机;1.是否能找到原包装，如果找到原包装，里面的泡沫塑料是根据机型定制的，效果最好。2.把机箱打开，显卡拆下单独打包，...
阅读 2134·2021-10-14 09:43
阅读 2197·2019-08-30 15:55
阅读 725·2019-08-30 14:23
阅读 2018·2019-08-30 13:21
阅读 1234·2019-08-30 12:50
阅读 2198·2019-08-29 18:46
阅读 2279·2019-08-29 17:28
阅读 2359·2019-08-29 17:21
