GitHub+Hexo搭建个人博客（五）Hexo博客优化和补充

2018-08-25 本文已影响0人 _danboard

SEO

SEO（Search Engine Optimization），汉译为搜索引擎优化。搜索引擎优化是一种利用搜索引擎的搜索规则来提高目前网站在有关搜索引擎内的自然排名的方式。——百度百科

1 站点地图

站点地图是一个网站所有链接的容器。很多网站的连接层次比较深，爬虫很难抓取到，站点地图可以方便爬虫抓取网站页面，通过抓取网站页面，清晰了解网站的架构，网站地图一般存放在根目录下并命名sitemap，为爬虫指路，增加网站重要内容页面的收录。——百度百科

安装插件

$ npm install hexo-generator-sitemap --save     
$ npm install hexo-generator-baidu-sitemap --save

站点配置文件

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://www.danboard.me
root: /
permalink: :title/        # 链接后缀
permalink_defaults:       # 默认值
  lang: en

permalink默认是:year/:month/:day/:title/ ，这样我们的文章生成的连接就会是sitname/year/month/day/title ，网站的连接层次比较深，很难被爬虫抓取，所以可以减少连接的层次

验证

执行修改后，可以在public目录中看到生成的两个文件sitemap.xml和baidusitemap.xml

在浏览器中输入相应地址，如http://www.danboard.me/sitemap.xml来检查是否生成成功

2 谷歌收录

效率非常高，但需要翻墙，也就是说你的博客只能在境外才能被搜索到

首先检查站点是否被收录
http://oxv1k8kvi.bkt.clouddn.com/18-4-7/42569564.jpg
尝试使用Google Search Console
1. 登录/注册
2. 添加站点
http://oxv1k8kvi.bkt.clouddn.com/18-4-7/26377477.jpg
1. 验证站点
http://oxv1k8kvi.bkt.clouddn.com/18-4-7/98687379.jpg
1. 提交站点地图
  
  抓取 > 站点地图
  http://oxv1k8kvi.bkt.clouddn.com/18-4-7/11008804.jpg
2. 验证收录
  image

3 百度收录

同样是，登录/注册 $\rightarrow$ 添加站点 $\rightarrow$ 验证站点 $\rightarrow$ 提交站点地图

提交链接效率：主动推送 > 自动推送 > sitemap

主动推送

安装插件

$ npm install hexo-baidu-url-submit --save

站点配置文件，添加

baidu_url_submit:
   count: 1            # 提交最新的一个链接
   host: www.danboard.me   # 你的博客站点
   token: your_token   # 你的密钥
   path: baidu_urls.txt # 新链接存放文档

your_token:

http://oxv1k8kvi.bkt.clouddn.com/18-4-7/53193568.jpg

提交

更新发布，使用命令hexo deploy时提交

deploy:
- type: git
  repo: 
    - 你的github项目地址
  branch: master           # old
- type: baidu_url_submitter  # new

注意：-属于一部分，注意格式对齐，否则会报错

自动推送

主题配置文件 ，字段baidu_push

# Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO
baidu_push: ture

脚本位置位于themes/next/layout/_third-party/seo/baidu-push.swig

sitemap

与谷歌提交一致

！！！还没有结束，百度收录不仅慢而且也比较麻烦了，因为github屏蔽了百度的爬虫，所以部署在github上的静态站点很难被百度搜索到。

解决方法：

将静态Pages托管到Coding上，重新解析一个新的二级域名，这样Coding和Github上的Pages就变成了两个独立的博客了。
同一域名解析到不同的IP，保持之前的配置不改动，通过配置DNS，使国内的线路流量分配到Coding上，而其他线路分配到GitHub。这样，百度抓取就会跑到Coding上去。

4 DNS流量分发

Coding

配置与GitHub是一致的，创建项目 $\rightarrow$ 开启静态Pages $\rightarrow$ 绑定域名

站点配置文件，找到deploy：

deploy:
- type: git
  repo: 
    - 你的github项目地址
    - 你的coding醒目地址
  branch: master          # old
- type: baidu_url_submitter  # new

DNSPOD

已被腾讯收购，可以登录DNSPOD / 腾讯云
1. 修改域名服务器，以GoDaddy域名为例
  
  先进入腾讯云控制台 $\rightarrow$ 域名管理，可以看到下方提示
  http://oxv1k8kvi.bkt.clouddn.com/18-4-7/79995561.jpg
2. 登录GoDaddy
  
  进入域名DNS管理，修改DNS，选择自定义
  http://oxv1k8kvi.bkt.clouddn.com/18-4-7/62462219.jpg
3. 返回腾讯云，进行域名解析
  http://oxv1k8kvi.bkt.clouddn.com/18-4-7/32300687.jpg

静态文件加载

静态文件是一些js、css、html等文件，一般网站都会调用一大堆这些文件，如果调用的一些静态资源是通用的文件（第三方库），如jquery、fancybox，可以设定成合适的 CDN 地址，从而加速网站的运行。

参考：NexT文档

主题配置文档，字段vendors

# Script Vendors.
# Set a CDN address for the vendor you want to customize.
# For example
#    jquery: https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js
# Be aware that you should use the same version as internal ones to avoid potential problems.
# Please use the https protocol of CDN files when you enable https on your site.
vendors:
  # Internal path prefix. Please do not edit it.
  _internal: lib

  # Internal version: 2.1.3
  jquery: //cdn.jsdelivr.net/jquery/2.1.3/jquery.min.js

  # Internal version: 2.1.5
  # See: http://fancyapps.com/fancybox/
  fancybox: //cdn.jsdelivr.net/fancybox/2.1.5/jquery.fancybox.pack.js
  fancybox_css: //cdn.jsdelivr.net/fancybox/2.1.5/jquery.fancybox.min.css

  # Internal version: 1.0.6
  # See: https://github.com/ftlabs/fastclick
  fastclick: //cdn.jsdelivr.net/fastclick/1.0.6/fastclick.min.js

  # Internal version: 1.9.7
  # See: https://github.com/tuupola/jquery_lazyload
  lazyload: //cdn.jsdelivr.net/jquery.lazyload/1.9.3/jquery.lazyload.min.js

  # Internal version: 1.2.1
  # See: http://VelocityJS.org
  velocity: //cdn.jsdelivr.net/velocity/1.2.3/velocity.min.js

  # Internal version: 1.2.1
  # See: http://VelocityJS.org
  velocity_ui: //cdn.jsdelivr.net/velocity/1.2.3/velocity.ui.min.js

  # Internal version: 0.7.9
  # See: https://faisalman.github.io/ua-parser-js/
  ua_parser: //cdn.jsdelivr.net/ua-parser.js/0.7.10/ua-parser.min.js

  # Internal version: 4.6.2
  # See: http://fontawesome.io/
  fontawesome: //maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css

  # Internal version: 1.0.2
  # See: https://github.com/HubSpot/pace
  pace: //cdn.bootcss.com/pace/1.0.2/pace.min.js
  pace_css: //cdn.bootcss.com/pace/1.0.2/themes/blue/pace-theme-flash.min.css

Google引用

Google被墙，所以有关谷歌类的引用都会导致引用失败，使网站加载变慢。

例如：字体应用fonts.googleapis.com

网上看到两种替代的：

360：fonts.useso.com
中科大： fonts.lug.ustc.edu.cn

不过现在，问题来了，谷歌字体库解封了，360好像关了，中科大不稳定，所以呢？修改前还是要甄别一下

站长工具

http://oxv1k8kvi.bkt.clouddn.com/18-4-7/80934192.jpg

如果需要修改，可以查看主题配置文件，字段font 以及文件themes/next/layout/_partials/head/external-fonts.swig

博文压缩

NexT主题在解析markdown文件时生成的代码会包含大量的空白，增加了文档的大小，影响网站的加载速度。

安装插件
```
$ npm install --save hexo-all-minifier
```
hexo-all-minifier文档

主题配置文件，添加

all_minifier: true

js_concator:
  enable: false
  bundle_path: '/js/bundle.js'
  front: false
  silent: false

html_minifier:            # html压缩
  enable: true
  ignore_error: false
  silent: false
  exclude: 

css_minifier:         # css压缩
  enable: true
  silent: false
  exclude: 
    - '*.min.css'

js_minifier:          # js压缩
  enable: true
  mangle: true
  silent: false
  output:
  compress:
  exclude: 
    - '*.min.js'

image_minifier:           # 图片压缩
  enable: true
  interlaced: false
  multipass: false
  optimizationLevel: 2
  pngquant: false
  progressive: false
  silent: false

遇到问题

1 注意备份

之前遇到一个很严重的问题，hexo命令打错了

本来是想安装某个插件，用了一下简写命令hexo i xx

一不小心就点了回车，hexo i将文件都初始化了，打开链接一片空白

自己还庆幸着懂得版本控制，可是一想，我一直用是hexo命令，只是生成了一些静态文件提交到github上，并没，有将整个源文件push上去，一下子头就大了

最后，发现只有几个文件清空了，通过版本控制在提交到github的静态文件目录找到了对应的文件，及时修改回来。

所以呢，这一波折，就是要告诉我，要时刻做好版本控制。

GitHub上的私人仓库是要收费，而我们的源码中又包含了很多密钥，又不能放到公开仓库中。所以，要找替代品，国内有很多平台模仿GitHub的，例如Coding、码云之类，同样可以通过git控制，还提供免费的私人仓库。

同时，该项目可以在其他电脑上clone，编辑并上传。

2 大小写问题

GitHub上好像对大小写不敏感，但是链接却对大小写敏感。

我把一个标签or标题字母的大小写改了，结果就404

回到GitHub上你可以发现仓库里文件名是没有改变的，所以呢，注意字母大小写问题，改动后的文件可以先不提交，GitHub自动把原来的文件删除后再提交，就不会出错了。

3 手机适配

电脑的屏幕比较大，同样的页面大小放到手机上坑定就不合适了。

NexT主题已经初步适配了手机浏览器模式，但一些我们自定义的布局，还需要自己调整。

例如，在前文讲过的GitHub边角问题，我们都可以在/themes/next/source/css/_custom/custom.styl文件中重新定义布局，考虑标签优先权问题，可以加上!important就有绝对优先权了。

通过源代码，可以看到一种方便的手机浏览器适配方法，直接在标签内加上+mobile{}，例如我在一篇文章内添加了一个音乐播放器，电脑上宽度是合适的，手机上就爆了，修改如下：

.post .aplayer {
    width: 520px;
    margin: 0 auto;
    +mobile() { 
        width: auto;
        margin: 0 auto;
    }  
}

4 开发文档

开发文档很重要，像Hexo文档提供了配置步骤、目录说明、主题插件等等，了解下开发文档，自定义修改的时候会更加方便。