更新记录

Hexo博客优化日记

2019-04-09:Hexo博客搭建

  1. Win10、Ubuntu系统下的Hexo安装配置
  2. 将Hexo部署到Github上,开通Github pages服务,使用https://username.github.io访问Hexo博客。
  3. 域名绑定,使用自定义域名访问Github pages。
  4. 定制脚本,只需要敲数字就能完成一系列指令操作。

2020-09-21:使用Vercel加速Hexo博客

  1. 使用Vercel给Github pages提供免费CDN服务
  2. 根据主分支变动与否决定是否触发持续部署。

2020-09-21:使用Coding和github来实现双线部署

  1. 将Hexo博客部署到Coding
  2. 根据主分支是否变动决定触发持续部署
  3. 给Coding添加自定义域名,提供国内线路。

2020-09-22:使用Gitee提供镜像站支持

  1. 将Hexo部署到Gitee作为Hexo镜像站
  2. 使用Gitee Pages部署静态网页
  3. 使用https://usernanme.gitee.io访问镜像站

2020-09-22:使用Github Action实现全自动部署

  1. 根据存放源码的主分支是否变动决定是否启动持续部署
  2. 自动部署至Github、Coding、Gitee。
  3. 使用脚本自动更新Gitee Pages。

2020-09-23:给博客添加PWA

  1. 仅针对Butterfly
  2. 给Hexo博客添加PWA渐进式网络应用
  3. 配合GULP插件压缩静态页面资源

2020-10-02:优化博客静态资源提升访问速度

  1. 压缩图片资源
  2. 使用jsdelivr给js、css文件提供免费CDN加速
  3. 使用lighthouse评测网页性能并获取改进意见。

2020-11-17:给js添加异步加载属性

  1. 使用defer和async控制异步加载
  2. 调整js的加载顺序,减少HTML加载阻塞

博客搭建

在优化博客之前,首先肯定需要搭建一个Hexo博客。

🍰Win10下搭建

Win10:Hexo+github搭建个人博客
通过这篇教程,能够实现

  1. Win10系统下的Hexo安装配置
  2. 将Hexo部署到Github上,开通Github pages服务,使用https://username.github.io访问你的Hexo博客。
  3. 域名绑定,使用自定义域名访问Github pages。
  4. 博主定制脚本,只需要敲数字就能完成一系列指令操作。

🍫Ubuntu下搭建

Ubuntu本质依然是linux系统,如果是对linux系统不了解的不建议在linux系统上进行操作。
如果保持着学习的心态,那么在做好可能会需要多次重装的心理准备后,可以先看看前置教程。
Ubuntu重装日记
在配置好相对完整的linux美化开发环境以后,再继续进行Hexo博客的搭建。
Ubuntu:Hexo+github搭建个人博客
通过这篇教程,能够实现

  1. Win10系统下的Hexo安装配置
  2. 将Hexo部署到Github上,开通Github pages服务,使用https://username.github.io访问你的Hexo博客。
  3. 域名绑定,使用自定义域名访问Github pages。
  4. 博主定制脚本,只需要敲数字就能完成一系列指令操作。

🍭Android下搭建

对,你没看错,没规定说只有电脑才能搭建博客的,手机一样也可以,使用Termux就能实现。虽然很鸡肋。下文的Github Action全自动部署才是更好的方案。

Termux是一款能够在安卓手机上部署linux环境的软件,集成了Python、 PHP、 Ruby、 Nodejs、 MySQL等多种开发环境。理论上甚至可以将其搭建成虚拟主机作为站点的服务器。
考虑到受众数量,本帖不多做套路,这里只放大神们写好的教程。

至于在Termux上安装Hexo略显鸡肋,可以在配置完成Termux后自行学习,或者参考Ubuntu的配置教程

在完成本贴全部的教程以后,可以通过Github Actions全自动部署博客,哪怕是ios用户,也可以通过直接登录github的网页修改源码来触发自动部署。

在学习以下四步加速方案前,先来了解一下这个加速过程的原理

Vercel加速

Coding&Github双线部署

Gitee镜像站支持

Github Action

访问速度优化

  1. 压缩图片资源
  2. 使用jsdelivr给js、css文件提供免费CDN加速

    # 给自己的静态资源引用添加jsdelivr
    # 组装方式
    # 1. 不稳定版,需要部署后才能看到最新修改效果。适用于需要经常修改的资源
    https://cdn.jsdelivr.net/gh/github用户名/github仓库名/静态资源相对路径
    # 例如
    https://cdn.jsdelivr.net/gh/Akilarlxh/Akilarlxh.github.io/css/customstyl.css
    # 2. 稳定版,使用发布的版本号,保证静态资源稳定。适用于长期无需修改的资源
    https://cdn.jsdelivr.net/gh/github用户名/github仓库名@releases/静态资源相对路径
    # 例如
    https://cdn.jsdelivr.net/gh/Akilarlxh/Akilarlxh.github.io@v2.1/js/vue.min.js
  3. 使用lighthouse评测网页性能并获取改进意见。

异步加载静态资源

添加pjax适配

给博客添加PWA

大神博客