在windows下通过xshell连接ubuntu写blog

好吧,估计看到标题,你可能会说:你特么也太蛋疼了吧!所以,对于为什么我要这么做,有必要做个解释.

Why?

首先呢,虽然是个程序员,但是仍然还是离不开windows,毕竟玩游戏啊,qq啊什么的还是有必要的,尤其不能忍的是企业qq

既然这样,装个双系统不就完了吗?何必要通过xshell(或者secure-crt)链接到ubuntu?

这个嘛,一个呢是因为双系统切换起来太麻烦了,比如我想一边用ubuntu,一边用qq啊什么的。另一个很重要的原因就是以前工作养成的习惯了,通过secure-crt连接到linux,通过vim做服务器开发,真的是习惯了,而且喜欢上这种方式了。反正种种原因。
当然,装逼还是要的。

所以就有了

在windows下通过xshell连接到ubuntu,使用vim+markdown写文章, 再通过hexo生成博客,最后通过github进行版本控制并通过git pages发布博客的解决方案, 而且通过简单设置,还支持markdown文件在windows下的实时预览哟~

看起来确实好蛋疼啊,不过在一切配置就绪之后,写起文章来,一个字,爽!

vim

写文章,当然编辑器第一位,作为程序员,又是在习惯了使用vim的情况下,当然毫不犹豫的选择了vim,写博客,只需要能熟练的使用vim就好了,插件上并没有太大的要求,因为是使用的markdown,所以可以安装一个markdown的插件,用作语法高亮,其他的实在没什么可多说的

hexo

一个很成熟的东西了,网上有很多安装教程,这里就不在重复了,这里重点说一下编辑source目录下的文件实时预览的效果实现。
首先,这里有一个比较完整的教程, 但是是作者更多是针对本地调试,以及对public目录的监控,对于我这种在windows下开着浏览器,用xshell连接ubuntu写代码的人,并不是太适用。

先说说几个主要命令:

1
2
3
4
5
6
#安装browser-sync, [介绍](https://www.browsersync.io/)
npm install -g browser-sync
#hexo的browsersync插件
npm install hexo-browsersync --save
#进入到public目录,针对这些文件监控
browser-sync start --server --files "css/*.css, *.html"

假设我ubuntu的ip为192.168.26.130, 则我在windows下的浏览器中输入http://192.168.26.130:3000/ 即可实时监控网页文件的修改,其中3000位browser-sync的默认端口。
至于实时刷新的大概原理,应该就是在页面中插入一段js代码,然后保持与browser-sync的通信,当browser-sync监测到有文件发生了修改,则通知页面刷新页面之类的逻辑吧,具体没有深入研究过,所以也只是猜测。

#### 不适用的地方:
因为blog是使用markdown写的,而md文件在source目录下,所以上面的例子就不能监控我的md文件的修改,也就不能实时预览了。所以有了如下方案:

1
2
3
4
#启动hexo网页服务
hexo s
#在博客根目录,即`hexo init`的目录下,开启同步监控
browser-sync start --reload-delay 200 --proxy "localhost:4000" --files "source/*, source/_posts/*, source/tags, source/404, source/about"

解释:在之前使用hexo s启动网页服务的时候,一直都是使用http://192.168.26.130:4000/ 去访问的网页,发现其实我每次修改完md文件后,不需要调用hexo g命令,去刷新浏览器的时候,页面就已经被刷新了,想到可能是hexo自己会监测一些文件修改什么的,于是就利用这一点,再通过browser-sync的监测md文件,就可以将手动刷新改成自动刷新了。其实这里的自动刷新,也只是在每次保存文件的时候才可。
对于browser-sync命令的解释:
--reload-delay 200 延迟200ms加载,因为如果立即加载,页面其实并不会刷新,所以调整之后设置了200ms
--proxy "localhost:4000" 代理到hexo s 服务, 也就是说最终的请求是要通过hexo server的,否则页面不会刷新
为了简化启动hexo服务和browser-sync的监测,将上边两个命令放入一个shell脚本中

1
2
3
#这里的&表示hexo s以守护进程方式执行,这样子下边的browser-sync才能在一个脚本中执行
hexo s &
browser-sync start --reload-delay 200 --proxy "localhost:4000" --files "source/*, source/_posts/*, source/tags, source/404, source/about"

然后保存到文件名为server.sh的脚本中

所以,最后的流程为:修改md文件,browser-sync监测到有文件修改,通知浏览器刷新页面,浏览器收到通知之后,向browser-sync请求页面,browser-sync收到请求之后,把请求转发给hexo server,hexo server收到请求之后,将最新的页面内容返回

github

使用git管理博客的版本,感觉像是在写代码一样了,不过我觉得更重要的是另外两个原因

  • 家里的电脑和公司电脑的文件同步
  • 使用github 的pages
    具体的管理方式和目录结构参照 这篇文章

github pages

pages的使用也是很简单,具体参照这里, (好吧,就是官网=.=),当遇到一些奇怪的问题的时候,还可以看这里

finaly

所以我现在写博客的方式呢,就是打开xshell,进入到blog目录,执行命令

1
2
3
4
5
6
7
8
9
cd /path/to/blog/
./server.sh
hexo n new-blog-name
vi ./source/_posts/new-blog-name.md
#write blog using vim with markdown
#another step in windows may be open browser and type 192.168.26.130:3000 to view the blog page
#after a long time.......
#the blog finished
./deploy.sh

然后,博客写完了,并且部署到了git hub仓库,以及github pages!
DONE!

文章目录
  1. 1. Why?
  2. 2. vim
  3. 3. hexo
    1. 3.0.1. 先说说几个主要命令:
  • 4. github
  • 5. github pages
  • 6. finaly
  • ,