使用 Hexo、GitHub 搭建个人博客教程

对于喜欢写作的技术人员来说,可以使用 CSDN 简书 WordPress 博客园 等产品,不仅可以记录自己在日常工作中遇到的难点、解决的 bug 等,还可以分享经验,让别人也学习进步。但是,有的人可能会觉得这些产品不好用,或者功能的扩展太掣肘,或者觉得这种方式不够酷,他们想追求更加自由的方式来写博客。

这时候,我觉得 Hexo 就可以出场了,它其实只是一个博客框架,如果你是新手,只需要几个命令十几分钟,就可以搭建自己的博客,而如果你技术高超并且愿意花时间的话,可以折腾出很多花样,博客从里到外你都可以自定义实现。本文记录我的博客搭建过程以及优化过程。

在此先声明,这篇博客内容是从 2017-09-30 开始写的,为了与时俱进,会保持不断更新,可能会删掉无用的旧内容并添加新内容,目前最新修改时间为 2019-06-09,所以请读者以最新的内容为准。

历史的记忆

我从 2015 年就开始整理包含各种知识点的笔记,大部分都是和技术有关的,其它的都是一些生活感悟、阅读笔记、游记等等。当然,2015 年我还没有毕业,只是在外面的公司实习,由于当时每天都会接触到很多重要的技术知识,在询问同事、查阅资料的过程中又会延伸涉及到更多的知识点,我迫切需要记笔记,方便我快速查阅学习。一开始我本想听从身边同事的建议,使用 CSDN 写博客,但是我觉得 CSDN 使用起来不方便,对于字数多一点的笔记,排版、添加图片都很麻烦,因此没有使用。

后来自行查阅资料,有人建议使用 简书 WordPress 有道云笔记 等产品,我觉得好像都不错,并使用了一段时间的有道云笔记。但是突然有一天我发现了 Hexo 这个博客框架产品以及 Markdown 这种语法,我被深深吸引了,当即决定改用它。

当然,这时候不得不提一下 Jekyll 这个博客框架,它其实是一个静态文件生成器,和 Hexo 类似,用户可以基于 Markdown 文件写博客,然后 Jekyll 帮助用户生成静态文件。更重要的是,GitHub 默认是支持 Jekyll 的,用户可以直接管理 Markdown 文件,其它的都交给 GitHubJekyll 了,也就是说用户可以直接在线编辑 Markdown 文件,生成过程、发布过程都无需关心。

那为什么我没有选择 Jekyll 呢?上面的介绍看起来很美好是不是,但是不能忽略了它的缺点:一是 Liquid 语法不友好,需要学习成本;二是如果在本地搭建 Jekyll 环境的话,步骤比较复杂【基于 Ruby,听说有 Docker 环境可以快速搭建 Jekyll 环境】,出了问题很是折腾人;三是博客内容过多的时候【几百篇】,生成的速度会极慢,也就是性能低下;四是 GitHub 对 Jekyll 的插件有很多限制,导致很多插件不能使用,这就违背了自定义的概念,不够灵活。因此,此时此刻我暂且按下 Jekyll 不表,需要了解的可以参考 GitHub Pages 的帮助文档:help.github.com ,让继续我回到 Hexo 这个话题上面来。

回来继续说 Hexo,这里面还有一段趣事,不久之前,我经常浏览 郭俊的博客 ,里面的大数据技术知识整理归纳得很好,我读了几天之后,突然有一天我的注意力竟然被博客的框架吸引住了:界面简洁、交互优雅、配色简单,我就在那里点来点去,越来越喜欢。然后我决定我也要使用这个框架,但是我对这个框架一无所知,而且郭俊的博客底部也没有留下类似 Powered by xx 的标识,一开始一筹莫展。接着我就想到去郭俊的微博、微信公众号里面留言,说我很喜欢这个框架,能不能透露一下关于这个框架的简介。过了几天他回了一个单词:Hexo,然后我就疯狂地搜索关于这个框架的信息,并着手开始使用它。

一开始我并没有考虑那么多,例如博客主题的各种优化配置、远程仓库协作、搭建自己的云主机、绑定域名、SEO 优化等等一系列的升级改造,我只是想使用这个框架,然后搭配 Markdown 语法进行写作。我先在本地创建了一个博客站点,然后逐步把有道云笔记里面的内容迁移过来,现在我发现也积累了不少内容,才决定投入 GitHub 与 GitHub Pages 的怀抱,想把个人博客慢慢做起来。

我知道这将是一个漫长而消耗精力的过程,希望我能坚持住,这就快到国庆节了,我会抽出 2-3 天时间好好整理一下博客站点的优化清单,并在以后的日子里逐步实现。

初次搭建

环境初始化

参考 Hexo 的安装文档进行环境初始化,新建一个站点并在本地启动,用浏览器打开查看默认的站点。

新建站点

详细过程待整理。

优化教程

优化教程主要整理针对博客站点做的优化点,例如 UI 优化、SEO 优化、部署管理优化等等,这一部分内容会非常多,并且会在以后不断更新,至于有没有尽头我也不好说。

添加版权声明

版权声明,一般就是指在博客的末尾添加类似 本博客内容除特别声明外,均采用 xx 许可协议,转载请注明出处! 这样的声明,一是用来提醒读者能意识到博客站点的版权,二是警告读者不要随意抄袭搬运博客内容。

对于 Hexo 来说,由于默认已经集成了这个功能,用户开启版权声明就比较简单了,直接在主题配置文件中【例如我使用的主题为 NexT,则在主目录中找到 themes/next 子目录,再找到 _config.yml 配置文件】,找到 post_copyright 配置项,设置为开启。

1
2
3
4
post_copyright:
enable: true
license: CC BY-NC-SA 3.0
license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/

其中,enable: true 表示开启版权声明,license 表示版权协议的名称,license_url 表示版权协议的官方网站。至于使用哪一种版权协议,大家根据实际情况选择,如果需要了解更多的版权协议知识,请自行查询。

开启版权声明后,在每一篇博客的最后都会看到如下图所示的版权声明信息。
博客文章末尾的版权声明信息

此外,为了在站点概览中增加版权协议的图标和链接,继续在上述的配置文件中找到 creative_commons 配置项,根据上述的版权协议情况填写。

1
creative_commons: by-nc-sa

配置完成后,在侧边栏的站点概览中,可以看到版权协议的图标,如果点击图标会自动跳转到版权协议的官方网站。
站点概览的版权声明信息

搜索引擎优化

关于在百度、Google 的站长工具中管理站点的方法,参考我的博客内容:博客待整理

使用远程仓库

我使用 GitHub 作为远程仓库,方便多环境写博客,并使用 GitHub Pages 作为免费云主机,参考我的博客内容:博客待整理

绑定独立的域名

由于我使用了 GitHub Pages,所以域名的绑定、SSL 证书的申请都比较简单,参考我的博客内容:GitHub 个人站点绑定独立的域名

解决百度蜘蛛爬虫的问题

由于众所周知的原因,GitHub Pages 把百度蜘蛛爬虫的请求全部拦截,这就导致百度无法爬取博客的内容【当然主动提交的还是可以的】,我使用多主机、百度请求跳转的方式解决这个问题,参考我的博客内容:GitHub Pages 禁止百度蜘蛛爬取的问题

添加宠物挂件

在博客站点的左下角添加宠物挂件,我选择了一只猫,并且它会根据光标的位置来回看,希望能给看我博客的读者带去一点好心情。参考我的博客内容:博客待整理

图床选择

一开始我经过多天的调研,最终选择的是微博图床,理由有:免费、自动压缩、SSL 协议、CDN 加速,使用了很长时间,效果很好。但是后来发生了黑产攻击微博图床的事件【时间点大概在 2019-04-24】,给微博图床带去了安全风险,于是微博图床开启了防盗链,所有正常的访问均被拒绝,进而导致博客文章里面的图片全部打不开。

后来经过反复思考,又在网上看到很多别人的经验,最终我决定直接使用 GitHub 作为图床工具,安全可靠,参考我的博客内容:解决微博图床防盗链的问题 使用 Java 代码迁移微博图床到 GitHub 图床

站内搜索

我使用的站内搜索是 Hexo 提供的解决方案,只要在配置文件 _config.yml 中配置是否开启本地搜索功能即可,很简洁,不必关心其它,如图:

站内搜索相关配置

它的背后其实使用了一个叫 hexo-generator-search 的插件,详情见:
https://github.com/wzpan/hexo-generator-search ,原理也很容易理解,就是把网站的关键词全部收集起来,存在一个文件中:search.xml,搜索时直接根据关键词从文件中查找。

Hexo 内置了这个插件,所以我只需要在配置文件中配置几行信息,就可以开启站内搜索功能,如果是比较老旧的 Hexo 的版本,可能还没有内置这个站内搜索插件,可以升级 Hexo 或者自行安装这个插件:npm install --save hexo-generator-search

当然,如果内容过多,查找速度会变慢,例如我的博客有十几万字,我已经觉得很慢了。另外,在 Hexo 的插件仓库也可以找到这个插件的介绍,Hexo 插件仓库地址:
https://hexo.io/plugins

添加开源协议

我使用 MIT 开源协议,增加 LICENSE 文件,使用模板即可,必须放在 master 分支才会生效。

在项目中选择 Create new file,创建一个新文件,命名为:LICENSE,然后在右侧可以看到会有开源协议列表给你选择,选择需要的开源协议,其它内容会自动生成。

新建文件时选择开源协议模板

选择开源协议模板

根据模板生成开源协议内容

生成开源协议内容

创建成功后,就可以在项目的属性中看到开源协议信息,例如:MIT

开源协议生效后在项目中的效果如下图。

开源协议效果图

添加徽章

除了构建结果徽章使用的是 travis,其它徽章使用的是 GitHub 的官方徽章库:shields.io,增加了 Issue 的打开关闭数量、使用的语言【自定义的徽章】、开源协议。

README 文件中的文本内容如下:

1
2
3
4
5
[![Build Status](https://travis-ci.org/iplaypi/iplaypi.github.io.svg?branch=source)](https://travis-ci.org/iplaypi/iplaypi.github.io)
![GitHub issues](https://img.shields.io/github/issues/iplaypi/iplaypi.github.io?color=blue&style=flat)
![GitHub closed issues](https://img.shields.io/github/issues-closed/iplaypi/iplaypi.github.io?color=red&style=flat)
![](https://img.shields.io/badge/language-markdown-orange.svg)
![GitHub](https://img.shields.io/github/license/iplaypi/iplaypi.github.io?color=green)

徽标可视化效果展示如下图。

徽标可视化展示效果

参考资料

1、Hexo 的官方网站:https://hexo.io

2、Hexo 的安装文档中文版:https://hexo.io/zh-cn/docs

虾丸派 wechat
扫一扫添加博主,进技术交流群,共同学习进步
永不止步
0%