一个博客的诞生

1,585 阅读8分钟

之前的博客都是记录在简书,偶尔有些零散的文章会往掘金和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

所以访问性优化第一步就是换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 环境变量,但是实际并没有见github.com/travis-ci/t… ,每次 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

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
语雀