同事一次普通的聊天,谈论到个人博客后,他帮我创建了 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://hexo.io/themes/

我的选择:https://xaoxuu.com/wiki/material-x/

修改字体:https://www.zhangxinxu.com/wordpress/2017/03/css3-font-face-src-local/

hexo 命令

必读:hexo 文档

1
2
3
4
5
hexo clean		#清除public目录,该目录由 hexo g 生成
hexo g #生成public目录,如果在source里创建非md文件,会按原样拷贝到public中,例如CNAME的创建
hexo s #本地启动hexo服务
hexo d #部署到远程仓库
hexo new "x" #新建文件

hexo 配置

本地调试相应的属性时,hexo 会自动编译less、ejd 等文件,可以实时看到结果。

如果要上传到多个平台的仓库下,配置形式:

1
2
3
4
5
deploy:
type: git
repository:
github: https://github.com/melodyplayer/melodyplayer.github.io.git,master
gitee: https://gitee.com/melodyplayer/melodyplayer.git,master

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.comhttps://sm.ms/

使用流程:https://xaoxuu.com/projects/vim-cn.sh/

评论系统

评论系统有很多:

参考:https://xaoxuu.com/wiki/material-x/third-party-services/index.html#%E8%AF%84%E8%AE%BA%E7%B3%BB%E7%BB%9F

  • 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>
    <% } %>

牛人博客

推荐的几个美观易读的牛人博客(临时记录在这里,后期维护到移步大佬):

 Comments