hexo优化系列

摘要

这段时间产品上线没啥事做,所以就看了网上的一些博客试着搭建一个自己的Hexo博客.基础搭建就不说了网上百度hexo+github多得是推荐一个基础搭建,格式各样的主题也很多

推荐主题

这里推荐几个好用的

  1. next 我用的就是这个 因为这个是由官方团队维护的后续添加新功能很方便
  2. Yilia 简洁大气!
  3. Yelee 该主题是作者基于Yilia修改而来,改变了大量的样式。
  4. Hexo官网主题推荐

优化�网页速度

这里先贴个地址 joryHe优化 这里面写了一大系列的相关优化.

静态文件加载优化.

静态文件就是一些Js,css等文件,通常网站都会调用一大堆这些文件,我们可以合理的将静态资源放到CDN服务器(七牛CDN等),如果你的一些静态资源文件是一些通用的文件,如jquery、fancybox等js或者css,你完全可以使用一些外部免费的开源项目CDN网站,如BootCDN是个很好的选择 ,但是个人觉得在CDN你的静态文件,你应该合理考虑哪些文件才应该进行CDN加速,因为你要CDN加速静态文件的原因是,CDN是以合理的服务器节点返回相关静态资源给你。或许有些情况,你的网站本身的服务器的速度或许比你的CDN更要快速(特别是一些免费的CDN服务)。

外部CDN

这是我添加的外部CDN链接

# 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: 

  # 以下都是我在bootCDN里引入的 外部CDN链接 可以去http://www.bootcdn.cn 找最新的版本
  # Internal version: 2.1.5
  # See: http://fancyapps.com/fancybox/
  fancybox: 
  fancybox_css: //cdn.bootcss.com/fancybox/3.1.20/jquery.fancybox.css  #3.1.20是版本号

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

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

  # Internal version: 1.2.1
  # See: http://VelocityJS.org
  velocity: //cdn.bootcss.com/velocity/1.5.0/velocity.min.js

  # Internal version: 1.2.1
  # See: http://VelocityJS.org
  velocity_ui: //cdn.bootcss.com/velocity/1.5.0/velocity.ui.min.js

  # Internal version: 0.7.9
  # See: https://faisalman.github.io/ua-parser-js/
  ua_parser:

  # Internal version: 4.6.2
  # See: http://fontawesome.io/
  fontawesome:

  # Internal version: 1
  # https://www.algolia.com
  algolia_instant_js: //cdn.bootcss.com/instantsearch.js/2.1.0-beta.2/instantsearch.min.js
  algolia_instant_css: //cdn.bootcss.com/instantsearch.js/2.1.0-beta.2/instantsearch.min.css

  # Internal version: 1.0.2
  # See: https://github.com/HubSpot/pace
  # Or use direct links below:
  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

从以上看出,很多Next插件已经可以自定义CDN链接,但是如果存在一些没有在上面列出的呢,也有办法,如果想要了解操作方式,请访问NEXT 加载您自定以的静态文件,如果你还需要进行图片的CDN,点击CDN图片加速,实现图片慢加载,以上都可以实现CDN。这里要注意的是如果要引用自己CDN资源(七牛或者阿里云)最好申请注册个个人域名和博客绑定起来.不然会出问题.

字体引用

修改站内引用的字体

实现方法:到主题的_config.yml中设置不从google加载字体(默认会加载本地字体)

font:
  enable: true
  # Uri of fonts host. E.g. //fonts.googleapis.com (Default) //fonts.css.network
  host: //fonts.css.network    #这里把这里改成  //fonts.css.network

优化到这里你会感觉你的博客网页已经快一些了但是还是会有点慢,那么久�就要用域名来优化了hexo域名优化网页

你可能感兴趣的:(hexo优化系列)