HEXO使用CDN加速并优化SEO和代码着色及blockquote CSS

摘要:这篇文章包括:(1) 使用使用CDN加速自建字体库;(2) 使用CDN加速javascript和css;(3) 自定义代码配色方案;(4) 优化HEXO的SEO;(5) 更改ALEX主题中的blockquote效果及修改CSS

这是我第一篇使用markdown写下的文章,也是目前写过最长的一篇文章,我知道为什么以前的文章都不愿意写长,不是我懒,是我在用wordpress…好吧,不黑。

HEXO的特点

昨天搭建了我的新博客,采用了HEXO作为博客框架,这是一个全静态化的博客系统,采用connect作为web服务器,再也不需要什么LAMP或者LNMP了,具有以下特点:

  • 静态化处理十分快速:相比较其他静态博客而言,HEXO可以快速生成大量静态网页,生成每个页面仅需几毫秒的时间,而这仅需执行一条·hexo g命令;
  • 支持markdown语法:前几天才接触到markdown语法,今天才正式学习,实在是一种相见恨晚的感觉。之前实在是头疼wordpress的文本编辑平台,常常觉得排版凌乱没有美感,并且那编辑工具着实不好用,插入代码都要输一长串标签,为了更漂亮的文字效果又是一长串标签。现在使用markdown我就可以在任何文本编辑器上就能写作了,使用马克飞象无论在markdown写作的过程中还是最终的效果上都有一种享受的感觉。

为什么从wordpress迁移到HEXO

一直使用wordpress已经半年多了,随着这次换服务器和域名,也想换一个博客程序体验体验,第一次看到HEXO的界面就被吸引了,简洁,专注,排版清晰,支持TOC(table of content),代码渲染十分优美。在这样的环境下写作才不至于是一种负担。


优化HEXO的加载速度

自建字体库并使用CDN加速

由于众所周知的原因google的前端库字体库在我朝一直无法使用,基本的方法也是使用360的前端库来替代google,即字体库由fonts.googleapis.com替换成fonts.useso.com,前端库由ajax.googleapis.com替换成ajax.useso.com等,这样确实能让博客提速不少。但是我们使用firebug分析一下经常能看到useso的字体加载不稳定的情况,比如

test 1

又比如:

test 2

这种情况虽然不是太频繁但也不少见。于是我们可以在服务器自检字体库,把我们需要的字体下载到服务器上,加载时直接从服务器上加载,当然,更好的办法是使用CDN来加速。以下以阿里云OSS+CDN为例,七牛也类似。

下载所需字体

使用浏览器的调试、开发者工具(F12键)打开博客网站,以firefox+firebug(插件)为例,可以看到

http://fonts.useso.com/css?family=Source+Code+Pro:400,700
http://fonts.useso.com/css?family=Open+Sans:300,600

这两个url,在浏览器中打开,把所有内容复制到fonts.css(新建)中,如

fonts.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
@font-face {
font-family: 'Source Code Pro';
font-style: normal;
font-weight: 400;
src: local('Source Code Pro'), local('SourceCodePro-Regular'), url(http://fontstatic.useso.com/s/sourcecodepro/v6/mrl8jkM18OlOQN8JLgasD9V_2ngZ8dMf8fLgjYEouxg.woff2) format('woff2'), url(http://fontstatic.useso.com/s/sourcecodepro/v6/mrl8jkM18OlOQN8JLgasDxM0YzuT7MdOe03otPbuUS0.woff) format('woff');
}
@font-face {
font-family: 'Source Code Pro';
font-style: normal;
font-weight: 700;
src: local('Source Code Pro Bold'), local('SourceCodePro-Bold'), url(http://fontstatic.useso.com/s/sourcecodepro/v6/leqv3v-yTsJNC7nFznSMqUo0As1BFRXtCDhS66znb_k.woff2) format('woff2'), url(http://fontstatic.useso.com/s/sourcecodepro/v6/leqv3v-yTsJNC7nFznSMqVkQc6VGVFSmCnC_l7QZG60.woff) format('woff');
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
src: local('Open Sans Light'), local('OpenSans-Light'), url(http://fontstatic.useso.com/s/opensans/v10/DXI1ORHCpsQm3Vp6mXoaTegdm0LZdjqr5-oayXSOefg.woff2) format('woff2'), url(http://fontstatic.useso.com/s/opensans/v10/DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(http://fontstatic.useso.com/s/opensans/v10/MTP_ySUJH_bn48VBG8sNSugdm0LZdjqr5-oayXSOefg.woff2) format('woff2'), url(http://fontstatic.useso.com/s/opensans/v10/MTP_ySUJH_bn48VBG8sNSnhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
  • 首先把该文件中出现的链接都复制到浏览器中下载所有需要的字体,字体文件以woff和woff2文件结尾。之后再把字体文件上传至OSS中,获得的url以http://static.chenhd.com/fonts/xxx.woff为例

  • 由于我们需要把fonts.css文件上传至OSS,获得一个url,假设该url为http://static.chenhd.com/fonts.css,那么我们需要把如上文件中所有字体的url替换成对应的http://static.chenhd.com/fonts/xxx.woff

    以第一个链接为例,将http://fontstatic.useso.com/s/sourcecodepro/v6/mrl8jkM18OlOQN8JLgasD9V_2ngZ8dMf8fLgjYEouxg.woff2替换为http://static.chenhd.com/fonts/mrl8jkM18OlOQN8JLgasD9V_2ngZ8dMf8fLgjYEouxg.woff2

    这样把所有下载下来的字体和fonts.css上传至CDN。

修改head.ejs调用css

以alex主题为例,vim themes/alex/layout/_partial/head.ejs,将:

1
2
3
<link href="//fonts.useso.com/css?family=Source+Code+Pro:400,700" rel="stylesheet" type="text/css">
<link href='//fonts.useso.com/css?family=Open+Sans:300,600' rel='stylesheet' type='text/css'>

修改为

1
2
3
<link href="//static.chenhd.com/fonts.css" rel="stylesheet" type="text/css">
<link href='//static.chenhd.com/fonts.css' rel='stylesheet' type='text/css'>

这样就修改完了,我们来测试一下性能。

修改前

修改后

可以看到修改前字体的加载一共用了1.6s的时间,修改后,公用了0.5s的时间,提升还是相当大的。并且,和useso经常抽风相比,自建CDN字体库就稳定多了。如果你也在使用alex主题,那么可以简单的执行最后一步,使用我提供的CDN url即可。

使用CDN加速javascipt和css

由于我的服务器放在东京,当然主角是担任梯子,顺便挂一个HEXO,所以还是把javascipt和css放到了CDN上。方法也很简单,跟上面的字体库差不多。

先debug看加载了那些js和css,js主要有:

javascipt

css主要有:

css

出去修改过的fonts.css还有两个。

首先从服务器上下载如下文件:
themes/alex/source/js/jquery.min.js themes/alex/source/js/jquery.scrollLoading.js themes/alex/source/js/script.js themes/alex/source/fancybox/jquery.fancybox.js themes/alex/source/fancybox/jquery.fancybox.pack.js themes/alex/source/fancybox/jquery.fancybox.css

上传至CDN,假设url都为http://static.chenhd.com/js/
编辑themes/alex/layout/_partial/after-footer.ejs
将其中的

1
2
3
4
5
6
7
8
9
<%- js('js/jquery.min') %>
<%- js('js/jquery.scrollLoading') %>
<% if (theme.fancybox){ %>
<%- css('fancybox/jquery.fancybox') %>
<%- js('fancybox/jquery.fancybox.pack') %>
<% } %>
<%- js('js/script') %>

修改为

1
2
3
4
5
6
7
8
9
<%- js('http://static.chenhd.com/js/jquery.min') %>
<%- js('http://static.chenhd.com/js/jquery.scrollLoading') %>
<% if (theme.fancybox){ %>
<%- css('http://static.chenhd.com/js/jquery.fancybox') %>
<%- js('http://static.chenhd.com/js/jquery.fancybox.pack') %>
<% } %>
<%- js('http://static.chenhd.com/js/script') %>

经测试

未优化js

优化js后

优化前需要3.2秒,优化后只需要0.7秒,共CDN加速了一个CSS和5个js。

修改代码高亮的配色方案

alex主题默认使用的代码高亮插件为Tomorrow Theme

默认的配色方案是Tomorrow Night Eighties,如果我们想要修改也很简单,

编辑/var/www/themes/alex/source/css/_partial/highlight.styl,修改其中的颜色值即可,比如可以使用Tomorrow Night Bright

1
2
3
4
5
6
7
8
9
10
11
12
# 000000 Background
# 2a2a2a Current Line
# 424242 Selection
# eaeaea Foreground
# 969896 Comment
# d54e53 Red
# e78c45 Orange
# e7c547 Yellow
# b9ca4a Green
# 70c0b1 Aqua
# 7aa6da Blue
# c397d8 Purple

此外,alex默认的单行代码是没有颜色的,如果需要修改可以编辑该文件

1
2
3
4
5
6
7
.article-entry
pre, code
font-family: font-mono
code
background: color-background
text-shadow: 0 1px # fff
padding: 0 0.3em

将其中的background: color-background这句替换成background: # ffec8b,颜色可以改成你喜欢的颜色。

对HEXO的SEO建议

没有了wordpress里面的各种SEO插件我们只有自己动手了,以下几点是操作的过程的一些经验,对SEO和评分都会有些帮助。

提交sitemap

sitemap 叫做站点地图,作用是向搜索引擎通告有哪些可以抓取的网页并提供一个简短的描述,优化网站的收录和SEO。HEXO已经有两款插件可以自动产生sitemap,hexo-generator-sitemaphexo-generator-baidu-sitemap,安装和使用都很简单,前者产生标准的sitemap,后者提供对百度sitemap结构的支持。

安装

1
2
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save

配置

编辑_config.yml,添加以下内容

1
2
3
4
sitemap:
path: sitemap.xml
baidusitemap:
path: baidusitemap.xml

之后我们需要自己手动到各站长平台去提交sitemap,可惜的是百度站长平台并没有对所有站长开放,只有网站到一定等级百度才会开发提交sitemap的入口。

对配置的更改只有重启hexo server才能生效

添加meata language信息

当我使用bing的SEO检测时,bing提示我存在如下问题:

中严重性问题

页面缺失 meta language 信息。

建议的操作:
在页面的 <head> 部分使用 <meta http-equiv="content-language" content="ll-cc">标记,其中 "ll-cc" 表示该内容适用的语言和国家/地区的区域性代码。另外,您也可以在 <html><title> 标记中使用 lang="ll-cc" 属性。

SEO 说明:
Meta Language 信息可作为帮助我们了解页面内容适用的目标语言和国家/地区的提示。如果您的网站不位于该国家/地区,则此信息便能起作用。使用 “content-language” 元标记将区域性代码嵌入页面的 <head> 部分。例如,<meta http-equiv="content-language" content="en-gb"> 表示页面的语言是英文,适用国家为英国。

所以我们需要在静态化时加入这个meta language的信息。以alex主题为例,编辑 themes/alex/layout/_partial/head.ejs该文件,在<head></head>之间添加<meta http-equiv="content-language" content="zh-cn">,用来告知搜索引擎我们的语言和国家偏好。

当我在检查这个时才知道 .so 域名所索马里的顶级域名。当时想注册 .me域名,好不容易等到前一个人域名到期想要抢注,结果从域名到期到删除还有两个多月的时间,当天那货就又续费了,域名开价$2000,于是我只能注册这个大索马里域名。话说像io,sh,im这些看起来不错的域名都好贵- -

扯远了。添加完成我们再生成静态页面hexo g后就OK了。

添加Meta Description

和签名指定language一样,都是使用了meta元信息,这个对SEO还是蛮重要的。像keywords,description 给搜索引擎提供了网站的关键字和描述。HEXO默认已经为每个文章(post)提供了meta description,为文章最前面的150字,这部分将在该文章在搜索引擎中显示时呈现在标题的下方,是一个对整篇文章的概述。所以我们可以在文章的最前面提供一些文章的摘要,用以优化SEO。

此外HEXO还提供了网页首页(index)的description,显示在该网站被搜索引擎呈现时的标题下方,对美观、友好、增加流量还是有一定帮助的。例如本站就修改成:

Tyr的个人博客。折腾好玩的东西,分享所学所得所见所感,关注互联网、智能硬件和网络安全。

使用很简单,我们只需要在_config.yml配置文件中的description字段添加对网站的描述即可。

修改配置文件需要重启hexo进程才能生效

修改文章链接

HEXO默认的文章链接形式为 domain/year/month/day/postname,默认就是一个四级url,并且可能造成url过长,对搜索引擎是十分不友好的,我们可以改成 domain/postname 的形式。编辑_config.yml文件,修改其中的permalink字段为permalink: :title.html即可。

此外由于HEXO架设在linux服务器上,我常用vim编辑文章,而文章名又多是中文,命令行环境下编辑一来是需要安装中文字体,而来是比较麻烦,于是我们可以配置postname为year-month-day-postname.md的形式,方便编辑。

默认的url中的postname就是编辑文章指定的titlename,支持中文url,如果想要对url进行自定义,可以在文章的开头加permlink字段,如

1
2
3
4
5
6
7
8
title: HEXO使用CDN加速并优化SEO
date: 2015-02-09 17:52:45
tags:
- hexo
categories:
- hexo
permalink: hexo-optimization
---

现在百度以及可以完美支持中文url了,并且有利于SEO。但是还是要注意:

什么时候应该使用中文URL,什么情况下不应该使用中文URL

1、网站栏目名不建议使用中文URL,虽然如上面所说,百度搜索引擎虽能完美识别中文URL,并能够有不错的排名。但大家还是“活在当下”,使用拼音或者英文来作为目录名,并且包括关键词,这是一个老调的建议了,在此不详细说明。

2、网站的TAGS强烈建议使用中文URL。现在很多CMS都提供了TAGS标签功能,如果能实现静态化那最好不过了。充分利用TAGS功能在文章中进行网站内链的建设,也会有意想不到的效果哦。建议:每篇文章中的内链不要超过三个,什么道理,可能很多少都比我清楚吧。

中文URL的缺点

1、关键词被编译后,URL会变得很长,这是搜索引擎不建议的,但并非不能使用;

2、使用被引用,中文URL在转码后会变成形如:%E5%A9%9A%E7%BA%B1 的结构,一些编辑器支持的问题会造成错误链接地址或错误的URL识别、分割 ,甚至有些网站会产生状态为404的引用指向。

——引自绿壳鸡蛋

blockquote CSS的修改

这个是alex这个主题值得吐槽的一点,默认的blockquote的css效果不太理想,截两张图对比一下:

修改前

修改后

效果是不是十分显著。心酸的是让我一个根本不懂CSS的人为了对美的追求去完成这样艰巨的任务。。

  • 百度css 引用文字效果 ,无果,都是css的引用,这个搜索会有歧义
  • css贴吧问问人吧,结果第一页进去好多跟帖都是0
  • QQ有一个不太熟的前端设计师,他肯定没问题,问题是人家不在线又不好意思打扰…
  • 我想法很简单,只要实现马克飞象的这种效果就好了啊!
    • 设置里没有导出CSS
    • 导出html,结果html里面压根没有css,那效果简直不能看
    • 傻了。我用的是客户端版的马克飞象,我如果用浏览器版的,F12不就可以看到加载的CSS了吗!

机智如我,在主题端搜center找到了这个效果定义在blockquote红,然后在偌大的css中搜索blockquote终于让我找到了,虽然有那么多,那么多,那么多…终于在我的不懈尝试下终于成功了。

简述如下

编辑themes/alex/source/css/_partial/article.styl样式表,将其中的blockquote段落完全修改成:

1
2
3
4
5
blockquote
background-color: rgba(102, 128, 153, 0.05);
border-left: 5px solid rgba(102, 128, 153, 0.075);
margin: 0 0 21px;
padding: 10.5px 21px;

*注意是blockquote.pullquote之间的内容

这样alex主题就实现了马克飞象中的blockquote效果。

如果您觉得这篇文章对您有帮助,不妨支持我一下!