前言
接上一篇Hexo进阶高级教程(一)继续探讨Hexo,主要的功能都有了,要想让整个博客更丰富,访问速度更快更流畅,就需要添加一些附加的功能,做一些优化处理。
下面会讲解:
- 七牛云图床--用来做图片存储管理
- SEO优化--让更多的人通过搜索引擎搜到我们
- 网易云跟帖--文章的留言区
- leancloud阅读统计--统计阅读量
- 百度、谷歌统计--网站流量统计
本文地址:http://tigerliu.site/2017/06/hexo-2
七牛云图床
在写博文的时候,难免都会添加一些图片在文章内,正常情况下,我们都使用外链形式添加到我们的博文,为什么要选七牛云呢?让我们来看看它的特点:
- 10G 免费流量(图片尽量压缩 200k 以内)
- 服务稳定(写作才是核心,就别总折腾图片的事情了)
- 便宜(就算付费也相对比较便宜,作为学生党觉得可以接受)
注册七牛云
永远不变的第一步,骚年得先去注个册,有了ID才能继续玩,链接:七牛云注册 ,按照提示一步一步来就好了。
PS:登录七牛云,验证邮箱, 实名认证 ,可选择支付宝实名认证--前提是你支付宝已经实名认证 ,正常情况下 支付宝实名认证 即刻就可以通过(推荐)
创建对象存储
登录七牛云,默认进来就是资源主页,然后在七牛云官方资源栏--》对象存储 点击立即添加,如下图:
按照提示填写好存储空间名称,存储区域默认就好了,访问控制--选择公开空间
PS:选择私有空间 需要有Key值才能访问,这里选择公开空间 上传完后 直接就可以获取外链 比较方便
上传图片,获取外链
选择内容管理--》点击上传文件 ,上传完成之后 点关闭,回到列表页就可以看到刚才上传的图片了
鼠标悬浮在文件名上 可点击蓝色的笔重命名,右边的眼睛Icon点击 可以获取外链地址,复制外链就可以使用了。
新增图片样式
图片样式--》新建图片样式 根据不同业务需要选择场景--》选择合适的缩放方式,是否剪裁,图片水印 这个功能用的比较多(可设置图片水印,文字水印),设置输出格式,然后保存样式。给处理样式命名, 点击下面的保存按钮。
我们看到右侧的处理代码,这个是干嘛的呢?我们保存完了之后又怎么使用呢?
小编刚开始也是一脸懵逼,复制这段代码,打开刚才上传的图片外链,然后在地址后面用连接符?加上处理的代码,回车就可以看到我们的图片已经加上了水印。不加处理代码就是我们的原图。
//图片外链?处理代码或者样式名称
//示例:
http://orzlwnnoa.bkt.clouddn.com/logo.jpg?watermark/2/text/5LiD54mb5LqR/font/5a6L5L2T/fontsize/240/fill/IzAwMDAwMA==/dissolve/100/gravity/SouthEast/dx/10/dy/10|imageslim
与极简图床的结合
在写博客的时候,每次都要做这样重复的操作,有没有一键上传并且获取外链的方式呢,必须有啊。这里介绍下极简图床与七牛云的结合。
打开极简图床 注册,登录 点击右侧的小齿轮 绑定七牛云账号信息
- 空间名称:填写在创建对象存储时的空间名称
- 域名:拷贝外链默认域名
- AK: 点击左侧的导航栏个人中心--》密钥管理 获取AK信息
- SK:点击左侧的导航栏个人中心--》密钥管理 获取SK信息
点击保存就OK了,极简支持截图粘贴,拖拽或者点击上传,上传完可以复制链接/MD链接生成/预览, 有木有很赞,省了很多事!!!
SEO优化
SEO是由英文Search Engine Optimization缩写而来, 中文意译为“搜索引擎优化”!
SEO是指通过对网站进行站内优化(网站结构调整、网站内容建设、网站代码优化等)和站外优化,从而提高网站的关键词排名以及公司产品的曝光度。
除开站外SEO,我们能做的有两方面。一是针对个人网站的页面排版进行SEO的优化;二是针对搜索引擎进行主动的优化。
SEO准备工作
- sitemap插件安装
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save
- 修改博客配置文件
在根目录配置文件_config.yml中修改url为你的站点地址
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://tigerliu.site
root: /
执行完之后就会在网站根目录生成sitemap.xml文件(搜索引擎通用文件)和baidusitemap.xml文件(百度专用文件),然后执行hexo d -g 提交到我们站点,打开链接http://tigerliu.site/sitemap.xml 查看该文件是否能正确访问。
- 添加蜘蛛协议robots
在根目录source文件下新建robots.txt文件,添加以下文件内容(将Sitemap中的域名切换成自己网站域名)
# hexo robots.txt
User-agent: *
Allow: /
Allow: /archives/
Disallow: /vendors/
Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /vendors/
Disallow: /fancybox/
Sitemap: http://tigerliu.site/sitemap.xml
Sitemap: http://tigerliu.site/baidusitemap.xml
参数说明: User-agent: * 允许所有robot访问,Allow 允许访问X目录,Disallow 禁止访问X目录
- 出站链接添加 “nofollow” 标签
nofollow标签是由谷歌领头创新的一个“反垃圾链接”的标签,并被百度、yahoo等各大搜索引擎广泛支持,引用nofollow标签的目的是:用于指示搜索引擎不要追踪(即抓取)网页上的带有nofollow属性的任何出站链接,以减少垃圾链接的分散网站权重。
以next主题为例:
1.themes/next/layout/_partials目录 修改footer.swig文件,将下面代码中的a标签 加上rel="external nofollow" 属性
{{ __('footer.theme') }} -
NexT.{{ theme.scheme }}
2.themes/next/layout/_macro目录,修改sidebar.swig文件,将下面代码中的a标签 加上rel="external nofollow"属性
{{ name }}
百度收录
生在我大天朝,使用频率最多的当属百度了,下面简单介绍下百度的一些优化处理。
- 注册账号
打开百度站长,注册登录账号 - 添加网站
左侧 我的网站--》站点管理 添加网站,按照引导步骤来就好了。见下图:
在第三步 验证网站这里 建议选择文件验证或者CNAME验证,验证规则选项下面已经给出了。
PS:将下载下来的文件放至根目录/source目录下,若为HTML格式,需要在文件内加上layout: false 否则在编译的时候 也会一起编译。
---
layout: false
---
J9sxxxxx
继续hexo d -g 将文件上传至我们的网站,查看刚才的文件是否成功上传,然后点击完成验证。
- 链接提交
在左侧找到链接提交,右边可以看到提交方式有两种:自动提交,手动提交
手动提交我们就不谈了,看看自动提交。主要分为 主动推送,自动推送,sitemap 三种方式。
1 主动推送
安装推送插件
npm install hexo-baidu-url-submit --save
在根目录的_config.yml配置文件中新增字段:
baidu_url_submit:
count: 100 # 提交最新的一个链接
host: tigerliu.site # 在百度站长平台中注册的域名
token: bwxxxxx # 请注意这是您的秘钥, 所以请不要把博客源代码发布在公众仓库里!
path: baidu_urls.txt # 文本文档的地址, 新链接会保存在此文本文档里
deploye属性 新增字段
deploy:
- type: baidu_url_submitter
2 自动推送
这里以next主题为例,打开主题配置文件_config.yml将baidu_push设置为true
# Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO
baidu_push: true
3 sitemap
将上面我们生成的sitemap文件地址 提交到百度,如下图:
所有配置完后,可以利用site:域名 在百度搜索栏测试我们的结果 例如: site:tigerliu.site
结果是不是什么也没找到,百度收录需要一段时间,耐心等待吧!!!
谷歌收录
还是google收录快,比百度快的不是一点半点,设置完成基本2分钟左右即可看到效果。一起来看看!!!
- 注册登录
google站长 - 添加网站
跟百度收录类似,验证网站 使用google的推荐方法,也就是百度收录的文件验证。
- 提交站点地图
验证完网站后,回到我们的网站列表,点击网站,如下图:
在左侧的抓取--》点击站点地图 ,添加站点地图(把我们刚才生成的sitemap.xml地址添加进去),如图:
- Google 抓取工具
点击左侧的google抓取工具,输入抓取地址,点击右边的抓取按钮,即可抓取我们的网站。默认不输入 即为抓取首页,状态栏显示完成即为抓取成功,然后将该地址提交至索引。如图:
ps: 至此google配置已经完成了,等待2分钟,回到google搜索页,赶紧试一试!!!
网易云跟帖
博文怎么能少评论功能呢,之前的多说目前已经不可用了,在畅言和网易云跟帖之间,我选了后者。使用之前需要有自己的域名,没有见我的上一篇Hexo进阶高级教程(一)文章,注册一个,也不贵。下面就来谈谈云跟帖:
畅言需要备案,如果你的网站已经备案可以添加
- 注册登录
万年不变的注册登录,网易云跟帖注册 - 设置站点信息
登录后,点击后台管理,填写站点信息,站点名称随便取,站点网址填我们购买的域名,保存。 - 获取productKey
点击获取代码,在左侧找到App SDK,右侧的APP KEY 即为我们需要的key,点击复制。如图:
以next主题为例,在next主题配置文件_config.yml中设置productKey
# Gentie productKey
gentie_productKey: ea08xxxxx
效果预览:
阅读统计功能
next主题集成了leancloud,在使用的时候设置好app_key和app_id 就可以使用了。
- 注册登录
leancloud注册 - 创建应用
登录后在右上角选择国内节点,创建应用。如图:
- 主题配置
鼠标悬浮到新创建的应用上,点击右上角的齿轮进入设置界面,点击应用key获取app_key和app_id 如图:
将刚才获取到的key,id填入主题配置文件
# Show number of visitors to each article.
# You can visit https://leancloud.cn get AppID and AppKey.
leancloud_visitors:
enable: true
app_id: yourapp_id
app_key: yourapp_key
- 创建Class
在左侧点击存储,创建一个名为Counter的Class文件,这里的名称一定为Counter 不能随意取!!!
PS:设置完后,回到我的博客,随便点击一篇博文,刷新几次 就可以在leancloud--》存储--》Counter看到我们的浏览记录了,在我们的博文副标题也可以看到浏览记录。
百度、谷歌统计
如何查看自己的博客每天被多少人访问呢~ 下面一起来看看在hexo中如何使用统计插件,每天看到自己的博客访问量越来越高也是一种享受。
- 注册登录
百度统计注册、谷歌统计注册 - 百度统计
登录后 在左侧找到代码管理--》点击代码获取--》右侧新增网站,如图:
拷贝统计代码ID
- 谷歌统计
登录后,新增一个统计网站,填写网站信息,点击下面的获取跟踪ID,如图:
进入页面后,你会看到跟踪ID,复制它,如图:
- 修改配置文件
以next主题为例,修改主题配置文件,添加baidu、googleId
# Baidu Analytics ID
baidu_analytics: 9758xxxx
# Google Analytics
google_analytics: UA-3534xxxx
PS:谷歌统计用的比较少,因为有墙,在加载代码的时候,很容易阻塞。故在国内我们使用百度、CNZZ比较多!!!
结语
看完上面的介绍,有木有感觉配置还是蛮多的,正所谓工欲善其事,必先利其器。当初小编也花了一周多星期才搭建好一个稍微满意点的博客,总之喜欢博客爱折腾,功夫不负有心人,终会弄出一个非常6的博客。祝大家在HEXO的路上玩的嗨皮!!!
相关链接:
Hexo+github博客搭建
Hexo进阶高级教程(一)
Hexo进阶高级教程(三)
实际效果展示可移步个人博客 -- Tigerliu Blog