近期对HEXO博客的一些优化

前几天参加了一场面试,面试时展示我的博客时,发生了一个比较尴尬的事情:博客打开页面空白,此时我内心是崩溃的,明明昨天晚上还好好的。。。

回来后我就开始着手对我的博客进行bug调试和优化。

CSS JS 404导致博客页面空白

首先解决这个问题,,在上网简单搜索了一下,导致这个结果的原因应该是:

GitHub Pages 过滤掉了 source/vendors 目录的访问,所以next主题下的source下的vendors目录不能够被访问到,所以就出现了本地hexo s能够正常访问,但是deploy到github就是一片空白,按f12,可以看到大量来自source/vendors的css和js提示404

参考回答

解决方案正如github里面说说的:

找到解决方案了。。 @BBBOND @monsterLin @SpadeRoy 根据作者的提示 @iissnan ,首先修改source/vendors为source/lib,然后修改_config.yml, 将 _internal: vendors修改为_internal:lib 然后修改next底下所有引用source/vendors路径为source/lib。这些地方可以通过文件查找找出来。主要集中在这几个文件中。1. Hexo\themes\next.bowerrc 2. Hexo\themes\next.gitignore 3. Hexo\themes\next.javascript_ignore 4. Hexo\themes\next\bower.json 。修改完毕后,刷新重新g一遍就ok啦。

然而我觉得这个太麻烦了,毕竟要改很多东西,既然新版本已经修复这个问题了,那我就重新安装吧。安装前先把文件先备份了一下,然后就按照Next官网的说明,使用git来clone最新版本(之前我是下载安装)。

在终端窗口下,用cd定位到Hexo站点目录,然后clone,具体代码如下:

$ cd your-hexo-site
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

cd后面的“your-hexo-site”改成你自己的hexo路径。

安装完了把主题目录下的_config.yml文件替换成更新前的文件,其中的_internal: vendors修改为_internal:lib (大概在347行的地方),然后这个bug就可以解决了。

使用google字体影响网页加载效率

对网页加载进行分析后,发现有三个东西影响网页加载效率:

  • 首先是Swiftype 搜索,这个是因为墙的原因,但是我又不想替换成localsearch,所以这个问题就先略过;
  • 第二个是不蒜子统计,本来想替换成腾讯分析,但是貌似需要先给博客买个域名,然后腾讯分析才能识别,不然光是tc9011.github.io是识别不到的,这个涉及到购买域名,域名解析等问题,所以我暂时忍一下(其实是没钱了T^T);
  • 最后一个就是google字体,其实国内可以通过360cdn来访问。具体方法如下:

找到\themes\next\layout_partials\head\external-fonts.swig文件,把里面的fonts.googleapis.com 改成fonts.useso.com

实践证明,改过后速度更慢了,于是我又改回了fonts.googleapis.com,ORZ

添加留言本页面

之前添加了多说评论,无意中看到别人家的博客中有留言本功能,于是我也想整一个。其实方法也是蛮简单的。

1、添加留言本page

先cd到博客根目录,然后运行:

hexo new page guestbook

2、在留言本页面中添加多说代码

进入到博客的source目录,里面会多了一个gusetbook文件夹,里面有一个index.md文件,打开该文件添加以下代码:

<div class="ds-recent-visitors" data-num-items="28" data-avatar-size="42" id="ds-recent-visitors"></div>

然后登陆自己多说站点,进入设置->自定义CSS,添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#ds-reset .ds-avatar img,
#ds-recent-visitors .ds-avatar img {
width: 54px;
height: 54px; /*设置头像长宽*/
border-radius: 27px; /*设置头像圆角效果*/
-webkit-border-radius: 27px; /*圆角效果:兼容webkit*/
-moz-border-radius: 27px;
box-shadow: inset 0 -1px 0 #3333sf; /*设置头像阴影效果*/
-webkit-box-shadow: inset 0 -1px 0 #3333sf;
}
#ds-recent-visitors .ds-avatar {
float: left
}
/*隐藏多说版权*/
#ds-thread #ds-reset .ds-powered-by {
display: none;
}

3、菜单中设置留言本

找到NexT主题设置的_config.yml文件里面的menu

1
2
3
4
5
6
7
menu:
home: /
#about: /about
archives: /archives
tags: /tags
categories: /categories
guestbook: /guestbook

menu_icons下为留言本设定图标:

1
2
3
4
5
6
7
8
9
10
11
menu_icons:
enable: true
#KeyMapsToMenuItemKey: NameOfTheIconFromFontAwesome
home: home
about: user
categories: th
tags: tags
archives: archive
commonweal: heartbeat
search: search
guestbook: book

我用的是 book 这个图标,如果想要设定为其他图标,请访问:Font Awesome Icons,找到喜欢的图标,记录下图标后的关键字再填写到 menu_icons 下。

4、添加多语言文件的值

因为这里使用的是中文,找到languages文件夹里面的zh-Hans.yml文件,menu子项中添加留言:

1
2
3
4
5
6
7
8
9
menu:
home: 首页
archives: 归档
categories: 分类
tags: 标签
about: 关于
search: 搜索
commonweal: 公益404
guestbook: 留言

SEO优化

1、添加robots.txt

可以参考我的robots.txt,代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# hexo robots.txt
User-agent: *
Allow: /
Allow: /archives/
Disallow: /vendors/
Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /vendors/
Disallow: /fancybox/
Sitemap: https://tc9011.github.io/sitemap.xml
Sitemap: https://tc9011.github.io/baidusitemap.xml

把robots.txt放在你的hexo站点的source文件下即可。

2、添加sitemap网站地图

之前学了SEO,尝试也给自己网站做一下SEO,具体方法如下:

  1. 安装hexo的sitemap网站地图生成插件

    1
    2
    npm install hexo-generator-sitemap --save
    npm install hexo-generator-baidu-sitemap --save
  2. 在你的hexo站点的_config.yml添加下面的代码

    1
    2
    3
    # hexo sitemap网站地图
    sitemap:
    path: sitemap.xml
  3. 配置成功后,hexo编译时会在hexo站点根目录生成sitemap.xml和baidusitemap.xml
    其中sitemap.xml适合提交给谷歌搜素引擎,baidusitemap.xml适合提交百度搜索引擎。

3、给非友情链接的出站链接添加“nofollow”标签

以hexo的NexT主题为例,需要修改两处

  1. 找到footer.swig,路径在your-hexo-site\themes\next\layout\_partials,将下面代码
1
{{ __('footer.powered', '<a class="theme-link" href="http://hexo.io">Hexo</a>') }}

改成

1
{{ __('footer.powered', '<a class="theme-link" href="http://hexo.io" rel="external nofollow">Hexo</a>') }}

将下面代码

1
<a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">

改成

1
<a class="theme-link" href="https://github.com/iissnan/hexo-theme-next" rel="external nofollow">
  1. 修改sidebar.swig文件,路径在your-hexo-site\themes\next\layout\_macro,将下面代码
1
<a href="{{ link }}" target="_blank">{{ name }}</a>

改成

1
<a href="{{ link }}" target="_blank" rel="external nofollow">{{ name }}</a>

将下面代码

1
<a href="http://creativecommons.org/licenses/{{ theme.creative_commons }}/4.0" class="cc-opacity" target="_blank">

改成

1
<a href="http://creativecommons.org/licenses/{{ theme.creative_commons }}/4.0" class="cc-opacity" target="_blank" rel="external nofollow">

这是根据动动手指,不限于NexT主题的Hexo优化(SEO篇来进行优化的,优化过程中发现,还是需要有自己的域名,不然百度抓不到你的数据,哎~等工作了一定要买一个域名(奋斗脸)。

多说评论不稳定,加载速度慢优化

加载多说的时候,因为对方服务器的原因,很不稳定,经常刷不出多说评论,所以决定优化一下,多说评论不稳定,加载速度慢优化方法,主要参考这篇文章进行了优化,具体方法:

  1. 在七牛镜像储存中,镜像源地址填写http://static.duoshuo.com,然后保存。

20161109144742016-11-09_15-13-09.png

加速成功后,可以通过七牛提供的空间访问域名访问到多说镜像网站,例如我的默认域名是http://og9ocpmwk.bkt.clouddn.com/,直接可以链接到多说的镜像网站。

  1. 下载多说核心脚本embed.js,需要更改一处地方代码,

    1
    function n(e){j.theme=e,"none"!=e&&o.injectStylesheet(j.STATIC_URL+"/styles/embed"+(e?"."+e+".css?"+R[e]:"."+short_name)+".css")}

    上面代码应该是调用多说样式embed.xxx.css,我们需要修改成我们七牛镜像的多说样式,只需把j.STATIC_URL更改成七牛空间访问域名,例如我修改成"http://xxx.com"。更改后另存为dsembed.js(重命名主要防止与七牛镜像中的embed.js冲突)。最后上传到七牛空间里。现在你可以通过地址/dsembed.js访问经过七牛CDN加速后的多说核心脚本。

  2. 把多说默认引入static.duoshuo.com域名下的embed.js更改成七牛空间更改后的dsembed.js即可。

    这里以多说通用代码为例,

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <!-- 多说评论框 start -->
    <div class="ds-thread" data-thread-key="请将此处替换成文章在你的站点中的ID" data-title="请替换成文章的标题" data-url="请替换成文章的网址"></div>
    <!-- 多说评论框 end -->
    <!-- 多说公共JS代码 start (一个网页只需插入一次) -->
    <script type="text/javascript">
    var duoshuoQuery = {short_name:"araolin"};
    (function() {
    var ds = document.createElement('script');
    ds.type = 'text/javascript';ds.async = true;
    ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
    ds.charset = 'UTF-8';
    (document.getElementsByTagName('head')[0]
    || document.getElementsByTagName('body')[0]).appendChild(ds);
    })();
    </script>
    <!-- 多说公共JS代码 end -->

    embed.js引入的代码是

    1
    ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';

    这里需要更改成

    1
    ds.src = '这里是你的七牛空间embed.js的地址';

    以我的为例,我更改成了

    1
    ds.src = 'http://xxx.com/dsembed.js';

    如果你是hexo Next主题的话,需要更改的文件是duoshuo.swig,具体路径在your-hexo-site\themes\next\layout\_scripts\comments目录里。

    最后值的注意的是,因为我的网站是https://tc9011.github.io,上面的链接若写成http的话,也会加载不了多说评论。所以下面是针对https的一些修改:

    • 首先给七牛账户充值11块钱,不然这个功能木有办法用~
    • 进入存储资源列表,然后点击下图所示的https域名,七牛会自动生成一个域名;

    2016110930012016-11-09_17-55-18.png

    • 在内容管理里面选择刚刚生成的域名作为默认外链域名,记得保存。

    • 把内容管理里面的文件先全部删掉,把上面dsembed.js文件重命名一下,主要防止没有覆盖旧文件,比如我命名为dembed.js,再把文件中添加http://xxx.com的地方都改成新的外链地址,比如我的https://xxxx.com,然后保存,上传七牛。

    • duoshuo.swig中的src替换成新的域名。

      1
      ds.src = 'http://XXX.com/dembed.js';

最后

其实博客还有优化空间,比如有几个js加载速度简直是慢的令人发指,尝试了压缩代码,还是不行,感觉还是要把他们托管到其他地方,这个以后慢慢优化,可能以后买个域名,把博客同时托管到coding和github,国内访问coding,国外访问github,具体怎么操作,请听下回分解。

tc9011 wechat
欢迎订阅我的微信公众号
坚持原创技术分享,您的支持将鼓励我继续创作!