如何拥有一个能随时记录灵感的博客?

概述:

刚进大学的时候也在自己的服务器上搭过博客,但是因为体验确实说不算好后来又全部写到csdn上去了。不得不说csdn的确有它的有点,包括优秀的在线编辑器,强大的搜索引擎引流能力,社区实力,每次打开自己的博客,看到阅读量又涨了几百,看到评论区真的有人和我认真的探讨问题,这种成就感甚至超过工作中所能带来的成就感。
但是最近总是发现csdn时不时又打不开,卡顿的现象,广告也越来越多,还有些正经的学术文章被和谐掉的。这真是让我这个小渣渣码农有点难以忍受了,遂重新搭了一套自己满意的博客系统。

用到的组件:

hexo icarus node 码云 七牛 云服务器即已备案域名 nginx

看到这里可能你会觉得有点麻烦了,但是我觉得程序猿如果不舍得折腾,如何能有产出,当真正搭完这一套系统的时候,你会发现,原来写博客如此轻松。

下面一个个的介绍这些组件

hexo

感觉大名鼎鼎的hexo应该多数人都应该听过,作为一个静态博客框架,支持markdown,拥有海量主题和插件,对程序猿来说有着无限的可能性。
下面来讲讲hexo的搭建过程:

  1. 安装node环境: 这个不多做赘述,上Node官网按各自平台的方法来即可。
  2. 安装hexo:

    npm install -g hexo-cli
  3. 创建博客:

    $ hexo init <folder> //初始化项目
    $ cd <folder>
    $ npm install //安装node依赖
  4. 配置博客:

目录如下:

.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes

重点关注_config.yml,大多数的配置都是在这里进行配置。
配置文件里面满是注释,英文稍微好点的同学应该可以很轻松的玩转。

  1. 主题:

hexo 的主题有很多,其中最出名的就是next了,其强大的功能支持和简约的风格深受程序猿们的追捧。我比较喜欢的是icarus,每个主题的配置其实也都差不太多,选择一款自己喜欢的主题就好。
找主题的方法:在github上搜索”hexo”按star排序从上到下一个个看过去就好:)

  1. 部署:

主要是使用以下几个命令:

hexo clean   // 清除缓存文件 (db.json) 和已生成的静态文件 (public)
hexo s // 本地部署
hexo g // 生成静态文件(public)

码云:

为什么会要用到码云呢?首先它是国内比较出名的git仓库了,要想pull,push的速度快一点,选他准没错。

下一个问题就是为什么会要用git呢?博客不就是部署到服务器就好了吗?

这就和hexo静态博客的身份有点关系了,它直接通过解析markdown来生成静态博客。那我们难道直接在服务器命令行上写博客吗?或者每次在本地打完包再上传到服务器吗?这显然不可能。

首先我们把项目初始化git上传到码云仓库,项目->管理->WebHooks
2018-12-30-00-46-08-20181230

WebHooks的作用就是在仓库分支有push的时候,触发一次POST请求到指定的地址。然后我们就可以在服务器上起一个node服务,监听这个地址,当post事件的过来时我们就执行一个shell脚本,执行pull命令。

ps: 我主要是搞java的,node水平不怎么样,这个脚本是从网络上找到然后进行了一些修改的,如果有问题,自行修改即可。

webhooks.js

var http = require('http')
var exec = require('child_process').exec

http.createServer(function (req, res) {
// 该路径与WebHooks中的路径部分需要完全匹配,实现简易的授权认证。
// 在webhooks里设置的路径
if(req.url === '/test/test'){
var body = '';
req.on('data',(chunk)=>{
body+=chunk;
});
req.on('end', function(){
var obj = JSON.parse(body)
// 我使用的码云,可以设置密码,如果你使用的仓库不能设置的话,剋去掉这个逻辑
if(obj.password = 'password'){
// 如果url匹配,表示认证通过,则执行 sh ./deploy.sh
exec('sh ./deploy.sh')
}
});
}
}).listen(4002)

deploy.sh

git fetch --all
git reset --hard origin/master

这个脚本就是强制拉远程分支到本地,为什么要强制呢?主要是防止直接pull时的各种冲突而导致pull失败的问题。

域名解析:

这个无非就是在阿里云或者腾讯云这样的平台上,购买域名,备案域名,解析域名。如果你真的想拥有一个可以随时记录自己灵感和感悟的博客,还是强烈建议你完成这一系列工作的。

服务器端:

  1. 服务器端也需要安装node 环境,也需要通过npm安装hexo,这个过程每个系统也有各自的方案,在此不做概述。

  2. 还需要安装nginx,如果服务器上已经有了可以跳过,没有则可参照
    https://www.cnblogs.com/wyd168/p/6636529.html
    来进行安装。

  3. 安装git,然后通过git clone 把仓库里的项目载入到服务器

    注意,上传到git仓库时,一定要执行过hexo g,保证已经生成了public目录。

  4. 设置nginx的转发,将指定域名或端口转发到博客的public目录。

    在此之前,请先确保域名解析已生效。

配置nginx的路由,这里只是最简单的配置,可根据自己的需求来,只要能访问到public目录即可。

server {
listen 80;
server_name yangge.ac.cn www.yangge.ac.cn;

location / {
root /home/hexo/public;
index index.html;
}

启动脚本:

到webhooks.js的目录下去,注意deploy.sh的路径要和webhooks.js中一致。建议两者都直接放到博客的根目录下,可以直接在pc端编辑好上传到仓库,服务器上只要clone即可。

通过node webhooks.js运行脚本,开始监听push事件。建议通过screen保持脚本后台运行,即:

screen -S webhooks    // 创建一个新的screen

node webhooks.js // 运行脚本

ctrl + A + D // 退出screen

screen -r webhooks // 再次进入screen

博客编写工具:

由于是markdown格式的,所以我一般用vscode来写,而且内置的Terminal也能很方便的执行命令。

写markdown有个很大的问题,就是如何插入图片,vscode有很多插件支持,如Paste Image这种插件,如果你对博客的速度没什么要求的话可以直接用这种,但是这种图片是保存在本地的,当图片多时,博客的加载速度很可能变得十分缓慢。

这个时候我们就可以用到七牛的图床了:

七牛图床:

首先开通七牛账号,然后开通对象存储,创建一个存储空间,绑定融合 CDN 加速域名,这样就可以通过自己的域名直接访问到七牛的cdn上(走域名解析转CNAME发),不需要访问到外站了。

有了七牛的配置之后,我们就可以使用一个vscode插件了,我是自己结合两个插件自己重新打包了一个插件,
https://github.com/gityangge/vscode-qiniu-upload-image-plus

但是我的node水平其实很一般,依赖的配置也没有仔细的设置,所以你很可能不能直接使用,不过你可以直接在vscode上extensions里搜索qiniu,或者是在github上搜索qiniu-vscode,有大量的选项供你选择。

当插件装好之后,配置配好,就可以随心所欲的插入图片啦~

开始写博客

通过 ‘hexo new “标题”‘ 创建一个新的博客文件,会在 source/_post/下创建一个md文件。

然后就可以开始我们的博客编写啦~ 就是常规的markdown格式。

我用的icarus主题,还有一些主题专有的配置,这个请自行通过文档了解啦
https://github.com/ppoffice/hexo-theme-icarus
https://blog.zhangruipeng.me/hexo-theme-icarus/

部署

当我们写完了一篇博客之后就可以更新远端的代码了。

hexo clean
hexo g
git add .
git commit -m"new post"
git push origin master

我一般使用这几个命令完成这个更新动作

enjoy~

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×