VPS+Dropbox+markeditor打造Hexo完美体验 (长期更新)

96
BeliefanX
0.1 2016.08.12 23:35* 字数 3308

我现在的博客,采用了VPS+Dropbox部署hexo博客的形式,编辑器我用的是markeditor (本文有优惠码),简单概括一下我的写作流程或者说是体验: 新建文件-->写文章-->保存-->博客自动发布。就是这么简单,不用任何命令行,只管自己写博客,其它交给VPS和Dropbox全自动完成!
  这篇博文也是长期更新的,有兴趣的用户可以关注一下,以后我有什么新的东西或者用法都会在上面更新,也可以关注我的微博,博客更新以后,我都会在微博通知。当然也可以在下面评论里面直接留言,和大家交流!
  我的博客搭建主要是参考使用 Dropbox 和 VPS 实现实时部署 Hexo 博客用Hexo+Vps搭建博客并用Dropbox同步自动发布两篇文章,首先真心感谢原作者的付出,我的这篇文章也就不做无用功,再去写搭建过程了,我就写一写我遇到的问题和具体的优化过程吧!

一、VPS+Dropbox部署hexo的优点

1. 全自动发布,不需要命令行

博客是部署在VPS上的,通过incrond 监测post文件夹文件的变化之后,自动调用bash脚本,生成博客。而作者需要做的,只是把博客写好,保存到_post文件夹即可!

2. 可在任意端写博客

hexo其它部署方式,存在的问题就是换了设备以后,想写博客还需要重新部署,而通过这种模式,在任意端(手机端,PC端)都可以写博客,只需要把写好的博客放在那个端的 _post文件夹即可。

3. 博客全自动备份

因为博客是通过Dropbox实现同步的,自然而然在云端会一直有一份博客的实时备份,所以不怕博客文件丢失。Dropbox可以恢复30天以内删除的文件,所以哪怕是误删了文件,甚至整个博客,也是可以恢复的。

4. 移站方便

因为整个博客系统都有备份,想换VPS的时候,只需要在新的VPS上部署好hexo以后,把备份文件直接覆盖过去就可以,省去了安装插件,修改主题的时间,并且之前保存的文章阅读数之类的数据都不会丢失。
我刚开始建的时候,vps瞎搞了挺多东西,感觉vps很乱,所以我就重建了一个,把博客移到了新建的那个上面,除了静态压缩的插件gulp重装了以外,博客本身其它的配置都不用重新做,并且数据也没有丢失。当然,dropbox是需要再装的,还有需要重新部署一下hexo,然后覆盖一下才行。但是这时间和优化和配置博客的时间相比,那就太短了。

注意事项

我的博客刚开始搭建就用的是这种方式,所以这些优点并不是和别的搭建方式作比较得出来的,而是我在实际体验中总结的优点。
Dropbox在搭建过程中启到的作用只是同步和自动备份作用,所以并不是不可替代的,如果有相类似的网盘软件并且在Linux有客户端的话,同样可以实现的。还有,Dropbox需要科学上网,具体方法可以参考我博客里的一些文章。

二、博客搭建原理和中途遇到的问题及解决办法

1. VPS的选择

我个人用的VPS是vultr洛杉矶的机房最低配vps,一个月$5,稳定性和速度也还可以,最低配的做博客足够了。现在推广有优惠,这是我的推广链接:Vultr夏季优惠,通过这个链接注册,充值10美元,送$20!相当于充两个月,送四个月,并且vultr经常有优惠活动,还是挺划算的。当然,还有很多其它的VPS,价格低于$5的就不要考虑了,不稳定,价格高的还有Linode,微软的Azure,阿里云等等的,土豪可以随便选,不过国内的VPS是需要备案的。

2. 博客运行基本原理

首先,博客通过Dropbox等网盘软件,把各个端存进去的markdown文件,同步到VPS上,然后在VPS上通过incrond监测_post文件夹的文件变化,当检测到变化之后,incrond自动启动runhexo.sh的脚本,通过该脚本完成博客的发布。

3. 关于新建用户来安装Dropbox

在上面提到的博客搭建方法,需要新建一个用户安装Dropbox,但是我实践过以后发现,这种方法,总会有一些问题,修改权限也解决不了。作者说新建用户是为了安全,我也不太同意,虽然说在Linux下不提倡在root帐户下作一些操作,但是如果VPS是自己的,也就没这些问题了啊,大不了出问题重新装一下而已,如果root密码都被破解了,那新建用户也对安全起不了什么作用。所以,我最终就直接在root用户下装了Dropbox。

4. 关于nginx的配置问题

这个问题,主要还是自已刚开始学前端,nginx不太熟悉,按上面的方法总是配置不成功,访问不到网页。我前天发现了一个神器,很方便的解决了这个问题,就是用lnmp、lamp、lnmpa一键安装包,这个一键安装包,可以自己选择需要安装的服务,如果只是做博客来用,那就只需要安装web服务和nginx,具体配置nginx也有很详细的教程,这里就不多说了。

5. 关于权限问题

博客搭建过程中,要是出现了一些问题,首先想到有可能是权限引起的,所以一定按上面那个搭建方法里面说的,把权限都改好。还有一个关键地方的权限也要注意,那就是最后写的那个脚本runhexo.sh,一定不要忘了给执行权限,我采取的方法比较暴力,直接chmod 777,安全性理由如上。

三、博客的优化

1. 对博客进行301重定向

301重定向的作用,就是把带www的域名和不带www的域名指向到其中一个,具体原理可以自己查,但是这个必须要做的。如果用了上面那个lnmp一键安装包,只需要发在对应位置先"y"就行。

2. 博客的SEO优化

这个是很有必要做的,百度或者谷歌一下都可以搜到的。

3. 永久链接

我个人的永久链接的格式是:“ :category/:english_title.html”,目录我也通过 category_ map换成了英文的,这个是个人喜好,换成英文的看起来和谐一点,不过对于english_title,可不光是因为和谐,用english_title,可以避免改变标题以后链接找不到的问题。

4. 静态资源压缩

我是参考的这个教程:hexo 集成 gulp 插件压缩站点静态资源,并且把这个压缩命令直接写在了runhexo.sh脚本里。脚本内内容如下:

#!/usr/bin/env bash
exec 200<$0
flock -n 200 || exit 1
sleep 3
cd /root/Dropbox/hexo && hexo clean
cd /root/Dropbox/hexo && hexo g
cd /root/Dropbox/hexo && gulp

上面的博客搭建教程里脚本执行部分只用了一行用&&连接各个命令,但是我实际执行的时候,发现有点问题,我就分了三行,现在执行没有什么问题了。

5. 图床--七牛

图床的作用主要就是加速图片显示,基本原理就是把图片存在云端,然后markdown写文件的时候,图片地址直接用云端地址就行,这些平台基本都是CDN加速的,甚至可以把整个博客的镜像放上去,不过我只放了图片在上面,没有放整个博客,有兴趣的人,可以尝试一下。
我的图床用了大家都在用的七牛,每月10G的免费空间和流量,个人博客足够用了。具体七牛配置方法,我也没有用七牛的hexo同步插件,而是通过markeditor这个编辑器来实现的,具体方法我下面再写。

四、博客编辑器--markeditor

1. 为什么选择markeditor

其实,刚开始我用的编辑器是Atom,一个Github出的免费的,很强大的编辑器,它里面有个专门针对hexo的插件:atom_hexo,这个插件的作用就是可以直接通过hexo new来创建新的markdown文档,或者说对我们这种搭建方法,它的用处也基本就是hexo new这个命令了,其它命令是针对在Github上部署博客设计的。我放弃用Atom写博客的主要原因其实是它实际的markdown写作体验,各种插件试了挺多,大大小小的bug还是有不少的,后来看到了markeditor,了解了一下,界面很好看,有pc版和mac版,感觉用来写博客还是很不错的,所以我就买了pro版。markeditor pro版,原价¥128,用我的邮箱作为markeditor优惠码买的话,可以打七折,一共可以用50次。有兴趣的用户可以考虑入手,我的邮箱是:beliefanx@gmail.com,同时我也希望买了的用户,也能把自己的优惠码贡献出来,让大家能够买的实惠些。markeditor官网:markeditor

2. 怎么用markeditor写博客

markeditor有个功能是双击ctrl(可以改)打开工作目录,我就把source文件夹设为了工作目录,没有直接把_post设置为工作目录的原因是,如果直接在_post文件夹下打的话,只要文档保存了一次,就会自动同步到VPS上面,然后生成博客,这样的话,只要保存一次就生成一次博客,内容还不完整,所以我就把工作目录设置为了_post的上一级目录source,在这个文件夹下,文档会不断同步到云端,但是不会自动生成博客,直到博客写完,直接把写完的文档拖到_post文件夹就可以了,几十秒之后,自动生成博客。
markeditor还有一个很不错的功能就是可以设置模板,每次新建文档,都会自动写上一些必须的内容,相当于实现了hexo new的功能,下面我就把我的模板代码写在下面,供大家参考:

---
title: {{ title }}          //这是文章的标题
english_title:           //这个是用于永久链接的英文标题
top: 0                     // 这项是用于置顶的,数字越大越靠前,数字为0表是不置顶
date: {{ date }}       //可能通过热键 ctrl+shift+d 来快速添加当前时间
categories:            //这个目录
 tag:                       //这个是标签
---
<!--more-->      //这个是用来确实文章在首页展示内容的,相当于首页中阅读全文那四个字

![](.http://七牛域名)     //这个是用来插入图片的,本地图片插入以后,通过markeditor同步到七牛云端,然后只需要在对应markdowm位置,把这个自己的七牛域名复制过去即为图片的云端地址,这个表述可能不太清楚,可以查看一下markeditor的官方文档,要是还不懂,可以在评论中留言,我有时间的话会写一个有图片的教程。

点击或者扫码关注我的微博:    [BeliefanX](http://weibo.com/beliefanx)
 ![BeliefanX](http://obcaugojc.bkt.clouddn.com/gif/weibo.gif)      //这两行是我的微博广

markeditor功能很强大的,我写的可能不太清楚,有兴趣的话,可以看一看markeditor官方文档,然后再看看我的思路。当然如果有更好的想法,可以留言,大家交流!以后有机会我会写一些自己关于markdown的认识和想法,里面会写markeditor的一些详细用法。


先写到这吧,不知不觉写了三千多字了,markdown写东西真的会上瘾,虽然我的文笔很烂,哈哈!
这篇博文我会一直更新,直到我换了博客系统,可能就停了。如果有什么法和问题,大家可以关注我的微博,或者在下面留言交流,有问题的话,也希望大家能够帮我指出来!
再写一下两个优惠信息:
1. Vultr夏季优惠,充10美元,送$20;

Vultr服务器可以通过paypal购买,不一定非要VISA信用卡,paypal相当于国外的支付宝,国内也可以正常注册,并且绑定银行卡。

2. markeditor优惠码:beliefanx@gmail.com(可用50次)

希望购买了的同学,也可以把自己的优惠码分享出来哦!


本文原文地址: VPS+Dropbox+markeditor打造Hexo完美体验 (长期更新)

极客猫
Web note ad 1