一个博客的诞生

之前的博客都是记录在简书,偶尔有些零散的文章会往掘金和CSDN发一发,虽然这些平台写作体验还是挺不错的,不用考虑推广也有一些流量,但是前段时间简书整顿了一波,有几篇文章无辜被锁,觉得很恼火。
再想想这些写作平台页面千篇一律不够个性化,还不如自己搭个个人博客,一来不用担心审查什么的带来的附带伤害,也折腾一下没搞过的东西,给人生增加点乐趣。

个人需求

仔细考虑了下个人的需求,其实比较简单,就是要逼格一定要高。
所以主题得找自己喜欢的~
所以个人域名一定是要的~
所以一定不能写完了还要敲几行命令别人才能看到~
所以评论啊,人数统计啊,字数统计啊,该有的绝对不能少~
当然还得够快。

现在的各种公众号 vlog等自媒体形态潮的飞起,相比之下博客显得有点Old School。不过这带来的好处就是技术方案基本都比较成熟了,在网上随便找找,果然成熟的技术就是好,直接有方案可以满足大部分自己的需求
Hexo 博客终极玩法:云端写作,自动部署
总结起来就是

  • 阿里的语雀平台进行写作
  • webhook触发travis-ci 自动构建
  • 下载语雀的文章生成md文件
  • hexo 生成博客
  • github-pages作为页面托管

搭建工作

之前没搞过前端的工作,整个环境的搭建还是费了些功夫,不过关于整个搭建工作,按照网上文章step by step的做也就差不多了,这里只记录下自己的粗心大意的地方,浪费了不少时间

首先是hexo theme的命名

这是一个比较低级的错误,不过确实卡了我有半个小时,在下载主题的时候我直接下载的zip解压,文件夹名字是带分支的,和_config.yml中的theme名字不对应,导致生成不了正常的页面

再就是Travis-CI ssh的问题

  • 注意.travis/ssh_config中的配置,rsa文件的路径要正确,因为我配置了多个git仓库,所以一个也不能漏
Host github.com
    User git
    StrictHostKeyChecking no
    IdentityFile ~/.ssh/id_rsa_ci
    IdentitiesOnly yes
Host gitee.com
    User git
    StrictHostKeyChecking no
    IdentityFile ~/.ssh/id_rsa_ci
    IdentitiesOnly yes
Host git.dev.tencent.com
    User git
    StrictHostKeyChecking no
    IdentityFile ~/.ssh/id_rsa_ci
    IdentitiesOnly yes

yuque-hexo 中语雀token

文档中说是公开库可以不用token,但是自己尝试公开库依然需要token,且token应在travis-ci中定义环境变量,更安全一些,不过依赖travis-ci进行每次调试很费时间,可以在 package.jsonyuqueConfig中定义token,见#30

持续优化

博客撘完,导入几个模板测试一下,一切顺利,然而一个爱折腾的程序员怎么能就此满足呢
这个博客还有几个问题

  • 没有一个自己的域名,挂在github.io下面逼格不够
  • github在国内访问不太稳定
  • 语雀的文章只是生成了静态页面push到github上,而且每次都是强制推送没有历史记录,原始的md文件也没有进行备份

域名申请

因为贫穷,在freenom 上申请了一个免费的域名sunhapper.tk,绑定到github也很简单

  • 在 freenom 的dns管理中设置一个子域名的CNAME指向sunhapper.github.io,我设置的是BLOG
  • 在github托管博客的页面绑定之前注册的子域名blog.sunhapper.tk

现在使用访问blog.sunhapper.tk就可以定向到sunhapper.github.io

网上不少文章说要设置A记录指向github的ip地址,实际没有必要,A记录的设置是在拥有自己的公共IP时将域名和ip进行绑定的,github的ip实际并不是你自己维护的,这样绑定没有意义

访问稳定性提升

dns

绑定完域名,试验下,个人感觉还行,不过让其他朋友试试发现还是有些问题

image.png
image.png

所以访问性优化第一步就是换dns服务器,申请了dnspod作为dns服务器,因为之前公司的dns用的就是dnspod,而且对这种个人博客也是免费的,切换过程比较顺畅,在dnspod设置完将freenom的dns服务器改成自定义的就完了

cdn

因为github在国内的访问也是不太稳定的,所以考虑使用cdn进行加速,但是最终没有使用,主要因为

  • 国内的cdn全部需要进行域名备案,只是一个个人博客不是很想折腾这个
  • 尝试了cloudflare,虽然不用备案,但是它的免费方案节点应该都是在国外的,加速效果非常一般

基于以上原因,没有使用cdn,而是使用了国内的git仓库进行页面托管

国内git托管

国内的提供pages功能的git仓库有coding、gitee,之前用gitee比较多,但是gitee要收费版本才有自动发布和自定义域名功能,贫穷让我使用了coding
往coding推送静态页面和github并没有什么不同
在dnspod上设置下指向coding的CNAME并设置为默认,github.io设置为国外访问
因为coding的ssl证书站点在国外,所以如果设置为github.io作为国外路线的CNAME则会对开启https有影响,所以为了https只好忍痛放弃多线路的支持,改成所有访问都定向到coding

备份

因为同步语雀文章,生成静态页面,向托管仓库部署页面都是在travis上进行的,这导致博客源码仓库不会发生任何变化,而静态页面的托管仓库的推送都是强制的,所以也没有历史记录,这样让版本回滚非常困难,而且完全依赖语雀平台,语雀万一挂了,博客文章的修改及更新就变得比较困难

所以在travis-ci中执行同步文章操作后会添加一个提交,并推送到github,安全起见,在gitee弄了镜像仓库,也备份一下,毕竟前段时间MYZ github也是有一些动作的

这个备份操作还是比较顺畅的,毕竟几个仓库都配了ssh key,拥有完全的读写权限,就是在生成新的commit_message时耽误了比较久
来看下到底被什么给block了

serverless函数

回过头看看Hexo 博客终极玩法 中serverless函数这一段,这个函数的功能是将语雀的webhook调用转换成travis-ci api的形式,其中带上了被修改的文件名作为message放在body的request字段里

 $post_data = json_encode(array(
        "request"=> array(
            "message"=>$message,
            "branch"=>$branch
        )
    ));

按照travis-ci的文档,这个message应该覆盖 TRAVIS_COMMIT_MESSAGE 环境变量,但是实际并没有见https://github.com/travis-ci/travis-ci/issues/8641 ,每次 TRAVIS_COMMIT_MESSAGE 都是最新的提交的message,这样我想创建一个新的commit它的message是什么就没有依据了

查了下文档,Triggering builds with API V3 发现config的env字段可以添加环境变量,所以自己加个环境变量作为commit-message好了

    $post_data = json_encode(array(
        "request"=> array(
            "message"=>$message,
            "branch"=>$branch,
            "config"=>array(
                "env"=>array(
                    "DESC"=>preg_replace("/\t/","",$message)
                )
            )
        )
    ));

.travis.yml

.travis.yml 中修改

- NEW_MESSAGE=${DESC:-$TRAVIS_COMMIT_MESSAGE} //有DESC环境变量就用DESC,没有就用TRAVIS_COMMIT_MESSAGE
- echo ${NEW_MESSAGE}

这里有个问题,travis-ci在取环境变量的字符串时,如果中间有空格,会只取空格前的字符串,这个还没想到方式解决,只好生成DESC时不加空格了

坑已踩完,每次语雀更新文章都会在git上生成一个包含修改文件的commit了

image.png
image.png

todo

干了两天,终于获得了一个自定义域名,国内外分线路访问,自动部署的个人博客了,当然有些事情还没做完,标记下备忘

图床问题

现在暂时使用的是直接复制到语雀编辑页面自动生成md图片地址,但是这个地址只有在生成md时才看的到,在其他地方使用比较麻烦,比如封面等,所以需要考虑其他图床

图片备份

看到网上各种博客上裂开的图片,天生对图床有种不安全感,所以图片展示可以用图床,但是在git仓库应该也需要一个备份,以便图床挂了可以及时迁移
一行代码提取markdown文件中图片

语雀生成的md文件格式化

语雀生成的md文件中多了很多html标签,例如段落的换行都是使用<br>,这在不同md解析器中效果不同,所以需要格式化成较为标准的格式,方便其他地方发布
使用下面命令进行文本替换

sed -E -i "s/<br \/>/  \n/g"  $1 ## 删除<br \/
sed -E -i "s/<a\sname=\"\w*\"><\/a>//g" $1 ## 删除标签
sed -E -i "s/\xc2\xa0/ /g" $1 ## 删除html空格特殊字符

html特殊字符这个东西还是挺坑的,之前 front-matter 有问题也是因为这个,具体解决方案见
How to deal with NBSPs in a terminal

多平台发布

每篇文章都是自己的心血,当然想让更多的人看到,而且使用了travis自动部署,那么除了git托管,其他平台如果可以自动发布的话支持一下,是不是就可以走上人生巅峰了呢,想想还有些小激动呢~

最后

本博客第一篇文章终于完成了,后续会把其他平台的文章逐渐迁移过来,也会不断进行技术博客输出,敬请关注

一波广告

sunhapper的博客
sunhapper的github

致谢

感谢帮助我完成博客搭建所用到的开源工具以及平台
Hexo
yuque-hexo
hexo-theme-matery
语雀

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,126评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,254评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,445评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,185评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,178评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,970评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,276评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,927评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,400评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,883评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,997评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,646评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,213评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,204评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,423评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,423评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,722评论 2 345

推荐阅读更多精彩内容