Hexo嵌入JSFiddle标签无法在GitHub Page中正确显示

问题

一直用Hexo写博客，但是写完了一般都是就是借助Nginx在本地看，也一直没什么问题，今天上GitHub Page上看了一下，发现凡是嵌入了JSFiddle标签的页面全都无法正常显示。

并且浏览器控制台报错：

Mixed Content: The page at 'https://oychao.github.io/2016/11/30/JavaScript/React/161130_React_Tutorial/' was loaded over HTTPS, but requested an insecure resource 'http://jsfiddle.net/8t9hzbpu/embedded/result/dark'. This request has been blocked; the content must be served over HTTPS.

很明显，GitHub是用的HTTPs，而我本地的Nginx用的HTTP。而Hexo生成的iframe标签是HTTP的。

1	<iframe scrolling="no" width="100%" height="300" src="http//jsfiddle.net/8t9hzbpu/embedded/result/dark" frameborder="0" allowfullscreen></iframe>

问题在于：浏览器不让在HTTPs页面中嵌入HTTP标签。

解决办法

这个好头疼，其实查看Hexo的GitHub主页（参考2），早在去年十月份就解决了这个问题，但是我从NPM下载过来的代码都还没有更正过来。难道一直都没发布？

没办法只能手动来更新了。

首先先备份自己原来的博客。卸载已经安装了的全局Hexo。

1	npm remove hexo hexo-cli -g

然后重新安装Hexo。

1	npm install hexo -g

这里别装hexo-cli，因为我找了半天也没找见hexo-cli处理jsfiddle标签的源码或者依赖包在哪里（虽然我猜没关系，不过还是别装了，反正hexo依赖里有hexo-cli）。应该还是在什么地方，这里就不深究了，能用就行。

虽然对Hexo理解不是很深，但我估计其实hexo-cli只是一个命令行工具帮助包，初始化一个hexo博客的时候才会把那堆依赖安装在博客目录的node_module中。

下一步，删除全局环境下的hexo，然后从GitHub上下载最新源码。

注：这里我的是Mac环境，其他系统的路径应该不同。

1
2
3

cd /usr/local/lib/node_modules/
rm -rf hexo
git clone https://github.com/hexojs/hexo.git

然后在自己喜欢的目录重新生成新的博客。

1	hexo init blog

这时生成的博客中的node_modules中的hexo依然是旧版本的，再从GitHub上下载一次。

1
2
3

cd blog/node_modules
rm -rf hexo
git clone https://github.com/hexojs/hexo.git

注意这里需要删除Git信息，不然之后部署的时候会报错（如下）。

1	npm ERR! git /Users/ouyangcharles/git/hexo/node_modules/hexo: Appears to be a git repo or submodule.

删除Git信息。

1	cd blog/node_modules/hexo && rm -rf .git

最后一步，把我们之前的博客的相关内容覆盖新博客中的文件，主要是配置文件，主题文件夹和资源文件夹。

1
2
3

source/
themes/
_config.yml

重新生成博客，大功告成。新生成的标签如下：

1	<iframe scrolling="no" width="100%" height="300" src="//jsfiddle.net/8t9hzbpu/embedded/result/dark" frameborder="0" allowfullscreen></iframe>

可以在GitHub Page中正常浏览了，又特么折腾了一个多小时。