博客优化 | shuguang's blog

本次博客优化包含: 对整个博客站点的模板配置以及性能优化。主要是对Next的性能和网站推广优化。

#简述

模板选择
- 在前面我们已经完成了Next主题的使用，关于更多模板请参考: Hexo 主题

#模板配置

关于Next主题的使用参考: Next主题文档
界面美化
- 本次界面美化包括首页、菜单栏、侧边栏、分类页、标签页、书籍页、归档页和友链页等。
  - 首先在next主题配置文件中开启自定义数据文件夹(source/_data/styles.styl)
  - 关于styles.styl文件参考代码
- 彩色标签
- 自定义404页面
  - 自定义或参考网上制作404页面然后放在source目录下。
- 菜单栏站点地图
  - 启用Next主题配置文件
  1
  2
  3
  menu:
  ...
  sitemap: /sitemap.xml || fa fa-sitemap
- 安装站点地图插件：`npm install hexo-generator-sitemap --save`
- 侧边栏RSS
  - RSS 是一种内容聚合的工具，它有rss 和 atom 两种协议，xml为基础协议。
    - 关于RSS: 消息来源
  - Next主题关于RSS的设置在每篇文章的底部添加RSS 链接，但这个显然不符合平常的习惯，所以将其放在左侧侧边栏位置。
    - 参考: https://www.gagahappy.com/hexo-next-theme/
Hexo 插件
- 文章单词统计（wordcount）
  - hexo-symbols-count-time
- 本地搜索（Local Search）
  - hexo-generator-search
- 评论系统
  - 使用来必力
    - 注册并登录，获取代码管理页面下的data-uid的值
    - Next主题配置: livere_uid: # 填入<your_uid>
- 图片预览
  - theme-next-fancybox3
- 脚注
  - hexo-reference

更换Markdown渲染引擎
- 支持Markdown、GFM和CommonMark
- hexo-renderer-markdown-it
  - 广泛的配置
  - 比默认渲染器(hexo-renderer-marked)更快
  - 标题的安全 ID
  - 带有 ID 的标题的锚点
  - …
绑定自定义域名（可选）
- 去域名商Godaddy或Namesilo买域名
- 关于域名的使用，参考这篇：GitHub Pages自定义域

#性能优化

SEO 优化（网站推广）
- 让搜索引擎收录你的站点
  - 优先级
    - 主动推送 > 自动推送 > 提交sitemap
  - Bing收录
  - google收录
- 关于使用 Github Pages 搭建的个人博客无法被百度收录
  - 官方给出原因是，百度爬虫爬得太狠，影响了 Github Pages 服务的正常使用
- 优化description、keyword和title
  - 调查显示只有20%的网页用到“关键字”与“描述”标签（即keyword, description）
  - description
    - Next主题默认将摘要部分作为文章的description, 所以只需要添加keyword。
    - description 的描述长度更改为介于 25 到 160 个字符之间（中文大概12到60个字符）。
  - keywords
    - 首页推荐承载3-5个关键词
      - 每个关键词有唯一的主目标业务需求性页面并且与首页相互链接。
    - 内页推荐承载1-3个长尾关键词
    - 添加1-2个关键词到title中
    - 可使用LSI找相关关键词
  - 关于使用
    - 在文章Front-matter中添加description字段，多个用逗号隔开，并以逗号结尾。
    - 在themes\next\layout\_partials\head\下的head.swing添加如下代码
      1
      2
      3
      {%- if page.keywords and page.keywords.length %}
      <meta name="keywords" content="{{ page.keywords }},{{ config.keywords }}" />
      {%- endif %}
- 优化站点的URL
  - 搜索引擎优化认为，网站的最佳结构是用户从首页点击三次就可以到达任何一个页面。
  - 修改站点的永久链接，如:permalink: :category/:name/
- 优化相关链接，外链自动添加nofollow
  - 做好站内各类页面之间的相关链接。
  - Google推荐使用nofollow，告诉搜索引擎爬虫无需抓取目标页，同时告诉搜索引擎无需将的当前页的Pagerank传递到目标页。（也不需要全部都加上，添加至少2个站外链接到相关的权威网站）
  - hexo-filter-nofollow
- 丰富站点内容
  - 扩展站点内容，增强专业性
  - 增加部分原创内容
- 关于使用子域名还是子目录
  - 需要遵守的原则是：宁缺勿滥
    - 目录内容庞大 -> 子域名
    - 能够提供足够多的内容 -> 子域名
    - 搜索引擎的处罚机制 -> 滥用子域名
网站预加载JS脚本
- instant.page:提高网站页面加载速度
  - PC端
    - 在用户单击链接之前，他们将鼠标悬停在该链接上。当用户悬停65ms时，有两个用户中的一个会单击该链接，因此instant.page此时开始预加载，平均留给页面预加载的时间超过300 ms。
    - 另一个选项是，当用户开始按下鼠标时，在释放鼠标之前进行预加载。这使得几乎没有未使用的请求，同时页面负载平均提高了80毫秒。
  - 移动端
    - 用户在释放显示器之前开始触摸显示器，平均留出90毫秒供页面预加载。
    - 另一个选择是在链接可见时立即预加载它们。
  - Dependencies: https://github.com/instantpage/instant.page
- 通过安装minify压缩JS文件
  - 安装minify: npm i minify -g
  - 压缩JS文件: minify Instant.js > Instant.min.js
文章压缩
- hexo-neat
优化图片加载
- 图片无损压缩
  - Dependencies: https://github.com/meowtec/Imagine
图床工具（PicGo图床+CDN）
- 使用图床，能缓解站点的压力的，并生成图片的唯一链接，同时也方便管理图片。
  - 使用教程
- PicGo图床
  - 官方文档
- CDN
  - CDN的全称是Content Delivery Network，即内容分发网络，依靠部署在各地的边缘服务器，通过中心平台的负载，提高用户访问响应速度和命中率。
  - 使用CDN加速来优化网站打开速度，jsDelivr + GitHub便是免费且好用的CDN。
  - GitHub使用对应仓库的资源即可: https://cdn.jsdelivr.net/gh/github_username/your_repository@main

#简述

#模板配置

#性能优化

#致谢