资讯专栏INFORMATION COLUMN

尤大低仿博客带回家

chanjarster / 1174人阅读

摘要:你没有看错,只需几小时,低仿的尤大作者博客你带回家,有的小朋友可能注意到,为啥这里没说同款和高仿的原因是在还有一些其他的方面,都是简单的实现,我怕说了高仿之后,遭到板砖这样就不好了,现在看病也挺贵的。步骤如下首先登录阿里云控制台。

前言

就在上周六看到阿里云服务器搞一个活动,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中的contentmarkdown.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/111989.html

相关文章

  • 尤大低仿博客带回

    摘要:你没有看错,只需几小时,低仿的尤大作者博客你带回家,有的小朋友可能注意到,为啥这里没说同款和高仿的原因是在还有一些其他的方面,都是简单的实现,我怕说了高仿之后,遭到板砖这样就不好了,现在看病也挺贵的。步骤如下首先登录阿里云控制台。 前言 就在上周六看到阿里云服务器搞一个活动,6元钱一年的共享虚拟主机。但是之前有使用过,觉得最蛋疼的地方是,它只给你开放一个ftp,而且权限上面也有一些控制...

    ztyzz 评论0 收藏0
  • 尤大低仿博客带回

    摘要:你没有看错,只需几小时,低仿的尤大作者博客你带回家,有的小朋友可能注意到,为啥这里没说同款和高仿的原因是在还有一些其他的方面,都是简单的实现,我怕说了高仿之后,遭到板砖这样就不好了,现在看病也挺贵的。步骤如下首先登录阿里云控制台。 前言 就在上周六看到阿里云服务器搞一个活动,6元钱一年的共享虚拟主机。但是之前有使用过,觉得最蛋疼的地方是,它只给你开放一个ftp,而且权限上面也有一些控制...

    missonce 评论0 收藏0
  • 国庆怎么把主机带回-怎么把台式电脑带回

    摘要:怎么才能把台式电脑带回家可以寄吗最好是自己带着,麻烦点。如果非要寄就寄顺丰,以下几个建议供参考主机是否能找到原包装,如果找到原包装,里面的泡沫塑料是根据机型定制的,效果最好。怎么才能把台式电脑带回家?可以寄吗?最好是自己带着,麻烦点。如果非要寄就寄顺丰,以下几个建议供参考:主机;1.是否能找到原包装,如果找到原包装,里面的泡沫塑料是根据机型定制的,效果最好。2.把机箱打开,显卡拆下单独打包,...

    Rango 评论0 收藏0
  • Java IO初探

    Java IO对大多数Java程序员来说是熟悉又陌生,熟悉的是感觉到处都有它的身影,小到简单的读取文件,大到各种服务器的应用,陌生的是Java IO背后到底是一个怎样的机制,今天就让我们去了解一下这位老朋友吧。本文不讲解Java IO如何具体使用,有这方面需求的同学可以自己查下。 IO模型 要说IO,就不得不说IO模型,IO模型大家都有所了解,同步异步,阻塞非阻塞什么的,总的来说IO模型可分为以下...

    edgardeng 评论0 收藏0
  • 深入理解js

    摘要:详解十大常用设计模式力荐深度好文深入理解大设计模式收集各种疑难杂症的问题集锦关于,工作和学习过程中遇到过许多问题,也解答过许多别人的问题。介绍了的内存管理。 延迟加载 (Lazyload) 三种实现方式 延迟加载也称为惰性加载,即在长网页中延迟加载图像。用户滚动到它们之前,视口外的图像不会加载。本文详细介绍了三种延迟加载的实现方式。 详解 Javascript十大常用设计模式 力荐~ ...

    caikeal 评论0 收藏0

发表评论

0条评论

chanjarster

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<