吐槽

将近有大半年没更新了，又要重新整理博客了，没错又重新把博客改造了……原因是手贱更新Hexo和Next了……更新之前没好好看官方文档，真是一把血泪……应该在博客早点做记录的，这次弄完后也赶紧写个文章备忘下，以防下次忘记。
还有个原因是最近在微博上发布的Spleeter测试竟然被很多网友看到了，私信寻求教程，那我正好写个文章吧，也顺便把博客热一热起来，不能忘了写博客的初衷233
当时更新Hexo和Next主题出现了不兼容情况，报错一堆，我心想不会又要重新部署了吧，天啊！最开始没能解决成，然后我就从npm下手，重新安装hexo，发现npm也是坑……在国内访问速度相当慢，需要挂代理，而且cnpm下载的包名也很奇怪……和npm是不一样的，我到现在才发现= =！当时估计也是为了省事以为用淘宝镜像的cnpm就没问题了呢，原来也是坑！
还是从头到尾好好记录下吧……这次也是仔细看了各路大神们写的文章才安装成功……

Node.js安装

官网：https://nodejs.org/zh-cn/download/

环境变量

直接下解压版的(.zip)即可，不用安装直接就能用，在node目录下创建node_cache、node_global两个文件夹，然后设置环境变量：
在用户变量或系统变量中Path值添加

F:\webResearch\nodejs\node_global

然后系统变量里新建一个NODE_PATH值：

F:\webResearch\nodejs\node_global\node_modules

node_global是全局模块安装，node_cache是缓存。
另外也可以写命令直接配置：

npm config set prefix F:\webResearch\nodejs\node_global
npm config set cache F:\webResearch\nodejs\node_cache

//验证是否配置成功
npm config get cache
npm ls -g

//npm默认的全局目录
npm config ls

然后输入下面命令，提示有版本号就成功了。

node -v

代理&镜像

下一步是天坑！众所周知npm在国内下载非常非常慢……需要设置proxy才能下载。
若能设置代理，填入下面：

npm config set proxy http://127.0.0.1:1080
npm config set https-proxy http://127.0.0.1:1080

某宝镜像临时使用：
New 原taobao镜像更换为npmmirror

临时使用

npm config --registry https://registry.npmmirror.com

永久设置

npm config set registry https://registry.npmmirror.com

或者使用cnpm

npm install -g cnpm --registry=https://registry.npmmirror.com

验证是否配置成功

npm config get registry

不建议使用cnpm，这是个大坑，会有各种报错！最好用npm，下载的包是符合官方的名称，也不会操心出错……

如果还是依然出现proxy问题，
解决办法：

1、先清除掉以前的代理设置
npm config set proxy null
npm config set https-proxy null

然后查看代理设置，如果返回null那就不需要清理
npm config get proxy
npm config get https-proxy

2、重新设置
npm config set registry http://registry.cnpmjs.org/

3、打开.npmrc文件，将registry=https://registry.npm.taobao.org删了，只保留其余内容。

然后就可以正常下载了。

Hexo安装

官网：https://hexo.io

Hexo官方文档也是坑，很多人都说文档写得烂233，看来都是被坑了～这下安心多了233有些步骤确实不太完整，如果能再写得详细点就好了。
我到现在也还不明白hexo和hexo-cli这两个包到底是啥区别？一个用户版一个开发版？看很多人都安装hexo，那还是安装hexo好了……

全局安装

npm install hexo -g

如果在安装过程中出现了WARN警告，不用管，有一些是项目被Node弃用了，或者更新到最新版即可。

新建项目

hexo init blog

安装依赖包

npm install

另外官方渲染服务器要单独安装，我也不知道它为什么要单独拆开了……

npm install hexo-server --save

升级命令

npm i hexo -g
npm i hexo-cli -g

_config.yml文件最新版和旧版对比检查增删

然后要安装需要的插件，都要写npm install 插件名 –save，就大概这些了，以下是我目前安装的插件列表，曾经还有个live2d萌宠的，不过安装后有BUG就移除了，也只是卖萌用的……

~blog\package.json

  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "scripts": {
	"gulp": "hexo clean & hexo bangumi -u & hexo g & gulp",
    "build": "hexo generate",
    "clean": "hexo clean",
    "deploy": "hexo deploy",
    "server": "hexo server"
  },
  "hexo": {
    "version": "7.0.0"
  },
  "dependencies": {
    "chokidar": "^3.5.3",
    "core-js": "^3.35.0",
    "gulp": "^4.0.2", //压缩html、css、js等资源
    "gulp-clone": "^2.0.1",
    "gulp-fontmin": "^0.7.4",
    "gulp-htmlmin": "^5.0.1",
    "gulp-imagemin": "^9.0.0",
    "gulp-minify-css": "^1.2.4",
    "gulp-minify-html": "^1.0.6",
    "hexo": "^7.0.0", //hexo版本
    "hexo-abbrlink": "^2.2.1", //永久链接插件
    "hexo-bilibili-bangumi": "^1.8.9", //B站番剧列表插件
    "hexo-blog-encrypt": "^3.1.9", //加密文章插件
    "hexo-butterfly-envelope": "^1.0.15", //留言板信封动画样式插件
    "hexo-deployer-git": "^4.0.0", //git部署插件
    "hexo-filter-nofollow": "^2.0.2", //外链辅助插件，加强SEO
    "hexo-generator-archive": "^2.0.0", //归档插件
    "hexo-generator-baidu-sitemap": "^0.1.9", //百度提交插件
    "hexo-generator-category": "^2.0.0", //分类插件
    "hexo-generator-feed": "^3.0.0", //RSS插件
    "hexo-generator-index": "^3.0.0", //索引插件
    "hexo-generator-json-content": "^4.2.3", //json插件
    "hexo-generator-search": "^2.4.3", //搜索插件
    "hexo-generator-sitemap": "^3.0.1", //生成站点地图插件
    "hexo-generator-tag": "^2.0.0", //标签插件
    "hexo-hide-posts": "^0.4.0", //隐藏文章插件
    "hexo-offline": "^2.0.1", //pwa离线访问
    "hexo-renderer-ejs": "^2.0.0", //ejs渲染
    "hexo-renderer-marked": "^6.2.0",  //markdown语法渲染
    "hexo-renderer-pug": "^3.0.0", //pug渲染
    "hexo-renderer-stylus": "^3.0.0", //样式渲染
    "hexo-seo-autopush": "^2.1.3", //自动提交到百度、必应、谷歌
    "hexo-server": "^3.0.0", //hexo渲染服务器插件
    "hexo-steam-games": "^1.3.2", //steam游戏库展示插件
    "hexo-tag-aplayer": "^3.0.4", //音乐播放器插件
    "hexo-tag-dplayer": "^0.3.3", //视频播放插件
    "hexo-tag-fancybox_img": "^1.0.1", //图片缩放预览插件
    "hexo-wordcount": "^6.0.1" //文章字数统计插件
    "highlight.js": "^11.9.0", //高亮代码显示
    "jquery-backstretch": "^2.1.18", //背景轮播插件
    "source-map-resolve": "^0.6.0",
  }
}

npm-check检查更新

npm install -g npm-check
npm-check

npm-upgrade更新

npm install -g npm-upgrade
npm-upgrade

更新全局包

npm update <name> -g

更新生产环境依赖包

npm update <name> --save

更新全部库

npm-check -u

另外官方渲染服务器要单独安装

npm install hexo-server --save

在最终输出前，要提前更新bangumi和steam插件，如：

hexo bangumi -u
hexo steam -u

然后就可以hexo g了，还要gulp压缩下html/js/css等资源……
或者在package.json里填上需要的命令，直接输入 npm run build 就方便了。

"build": "hexo clean & hexo bangumi -u & hexo steam -u & hexo generate & gulp"

主题

官方主题站：https://hexo.io/themes

主题曾经用过：
hexo-theme-gal
NexT

现在使用：hexo-theme-butterfly

主题更新前也需要备份，可在旧版文件夹后面加个-old保留，然后再去下载主题最新版。

更新主题和配置文件对照

在博客根目录更新主题：
npm i hexo-theme-butterfly

_config.yml文件对照最新版与一个个增删

友情链接

友情链接页面修改了样式，要复制过去

~\themes\Butterfly\layout\includes\page\flink.pug

#article-container
  <div style="text-align:center;font-family: 'Source Han Serif SC','Source Han Serif','source-han-serif-sc','PT Serif','SongTi SC','MicroSoft Yahei',Georgia,serif;font-size: 18px;line-height: 35px;">首先感谢您来本站做客，怀着感恩之心祝您游玩愉快~<br />以下是我的可爱朋友们～也欢迎到他们的网站做客～<br />排名不分先后，不断更新中……<br /></div>

文件复制

修改CDN地址，删除img不需要的图片，还有样式和脚本导入，把一些文件文件复制过去。

scripts/other 整个文件夹
source/css/other 整个文件夹
source/css/custom.styl
source/css/other.css
source/js/carousel-touch.js
source/img/loading.gif
source/img/pwa 文件夹

导入样式：

~\themes\Butterfly\source\css\index.styl

// 导入自定义样式
@import 'custom'
@import 'other/*'

评论系统温馨提示

评论系统温馨提示修改，在第2行修改：

~\layout\includes\third-party\comments\index.pug

hr.custom-hr
<p>如果遇到评论加载不出来，请不要担心，稍等一会儿，等待服务器后台修复即可，或者过一段时间来看看～</p>

首页图改为视频播放

然后首页图要改为视频播放，就要去layout\includes\header\index.pug添加代码，具体见butterfly主题首页图背景替换为视频文章。

在第3行添加- var top_img = false代码，这表示禁用默认的首页图图片。

~\layout\includes\header\index.pug

if !theme.disable_top_img && page.top_img !== false
  if is_post()
    - var top_img = false
    - var top_img = page.top_img || page.cover || theme.default_top_img

然后在38行和41行处添加两个代码，video(src=后面改成你的视频地址，注意代码缩进，否则会无法显示标题文字。

~\layout\includes\header\index.pug

if !theme.disable_top_img && page.top_img !== false
header#page-header(class=`${isHomeClass+isFixedClass}` style=bg_img)
  !=partial('includes/header/nav', {}, {cache: true})
  if top_img !== false
    if is_post()
      - var isHomeClass = 'not-top-img'
      include ./post-info.pug
    else if is_home() 
      video(src='你的视频地址.mp4' autoplay="" loop="" muted="" style='min-height:100%;height:100%;width:100%;object-fit:cover')
      #site-info
        h1#site-title=site_title

其他主题

然后接下来是换主题了，自带的主题还是有点点丑，所以主题也可以去官方主题站找找好看的！
之前呢，最早是二次元主题，但是后来发现了BUG就换成Next主题，以为能稳定呢，后来升级到7.7.1的时候才发现已经不兼容IOS12以前系统了，必须是IOS13以上，我去！看了贴吧也有相同的问题，都没法解决。看来只能再次换主题了，从上百个主题挑选合适的主题，真是累啊……
以下是看上的主题：
https://blog.coor.top/
https://yumesama.cn/
https://www.yunyoujun.cn/
https://jwmm.xyz/
http://sora3.coding.me/
https://miiiku.xyz/
https://joeybling.github.io/
https://wiki.zthxxx.me/
https://nexmoe.com/
https://huaji8.top/
https://sh.alynx.moe/
https://github.com/honjun/hexo-theme-sakura
https://github.com/EYHN/hexo-theme-one
https://github.com/WeicMa/Hexo-Theme-Life

有几个主题设计真漂亮！真的很好看！不过用了好像和想象中的不太一样？好像也是有BUG了，又只能再换一个OTZ，最终敲定Butterfly这主题了，看来还是自定义主题开发的兼容性好点，逛完主题后突然想自己也想独立开发一个属于自己的主题，依赖别人的主题总不太合适，有机会学会了JS后再来尝试！
接下来就是主题魔改了，也花了点时间，现在的主题有几点功能我特喜欢，菜单有二级导航！右下角还有简繁转换、夜间模式等，超级全面了！这个主题也好棒！不过背景不能用轮播插件了，哭……我超喜欢背景轮播的，不过没关系，单图也挺好的，省资源233

图库

接下来是图库方面，图库我也是经历了大变动，从最早的七牛云到SM.MS再到新浪微博图库，七牛云回收了测试域名所以好多图库挂了，哭了。后来又找到SM.MS，这个也不错，不过用的人多了也加载好慢……其实新浪微博图库挺不错的，速度很快，但在2019年4月开始启用防盗链了，那个时候知道消息的我晴天霹雳！又要转移地方了……
后来听说有个解决方案是修改Referrer，如下：

全局修改：在自己站的Nginx配置中加上一行

add_header Referrer-Policy "no-referrer"

单页修改：在网页head区域加上

<meta name="referrer" content="no-referrer">

针对单个链接：在 a 或 img 标签上添加属性 referrerpolicy="no-referrer"

<img src=“图片链接" referrerpolicy="no-referrer">

但这终究不是长久之计，如今国内图床没有几个可靠的……要么就用CDN，要么自己买服务器……后来某天看到有jsdelivr的介绍，原来它可以加速js/css/图片等静态资源，支持分发npm、github、wordpress文件等，也是免费的CDN，简直相见恨晚！我的图片也都转移到github这边备份了，正好借用jsdelivr加速下233希望不会滥用吧……

加载仓库资源：

https://fastly.jsdelivr.net/gh/用户名/仓库名/文件路径
例：
https://fastly.jsdelivr.net/gh/SaraKale/blogimg/sarakale.jpg

加载已发布版本的资源：

https://fastly.jsdelivr.net/gh/用户名/仓库名@发布的版本号/文件路径
例：
https://fastly.jsdelivr.net/gh/SaraKale/[email protected]/sarakale.jpg

还有个是AUXPI 集合多家 API 的新一代图床，这个看起来也不错，在多处图床备份聚合，如果有一处图片挂了，会从备份点替换，思路蛮不错的，还有个聚合图床也是一样的思路，不过部署也很复杂，有时间再试吧，暂时就用jsdelivr临时应急。
对了，在调试的这几天，才发现webp这格式在IOS系统上看不到，safari和chrome均不支持，我还以为图库又开启了防盗链呢，搞了半天原来是IOS它的祸！害我修了半天，都全面支持了你居然还没支持？只好换成jpg、png几个常见格式了，安卓系统目前都支持。

微博图床最新解决方法

2023-01-06：目前微博加强了防盗链，已经无法直接访问了，待后续解决。

无意间看到《新浪微博图库图床恢复大法》这篇文章，原来新浪图床域名的结构是：节点名 + 序号 + sinaimg.cn，其中节点名主要有ww、ws、wx这三种。举个例子如：wx1.sinaimg.cn。
后来又增加了个tva节点，似乎没有设置防盗链，如果wx1/2/3/4、ww1/2/3/4、ws1/2/3/4这些不能访问了，只要把网址前缀中的 wx、ww 与 ws 都改成 tva 或 tvax 即可，如果图片量不多，可以批量全局查找替换成 tva。至于其中的数字无需对应，图片也能打开，当然保险起见，对应修改是最好的。

插件

番剧和steam插件

插件其中需要提前更新数据：
hexo bangumi -u
hexo steam -u

steam游戏库插件有BUG已经停用，以后换个插件。
bangumi番剧图片加载不出来的话就去开启主题的lazyload，再关闭bangumi的lazyload，就能显示图片了。官方issues：关于图片加载相关问题

此方法已过时，仅适用于老版本

B站番剧图片IOS上的safari和chrome都不支持webp格式，需要去插件目录下找到index,js文件修改57行代码，把webp改成Jpg格式。

cover: bangumi.cover + "@220w_280h.jpg", /*webp格式在IOS系统上不支持*/

背景轮播插件

背景轮播插件一般放在主题的layout/_layout.swig文件插入

<!-- 背景图片轮播 backstretch https://github.com/jquery-backstretch/jquery-backstretch -->
<script src="https://fastly.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.1.18/jquery.backstretch.min.js"></script>
 <script>
     $("body").backstretch([
        "https://fastly.jsdelivr.net/gh/SaraKale/[email protected]/bg/bg.jpg",
        "https://fastly.jsdelivr.net/gh/SaraKale/[email protected]/bg/bg1.jpg",
        "https://fastly.jsdelivr.net/gh/SaraKale/[email protected]/bg/bg3.jpg",
        "https://fastly.jsdelivr.net/gh/SaraKale/[email protected]/bg/bg4.jpg",
        "https://fastly.jsdelivr.net/gh/SaraKale/[email protected]/bg/bg5.jpg",
        "https://fastly.jsdelivr.net/gh/SaraKale/[email protected]/bg/bg6.jpg",
        "https://fastly.jsdelivr.net/gh/SaraKale/[email protected]/bg/bg7.jpg",
        "https://fastly.jsdelivr.net/gh/SaraKale/[email protected]/bg/bg8.jpg",
        "https://fastly.jsdelivr.net/gh/SaraKale/[email protected]/bg/bg9.jpg",
        "https://fastly.jsdelivr.net/gh/SaraKale/[email protected]/bg/bg10.jpg",
        "https://fastly.jsdelivr.net/gh/SaraKale/[email protected]/bg/bg11.jpg",
        "https://fastly.jsdelivr.net/gh/SaraKale/[email protected]/bg/bg12.jpg",
  ], { duration: 4000, fade: 2000, scale:"cover"});
</script>

但是有的主题不支持，具体得看情况，有可能需要安装jquery-backstretch插件

live2d萌宠

live2d萌宠是使用了live2d-widget，直接按照说明引用地址即可，我自己也创建了仓库，地址在这里：链接，我自己修改了自己需要的部分，去除了不需要的部分，也可以引用我的仓库地址，请随意～

在 <head> 中加入下面代码，因为需要Font Awesome v6支持，请确保相关样式表已在页面中加载，否则无法正常显示，如果网页中已经加载了Font Awesome，就不要重复加载了。

<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.1.1/css/fontawesome.min.css">

然后将这一行代码加入 <head> 或 <body>，即可展现出效果：

<script src="https://npm.elemecdn.com/sarakale-live2dwidget@latest/autoload.js"></script>

一般在主题的”layout/_layout.swig”中修改，我是使用了hexo-theme-butterfly这个主题，最新版本可在 butterfly/_config.yml inject处直接写入live2d地址：

inject:
  head:
    - <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.1.1/css/fontawesome.min.css">
  bottom:
    - <script src="https://npm.elemecdn.com/sarakale-live2dwidget@latest/autoload.js"></script>

jsdelivr的CDN缓存比较慢，可能要等待24小时后才会更新，建议全面修改好了做个稳定版本。

之后就是检查博客文章内容了，完整仔细检查，没有问题了可以部署更新博客了。

后记

最后总结下，我现在所装的版本号：

nodejs 8.17.0 → 12.16.0
Hexo 3.9.0 → 4.2.0
~~Next 6.6.0 → 7.7.1（已弃）~~
Butterfly 2.3.5（现在使用的主题）

简直一把辛酸泪，从此以后如果要升级记着要提前备份！！再决定是否安装，如果报错只能重新建立博客项目了……
其实以前吧，没有对博客做优化，以为没人看就不弄了，现在想想其实还是有用的……万一有需要的人来看呢？若是我的网站影响了体验那真是有点对不起人家……但是吧我又很懒，不想再花服务器的钱了233因为我不能保证未来几年还能坚持下去，现在能有托管网站帮我永久维持下去就好了233（被踹飞）现在github page还是特别慢，前几天去看了CDN的相关文章，好多人测试确实有效果，不过后来想到码云是不是也能同步加速呢？一查果然可以！可以把仓库克隆过去，自动同步更新，真是简单快捷！而且如果git clone下载太慢的时候也可以用码云临时应急下，网友们简直鬼才，真是啥办法都想出来了hhhhh
看官方文档才发现还有netlify托管平台，为什么当时我没看到……前几天还傻乎乎去github创建CNAME链接到gitee试试看呢，好像不能解析成功……后来终于想到github现在能自定义域名啊！对哦！我怎么才想到，把gitee那边添加过来了，这下终于访问成功了！以后要访问github.io这边的域名会自动重定向gitee.io，不得不说，码云真香.jpg
反正多备份几个站点也是有好处的～以防万一嘛，要是哪天不能访问了那就换镜像咯～
gitee镜像
 netlify镜像

在主题站中看了不少大神们的文章，有的写得真好,《如何超过大多数人》、《为什么要用现代前端》、《如何编写一篇好的技术文章》，看完这些突然想，总有一天我也会超越自己吧，做自己想做的事，自由放飞，只有学得更多、看得多了才能明白何为人生。
发现2017年前后时间就有很多人创建个人博客了，大概是因为前端快速发展带动的吧，我也是因为看了支醉的网站后也萌发自己也想弄个人站的想法，也终于实现了，圆满了自己的梦，这样能让大家看到自己作品，也分享经验给网友了～现在的时代日新月异发展很快，很多事物和当初不一样了，现在能学到很多很不错。其实最早是给自己弄个wiki知识笔记的，一直没找到比较好的框架，当时看到Dokuwiki、mediawiki等很符合我的需求，但是它们都需要PHP环境……也就是要买服务器才行……后来看到hexo也有相关的文档主题，我真是相见恨晚……不过现在不太需要了，以后说不定能找到更合适的……
创建博客后确实很少写文章，因为不知道写什么……我都是先做了视频再更新，然后再写创作感想。如果遇到什么好技术想要分享的话，偶尔也会写写教程经验，确实疏忽了对博客的更新……看了很多大神们的文章，他们写得真好，很鼓舞人心。博客也等于是自己面貌吧，看博客知其人，其实难在坚持，如何写出优秀文章也是难题……真正坚持下来才是认知自己、超越自己。
这么多年过去，支醉的网站还是那三篇文章，而我超越了他hhhh
好了暂时就这些了，偶尔也会来博客看一看的，不能让博客凉透了233

参考资料：
[1]: 使用CDN加速你的GitHub Pages网站
[2]: Hexo博客使用gulp压缩静态资源
[3]: 以全新的视角来评测公共CDN
[5]: 部分CDN厂商海外节点记录
[6]: 如何选择适合的公共DNS
[7]: Linux或Win下安装node和npm
[8]: 使用hexo next搭建静态博客
[9]: 教你如何从零开始搭建一个属于自己的网站
[10]: Service Workers实现网站加速和离线缓存

如果遇到评论加载不出来，请不要担心，稍等一会儿，等待服务器后台修复即可，或者过一段时间来看看～