一个博客的诞生

2019-07-10 本文已影响5人 sunhapper

之前的博客都是记录在简书，偶尔有些零散的文章会往掘金和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.json的yuqueConfig中定义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 环境变量，但是实际并没有见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

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