hexo搭建博客最全攻略:环境配置、个性化、动画音乐绑定域名

2018-03-1118:15:39后端程序开发Comments2,560 views字数 11784阅读模式

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

一开始我所有的博客都写在新浪微博，因为微博上更容易推广自己的文章，微博用户量大，但是后来微博的弊端慢慢的显示出来了，毕竟不是开发者的天地，我的博客中经常会插入大量的代码，而微博不支持markdown编辑，普通的编辑器对代码块的兼容性非常差，别说高亮了，有时候排版都会错乱，最后外观很不好看，如下图：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

而且微博的账号系统也存在一定的弊端，所以后来转向简书、掘金等技术平台，不得不承认相对于微博来说这些平台对开发者就要友好多了，不过后来又发现一个问题。因为我在写文章的时候使用的是本地的markdown编辑器，而这些平台对markdown语法的一些小细节并不严谨或者说统一如下图：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

两个平台的编辑器无法做到统一，以至于每次写完文章都需要针对两个平台做不同的修改。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

综上所述，最简单的也最一劳永逸的方法就是搭建自己的博客平台，而HEXO很好的帮我们解决了这个问题，其实对于一个开发者来说并不是什么难事，整个流程对于大部分有代码基础的开发者来说一上午时间就可以搞定，不过最难的也是最头痛的就是对细节的调整，对UI的修改、优化等，不过本文会对此逐一讲解。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

环境配置

Node.jscURL:$ curl https://raw.github.com/creationix/nvm/master/install.sh | shWget:
$ wget -qO- https://raw.github.com/creationix/nvm/master/install.sh | sh文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html
安装完成后，重启终端并执行下列命令即可安装 Node.js。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html
$ nvm install stable

Git一般的开发者不会没有这个吧，我是安装Xcode就会有这个了，使用 Homebrew, MacPorts ：brew install git;或下载安装程序安装
bitbucket账号一般都会使用HEXO+GitHub page的形式搭建自己的博客，但是这里有个问题就是GitHub是开源的，任何人都能在上面看到你的源代码，虽然这并没有什么太大的影响，不过对于我来说感觉怪怪的，所以我就用了bitbucket page来处理我的博客，所有的东西都一样只不过这个是个私有库罢了（免费五个人）

开始建站

第一步：创建仓库

进入github/bitbucket（后续都以github为例）新建repo，这里要注意repo的名字一定要满足your Account Name/github.io。如果是bitbucket那就是your Account Name/bitbucket.io，因为只有这样的仓库名称最后才能以静态页面展示。如图：XXX的内容一定要与红色的框里的文本一致。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

第二步：创建本地文件夹

创建文件夹之后CD到你创建的文件夹中执行hexo的初始化相关命令文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

$ hexo init
$ npm install

执行完毕之后你的文件夹里就有内容了，标准的目录结构是这样（只列出几个必要的文件夹及其子目录）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

_config.yml：
其中我们以后的大部分操作都会在_config.yml中进行，这个文件是我们的站点的配置文件。
scaffolds：
模板文件，规定了我们创建一篇文章的时候最开始的样子，
source：
可以暂时的理解成我们文章的存放处
themes：
主题文件

第三步：部署到Git

修改我们的的站点配置文件_config.yml中如下字段文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

其中：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

type值对应的是你所部署的的服务器类型，我们这里填写git就可以。
repo是你的仓库地址，也就是仓库克隆的地址，推荐用https的链接。
branch不写默认是master，通常我们写成master就可以。

以上配置完成后保存然后回到终端执行npm install hexo-deployer-git --save安装一个插件，这样才能将你写好的文章部署到github服务器上并让别人浏览到。安装完成后在终端中依次执行如下代码(为了简单后续统称为三步)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

hexo clean 清理缓存
hexo generate 进行渲染简写 hexo g
hexo server 部署到本地(调试使用) 简写 hexo s。然后浏览器输入 http://localhost:4000 就可以看到你博客的效果啦，不过这是本地调试用，其他人是看不到的。(调试完毕后记得 control + C 关闭本地端口，不然下次就进不去啦)
调试完毕后使用 hexo deploy 简写为 hexo d来部署到git服务器。

执行完以上操作后打开浏览器地址了输入http://你github名字.github.io就可以看看到效果啦，这回是所有人都能看到的，用手机也可以。至此第三步已经完成,最终的结果如下图：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

第四步：写文章

使用如下命令 hexo new post “文章名字” 就可新建文章啦，建立好的文章在 source/_posts中，你可以用markdown语法编辑内容就可以。编辑完成后执行第三步中终端的操作就可以啦，刷新下浏览器就可看到你的新文章啦。如下图:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

个性化

一：主题

获取

主题是我么个性化的基础和前提，我们想做任何个性化上的修改基本上都是在我们主题上的修改，先找到一个自己满意的主题是首要任务。关于主题网上有很多很多，HEXO官方的主题目录也收录了好多来着世界各地开发者的主题。或者开发者也可以直接去网上搜索HEXO theme关键字来获取主题。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

安装

主题一般都是repo，只要讲起clone到博客目录themes/XXXX下就可了，XXXX对应的就是你给主题起的名字，像这样：git clone https://github.com/huyingjie/hexo-theme-A-RSnippet.git themes/a-rsnippet 这样就可以保证每次主题的作者有更新了我们就可以 pull获取更新。不过这样有个问题后面我会在HEXO多终端同步一栏讲到，所以这里我们选择另一种方式去安装，就是直接把主题的repo下载下来
然后解压放到themes中。其实对于已经稳定的主题作者一般不会频繁更新，不稳定的主题我们也不会用，所以用后者安装也是一样的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

然后我们回到刚才的站点配置文件中_config.yml修改如下字段，对应的名字就是你刚才那个主题文件夹的名字：我这边是next，文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

然后保存，再去终端执行那三步，接着刷新网页就可以看到新的界面啦。下面是我换了NEXT主题刷新后的效果。因为该注意已经非常完善，所有后续用该主题做例子来讲文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

二：主题菜单

添加按钮

主题菜单也可以说是主题按钮。也就是上面顶部的两个，next主题默认的两个是Home、Archive，我们一般会加上tag about category等。这些都是需要在主题上进行修改，我们需要修改主题的配置文件，首先在主题的文件夹下找到_config.yml文件，没错和之前的站点配置文件同名，只不过他们的路径不同，大家千万不要弄混，站点配置文件是配置站点通用的东西，而主题配置文件是配置一些主题的元素。在主题配置文件找到menu字段文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

可以看到主题作者注释掉了一部分按钮只保留了两个最基本的，这里需要注意前面的Key并不是代表的是按钮名字，因为该主题是支持多语言，所以这个key只是个标识，具体的按钮名字要去该路径下查找文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

其中每一个文件对应了不同的语言，我们以汉语为例，进入zh-Hans.yml中修改这些字段文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

其中key就是之前我们在主题配置文件中的key，而后面的value则是简体中文状态下按钮的名字。修改完成后我们保存执行那三步就可以看到我们新添加的按钮了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

添加页面

添加按钮后我们需要点击按钮显示统一的页面。这时候我们需要添加页面。以tag页面为例，hexo中添加页面的命令是hexo new page XXXXX 后面XXX则是要添加页面的名称，我们这里写tags。为了测试新建的tag页面我们对之前的页面添加个tag。去 source/_post中找一篇文章我们在开头添加如下字段,多标签以此类推文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

然后编辑我们刚才生成的tag页面(source/tags/index.md)指定其type为tags文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

然后保存执行那三步就会有如下效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

点击对应的tag即可跳转到改tag所对应的文章。其他页面同理。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

三：添加阅读更多button

我们在首页的时候其实就是我们的文章列表，但是这时候有个问题，如果我们某一篇或者某几篇文章很长，那首页是不是更长呢？其实在首页我们可以只显示文章部分内容，通过点击阅读更多按钮来进入文章详情。这个时候就需要截断文章。我们在文章的合适地方采用来截断,用默认文章来看文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

然后执行那三步就会如下效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

点击阅读更多。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

四：更改主题背景

首先找到如下路径 themes\next\source\css_custom\custom.styl 会发现里面是空的，这个文件是Next主题为我们预留的做一些自定的css样式的地方，我们添加如下代码。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

//背景图片相关
@media screen and (min-width:1200px) {

    body {
    background-image:url(/images/bg.jpg);
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position:50% 50%;
    background-size: cover
    }

    #footer a {
        color:#eee;
    }
}

这里大家应该就可以看出括号里面的图片路径就是我们的背景图片，我们只需把图片放入 themes\next\source\images 中即可，记住图片名字要写对，要有后缀。同理括号里面我们可以直接放一个图片的链接比如 https://tpc.googlesyndication.com/simgad/6893153702744595670 做完这些操作保存，然后执行那三步即可看到效果，不过可能浏览器有缓存，可以清理下缓存再刷新看看。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

五：修改博客背景透明度

既然再上一步中修改了背景图片，如果被NExt本身的白色挡住确实不好看，我们可以尝试把本身的白色背景变成透明的，这样会美观很多，同样还是修改刚才的文件 themes\next\source\css_custom\custom.styl 在上一步的基础上我们可以添加如下代码文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

//改变背景色和透明度
.main-inner {
    background: #fff;
    opacity: 0.9;
}

其中第一个属性为颜色值，第二个属性就是我们的透明度啦。适当修改，不然会适得其反连字都看不清啦。做完上两步就是我的这个博客的效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

六：修改作者头像为圆形，

我们默认是方形的头像，想修改为圆形的话同样是上两步的那个路径下添加如下代码文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

.site-author-image {
  border-radius: 100%;
  padding: 2px;
  border: 2px dashed #fff;
  animation: cycle 2s 0.5s forwards;
  transition: border-radius 2s;
}

保存 -> 三步即可看到效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

七：添加背景动画

背景动画使用Js来处理，会JS的同学可以自己写喜欢的动画，我这边就用了网上比较通用的动画。找到以下路径 themes\next\layout\_layout.swig 在文章 </body>的上面添加如下代码文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

<script type="text/javascript"
color="255,255,255" opacity='1' zIndex="-2" count="100" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% endif %}

然后保存 -> 三步即可看到效果其中src为JS的路径，有兴趣的可以自定义效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

八：添加评论页面

HEXO的评论页面官方推荐了disqus，无奈已经被墙，即使开发时候自己有克服的方法但是也不能保证所有看你博客的人都有克服的方法。所有我们打算采用其他的的一些第三方来实现，首先先对市面上的几个产品做下对比：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

比较：

disqus比较大牌的评论系统，服务稳定，唯一的缺点是国内无法使用。暂不考虑
多说
国内比较出名的评论系统，已经关闭服务暂不考虑。
gitment
一款基于github issue的评论系统，风格很像github，只是目前还不是太稳定，且界面无法自定，可能会于博客有些不协调。而且评论需要github账号
livere
中文名字叫来必力，是一款韩国的评论系统，在不带有任何民族情感的前提下来看确实棒子的东西还是不错的，也是我目前在使用的一款，我主要用它的原因有几点文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html
- 支持很多种格式的评论导入，你可以很方便的吧之前在其他平台上的评论数据导入进来，支持多种json格式。
- 简介的UI提供多种主题。
- 国外的东西不受国内的限制。

集成：

先去livere的官网注册m，具体过程我就不讲了，一步一步安她的来就行，之后他会给你一个安装代码，像这样：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

里面主要的信息就是data-uid。
NEXT主题本身是已经集成了livere评论的，只不过被注释掉了。找到主题配置文件 _config.yml找到如下代码文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

打开注释填入你在livere中注册后它给你的UID即可。然后保存 -> 三步即可。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

九：多终端操作

背景

大家都知道HEXO是静态博客，所有的页面都是静态的通过本地文件渲染然后再部署上去，这就带来一个多终端部署的问题，比如公司电脑配置好了，想回家在进行写作，发现家里什么都没有还需要重新配置环境，不过这倒是次要，关键是如果不能保证两个终端的内容完全一样就会造成服务器上的数据会被最后一次部署覆盖，导致前几次的都被覆盖掉。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

解决

其实大家应该也看出HEXO整体的一套流程下来就是git的工作流程，不管你用github还是bitbucket都是遵循gitflow的，而gitflow就是一种多终端多人协同工作的解决方案。所以我们可以用它来解决多终端同步的问题。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

流程

我们先来了解下hexo的整体流程。我们正常的为文件夹结构如图：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

第一步：hexo g

source文件夹下存放着我们的文章，tag、归档之类的信息，也就是我们的博客的内容。当我们在终端执行 hexo g 的时候会被source中的文件按照某种规则方式渲染成静态的页面文件放到public中：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

第二步：hexo d

然后我们执行 hexo d 这一步暂时我们可以认为就是对public中的文件进行push到我们的git仓库的过程。所以在我们的仓库中 XXXXXX.bitbucket.io 大家看到的文件只有public中的文件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

附加：hexo clean

其实这一步是和gitflow没有关系的，但是既然讲到流程我这边也在说下，之前说过这步是用来清理缓存的，其实他的作用是运行在第一步之前，将整个public文件删除，然后我们再执行 hexo g 重新渲染进public，之后再 hexo d 进行部署，这样就避免之前的内容对我们造成影响。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

具体操作

通过上一步流程我们知道如果git服务器上只有public是不够的，我们需要有我们整个博客文件夹下的所有文件才能进行多终端操作。所有这边有两个方法：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

新建另一个仓库我们暂时命名为MyProject，把我们所有的文件传到这个Git仓库上，当我们换另一台电脑时候我们直接拉这个新仓库的代码然后进行写作 -> 三步走最后在将所有文件推到MyProject以后所有的git操作都在这个仓库中进行。
git给我们提供了多分支操作，我们可以做xxxx.github.io这个仓库中创建一个新的分支暂时命名为hexo分支，这个分支的作用和上一个方法里MyProject的作用以及里面的文件一模一样，只不过我们这个方法就省的我们再创建一个仓库了。以后所有的git操作都去这个分支进行，本地的文件一直保持在这个分支就行，不过有一点需要注意的就是，即使所有的操作都在hexo分支下进行也必须保证master分支为主分支(default branch)，不然你就打不开你的博客了。以上两种都是属于基本的git操作，本文不再赘述。不过有一点这里要强调下，还记一开始我跟大家说的主题的是推荐大家直接去主题所在的repo下载zip然后解压拖进博客目录里面吗？如果你不是拖拽进来的而是clone下来的话在这一步你会涉及到git的 add submodule操作。其实操作不难，具体的命令网上也是大把。不过如果你像我一样使用bitbucket的话可能发现无法进行submodule操作，不知道这个是bitbucket的BUG还是什么其他原因，同样的命令使用github托管博客的时候是没有问题的，而bitbucket就不行，当你使用另一台电脑的进行拉去的时候执行 git submodule init 操作的时候他会提示找不到。至今未解决，如果哪位大神有什么方法及时联系我。

十：绑定个人域名

注意：bitbucket 从2015年开始关闭了个人博客自定义域名的功能，也就是说如果你是按照上面操作把个人博客部署在bitbucket中的话就无法使用自己的域名，关于这一点bitbucket文档已经有明显的说明

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

准备工作

在github上创建仓库，仓库的名字为 username.github.io。然后修改站点配置文件中部署地址（repo对应的字段），将原本的bitbucket的仓库地址改为github的地址文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

之后进行保存然后三步走，部署成功后你的博客就从bitbucket上迁移到github中了，这样一来，你整体的博客仓库还是在bitbucket中的私有库中，但是public文件夹中的公开文件已经被你部署到github的仓库中。该保密的信息仍然保密，同时也不影响你绑定自己的域名，一举两得。正常情况下按照上面步骤完成后的博客地址是 xxx.github.io，下面就开始绑定自己的域名。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

域名购买

这个渠道有很多，我就不再一一赘述，我这边以阿里云的万网域名购买为例,找到合适自己的域名文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

域名解析

购买域名并且按照他的步骤实名认证之后，需要把域名解析到我们的博客中，在阿里云的控制台找到域名右侧对应的解析按钮。点击然后添加解析文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

然后按照如下填写添加解析，记得把记录值替换成你自己的博客地址文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

之后记得启用该记录，不过如果你像我一样是阿里云购买并且配置的话是不需要启用的，默认帮你启用。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

仓库配置

然后回到你的github仓库，进入你的仓库设置页面，找到如下字段，在红框处添加你的域名，然后保存即可文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

博客配置

回到你的博客目录，在source目录下创建一个不带任何后缀的文件，命名为 CNAME，里面填写你的域名，我是这样，只添加你的域名不要添加其他东西。然后保存执行三步之后就可以通过你的域名访问你的博客啦，如果不能访问可能是因为运营商DNS缓存问题。等几分钟就可以了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

十一：实现https协议

按照以上步骤完成后可以通过域名访问，但是有个问题就是如果你用谷歌浏览器或者Safari，他就会提示你网站不被信任，只有你点击仍要继续才会展示你的博客，并且地址栏里面还是有个红色的×，虽说不影响使用和阅读，但是还是感觉别扭，这次我们来讲如何将自己的博客协议改为Https。这里有几种方法：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

购买证书
使用免费CA证书。腾讯云阿里云都有提供。不过有时间限制
使用CDN进行反向代理

如果使用上两步的话基本上证书的服务商都会告诉你如何配置，他们的文档讲的一定比我的详细，不过主要原因是我们使用的github Page是不支持上传证书的，所以这里主要说下第三步，通过CDN配置反向代理，这里就需要用到一个国外的CDN服务提供商Cloudflare:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

原理

Cloudflare 提供DNS解析服务，而且速度很快，在阿里云半个小时才能生效的解析在它这里瞬间就生效，它提供了免费的https服务(但不是应用SSL证书)。实现模式就是，用户到CDN服务器的连接为https，而CDN服务器到GithubPage服务器的连接为http，就是在CDN服务器那里加上反向代理。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

用户看到的小锁其实是用户连接到Cloudflare的证书，而由Cloudflare到github是没有https的，不过对于我们静态博客已经够了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

配置

第一步：

还是先去官网注册，然后添加你的域名，注意添加的是你购买的域名。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

第二步：

进入DNS解析界面填入如下解析，因为我们使用clouldflare做DNS解析所以一会我们需要把我们购买域名的那个地方的解析删掉。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

其中前两个是使你的域名指向github的服务器地址，github文档中给的就是这个两个地址，最后那个CNAME记录指向的是你的github仓库域名username.github.io。一定要严格按照这个来配置。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

第三步：

记录下cloudflare给你的DNS解析服务器，就在上一步那个页面下边，用这个记录去把你域名购买处（我的是阿里云）的DNS解析服务器替换掉，同时删掉阿里云里面的DNS解析记录，因为我们以后就靠clouleflare来解析DNS啦。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

第四步：

回到clouldflare 上面选择crypto选项然后下面选择full或者是Flexible文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

选项中几个的区别如下图文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

最后那个是需要证书支持的。然后滚动到下面打开always use HTTPS开关文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

第五步：

以上步骤配置好之后基本就完成了，但是如果直接有人在地址栏里面输入http://XXXXX 进入你的博客的话你这边还是会出现非Https的效果，所以我们这里要做一个强制跳转。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

这样就万无一失了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

坑点：

我之前按照以上步骤操作完成后发现首页虽然是https了也不显示红叉了，但是也没有显示绿色的小锁，而是一个叹号，但是有些博文页面可以正常显示https绿锁。后来发现是因为当前页面中有非https的链接导致，比如图片图床不是https的，或者评论插件不支持https，不过我博客中使用的来必力评论是支持https，只是我当时的图床无都是http所以只能是显示叹号了，后来把所有图片图床换成https的就好啦。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

十二：为博客添加音乐

HEXO博客添加的音乐的地方有两个。一个个首页侧边栏，另一个是每个页面里面。但是个人觉得添加侧边栏里面并不好，因为添加侧边栏的话用户只有在浏览你首页的时候才能听到音乐，而且期间不能点击任何站内链接，否则音乐就会中断，试想下，一般首页都是文章列表，点击文章里面之后才是正文，所以用户在首页停留的时间很短，基本上找到自己想看的文章就会马上点进去看，所以这里放音乐没有太大意义；而页面内插入音乐会更好点，读者可以一边浏览文章一边听音乐，这也正是我们想要的。不过解决前者问题的办法也不是没有，比如点击链接的话直接开另一个浏览器标签来打开新页面也可以做到不中断音乐，但是总觉得有点小题大做了。总不能读者看个你的博客而占用了一堆标签。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

网易云音乐外链

这个是最简单的方法，通过网易云音乐官网生成播放器外链。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

可以自己配置一些属性，然后自动生成配置代码，放到你的博客里面就行啦，粘贴到你文章中想要的地方文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

优点缺点截图上也有，不过网上也说这样的方式会影响SEO，具体什么原理也不太清楚。总之简单便捷，不过网易的logo去不掉。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

aplayer添加音乐

这个算是HEXO最常用也是最出名名的播放器了，还有Dpleyer是用来视屏播放的，暂时我们不说。首先需要安装aplayer依赖，终端中切换到你的博客根目录执行 npm install aplayer --save 安装成功后就可以了。参数就不给大家一一讲解了，官方文档都有，我这里只提供一个例子。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

页面中添加音乐

{% aplayerlist %}
{
    "autoplay": true,
    "showlrc": 0,
    "mutex": true,
    "music": [
        {
            "title": "에필로그 (Epilogue)",
            "author": "이동준",
            "url": "https://molier-1256056152.cos.ap-guangzhou.myqcloud.com/%E1%84%8B%E1%85%A6%E1%84%91%E1%85%B5%E1%86%AF%E1%84%85%E1%85%A9%E1%84%80%E1%85%B3.mp3",
            "pic": "https://y.gtimg.cn/music/photo_new/T002R300x300M000000RmZHf3qhLUL.jpg?max_age=2592000",
            "lrc": "https://歌词.lrc"
        }
    ]
}
{% endaplayerlist %}

以上代码插到文章中任意一个你想的地方就可以文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

pic就是歌曲显示图片的链接。大家可以看到music是个数组，所以想添加列表的话就在数组中再添加个歌曲字典就好了。建议歌词lrc要用URL形式，不然txt格式可能要编辑死。。好多人问歌曲的MP3外链从哪里来。这个其实很简单，首先把歌曲下载下来然后上传到七牛云就可以在七牛云生成外链啦，七牛云有免费的存储空间，只存歌曲的话足够啦。歌词URL文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

侧边栏中添加音乐

其实之前讲过，不建议在侧边栏中添加，但是这里还是简单介绍下。首先要做的是在node_modules 目录下找到 APlayer.min.js 文件，将其复制到 theme/next/source/js/src/目录下。然后打开 theme/next/layout/_custom/ 文件夹下的 sidebar.swig 文件，向其中添加以下代码：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

<div id="player1" class="aplayer"></div>
<script src="/js/src/APlayer.min.js"></script>
<script type="text/javascript">
var ap = new APlayer({
    element: document.getElementById('player1'),                       // Optional, player element
    narrow: false,                                                     // Optional, narrow style
    autoplay: false,                                                    // Optional, autoplay song(s), not supported by mobile browsers
    showlrc: 0,                                                        // Optional, show lrc, can be 0, 1, 2, see: ###With lrc
    mutex: true,                                                       // Optional, pause other players when this player playing
    theme: '#e6d0b2',                                                  // Optional, theme color, default: #b7daff
    mode: 'random',                                                    // Optional, play mode, can be `random` `single` `circulation`(loop) `order`(no loop), default: `circulation`
    preload: 'metadata',                                               // Optional, the way to load music, can be 'none' 'metadata' 'auto', default: 'auto'
    listmaxheight: '513px',                                             // Optional, max height of play list
    music: [
    {                                                           // Required, music info, see: ###With playlist
        title: 'Sometimes When We Touch',                                          // Required, music title
        author: 'Oliveia',                                              // Required, music author
        url: 'https://molier-1256056152.cos.ap-guangzhou.myqcloud.com/SometimesWhenWeTouch.mp3',  // Required, music url
        pic: 'https://y.gtimg.cn/music/photo_new/T002R300x300M000003LIDEL0NQInJ.jpg?max_age=2592000',  // Optional, music picture
        lrc: 'https://歌词.lrc'                   // Optional, lrc, see: ###With lrc
    },
    {
        "title": "大鱼",
        "author": "周深",
        "url": "https://molier-1256056152.cos.ap-guangzhou.myqcloud.com/bigfish.mp3",
        "pic": "https://y.gtimg.cn/music/photo_new/T002R300x300M000004Y7V4s3ug4cC.jpg?max_age=2592000",
        "lrc": "https://歌词.lrc"
    }
    ]
});
</script>

只是换成了JS的语法，其实原理，参数都一样。然后执行三步走就可以看到啦，注意有浏览器缓存，所以多刷新几次就会有了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/1589.html