Hexo+Github优化小结

本文主要是对Hexo+Github部署个人Blog遇到小问题的一个汇总，涉及到主题，Pages服务及网站加速。

主题选择

目前比较流行的next主题和icarus主题，这两个主题都具备一定的定制性和插件。个人更喜欢icarus主题，以下以icarus主题为例进行说明。

安装主题

执行如下命令可以安装icarus主题

npm install -S hexo-theme-icarus hexo-renderer-inferno

主题配置

hexo config theme icarus

上述命令可以生产配置文件_config.icarus.yml文件及样例配置文件。此时就可以按照http://ppoffice.github.io/hexo-theme-icarus/自定义主题，对不需要样式或者插件可以在配置文件中直接注释；可以参考样例配置文件_config.icarus.yml.example进行配置。

Pages服务选择

当前可以选择Pages服务主要有github，gitee以及coding。

• github访问较慢，配置简单方便，部署后可自动更新，网上可以查询到很多hexo+github的配置知道，这里就不再赘述了
• gitee访问快，可定义从github同步pages库，每次更新均需要需要手动部署且会出莫名其妙的审查问题
• coding被腾讯云收购以后只提供静态网站部署，但是资料写的稀烂，完全不知道怎么操作

新手还是推荐使用github pags服务，未来流量增加以后可以考虑同步到coding/gitee上

网站加速

从浏览器开发人员工具上可以看到部署在github上加载最慢元素主要是图片**、js、css、字体。根据上述问题可以选择不同的加速方案。

1. 针对hexo和主题本身的js\css则只能通过更换国内Pags服务（本次暂不优化）
2. 针对第三方插件和css可以使用内建或者自定义CDN来加速
3. 针对图片文件则可以使用国内图床进行加速

使用内建或者自定义CDN进行css和js加速

• next配置加速

  vendors:
  # The CDN provider of NexT internal scripts.
  # Available values: local | jsdelivr | unpkg | cdnjs | custom
  # Warning: If you are using the latest master branch of NexT, please set `internal: local`
  internal: local
  # The default CDN provider of third-party plugins.
  # Available values: local | jsdelivr | unpkg | cdnjs | custom
  # Dependencies for `plugins: local`: https://github.com/next-theme/plugins
  plugins: custom
  # Custom CDN URL
  # For example:
  # custom_cdn_url: https://cdn.jsdelivr.net/npm/${npm_name}@${version}/${minified}
  # custom_cdn_url: https://cdnjs.cloudflare.com/ajax/libs/${cdnjs_name}/${version}/${cdnjs_file}
  custom_cdn_url: https://lib.baomitu.com/${cdnjs_name}/${version}/${cdnjs_file}

  详细配置可参考https://theme-next.js.org/docs/advanced-settings/vendors，国内建议配置baomitu。

• icarus配置加速

  # CDN provider settings
  # https://ppoffice.github.io/hexo-theme-icarus/Configuration/Theme/speed-up-your-site-with-custom-cdn/
  providers:
      # Name or URL template of the JavaScript and/or stylesheet CDN provider
      cdn: loli
      # Name or URL template of the webfont CDN provider
      fontcdn: loli
      # Name or URL of the fontawesome icon font CDN provider
      iconcdn: loli

  详细配置可参考https://ppoffice.github.io/hexo-theme-icarus/Configuration/Theme/speed-up-your-site-with-custom-cdn/，国内建议配置loli。

使用图床进行图片下载加速

当前只试用了一个图床https://imgloc.com/，只需要将主题/博客中使用到图片上传到图床，图床会生成一个或者多个外网链接（大图片图床会给出缩略图、中等规模图和原始图的链接），可以将图床外网链接直接配置在hexo主题或者博客中。本次我只是将profile图片和logo图片上传到图片。后续新写的博客则可以直接使用图床的图片链接。

其他加速措施

• 关闭不必要第三方插件，例如评论系统、分析系统（因为这些插件通常都会被浏览器隐私保护、去广告插件主动拦截，实际效果可自行评估）
• 打开博客的read more开关（在博客文件中增加<!--more-->），主页只显示博客的关键文字信息，不显示公式、图片等需要额外加载资源的内容

参考资料

http://ppoffice.github.io/hexo-theme-icarus/