跟同事一次普通的聊天,谈论到个人博客后,他帮我创建了 github 的博客雏形,从此一发不可收拾。。
一周时间,每天下班后整到半夜2点多,终于搭建完毕。给大家分享下搭建博客核心要点。
流程参考:
https://www.cnblogs.com/liuxianan/p/build-blog-website-by-hexo-github.html
https://blog.csdn.net/KNIGH_YUN/article/details/79774344
github 账户
创建的仓库名要采用 username.github.io 的形式,才能达到最简洁的 melodyplayer.github.io,不然网站后缀会加斜杠仓库名 “/repoName”,例如:melodyplayer.github.io/melody,增加访问复杂度。
域名绑定
记录类型 A 把域名转发到某个 ipv4 地址上。对于 github 来说可以采用这种方式,ping 一下 github 生成的默认域名拿到 ip 输入到记录值里即可,再在相应的仓库里创建 CNAME 文件。
主机记录填 www 或者不填时, 向github 里的 CNAME文件写入 www.melodyplay.cn 。
主机记录填二级域名例如 blog 时,则向github 里的 CNAME 文件写入 blog.melodyplay.cn 。
记录类型 CNAME 可以把请求转发到另外一个域名上,此时的记录值输入 melodyplayer.github.io 即可。
主题相关
我的选择:https://xaoxuu.com/wiki/material-x/
修改字体:https://www.zhangxinxu.com/wordpress/2017/03/css3-font-face-src-local/
hexo 命令
必读:hexo 文档
1 | hexo clean #清除public目录,该目录由 hexo g 生成 |
hexo 配置
本地调试相应的属性时,hexo 会自动编译less、ejd 等文件,可以实时看到结果。
如果要上传到多个平台的仓库下,配置形式:
1 | deploy: |
gitee 博客
使用 gitee 也可以搭建博客,创建方式类似 github 。
仓库名要与用户名一致,才能达到最简洁的 melodyplayer.gitee.io 形式。
gitee 的 ip 好像不是固定的,因此不能在域名解析时直接配置 ip,原来的 CNAME 文件也不会生效。需要通过第三方转发平台如米发做转发,然后再配置域名解析为 CNAME 的方式,但是速度惊人。。的慢。。
具体配置方式参考:https://www.jianshu.com/p/b9466c7e339b
选择图床
图床选择也纠结了很久,最终选用了 github 单独仓库做图床,使用 picgo 上传图片。
picgo 可以在上传图片前修改文件名,在文件名前加目录/,变相实现图片归档。
github每个仓库容量1G。
gitee总容量5G,但是不支持图床。
其他图床:img.vim-cn.com、https://sm.ms/
使用流程:https://xaoxuu.com/projects/vim-cn.sh/
评论系统
评论系统有很多:
valine:需要拿身份证实名验证,果断放弃。不在意的朋友可以用下,应该是比较专业的。
gittalk:https://www.voidking.com/2018/07/26/deve-hexo-gitalk-comment-plugin/
gittalk可能无法创建 issue 的问题:https://github.com/viosey/hexo-theme-material/issues/622
对于我采用的主题来说,需要在 scripts 中对 id 进行 md5。
1
2
3
4
5
6
7
8
9
10<% if (enableGitalk) { %>
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.js"></script>
<script type="text/javascript">
var gitalk = new Gitalk({
clientID: "<%- config.gitalk.clientID %>",
......
id: md5(location.pathname), // Ensure uniqueness and length less than 50
......
</script>
<% } %>
牛人博客
推荐的几个美观易读的牛人博客(临时记录在这里,后期维护到移步大佬):