吐槽

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

Node.js安装

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

环境变量

直接下解压版的(.zip)即可,不用安装直接就能用,在node目录下创建node_cachenode_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有些步骤确实不太完整,如果能再写得详细点就好了。
我到现在也还不明白hexohexo-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">

针对单个链接:在 aimg 标签上添加属性 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/blogimg@0.1/sarakale.jpg

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

微博图床最新解决方法

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

无意间看到《新浪微博图库图床恢复大法》这篇文章,原来新浪图床域名的结构是:节点名 + 序号 + sinaimg.cn,其中节点名主要有wwwswx这三种。举个例子如: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/blogimg@0.1/bg/bg.jpg",
"https://fastly.jsdelivr.net/gh/SaraKale/blogimg@0.1/bg/bg1.jpg",
"https://fastly.jsdelivr.net/gh/SaraKale/blogimg@0.1/bg/bg3.jpg",
"https://fastly.jsdelivr.net/gh/SaraKale/blogimg@0.1/bg/bg4.jpg",
"https://fastly.jsdelivr.net/gh/SaraKale/blogimg@0.1/bg/bg5.jpg",
"https://fastly.jsdelivr.net/gh/SaraKale/blogimg@0.1/bg/bg6.jpg",
"https://fastly.jsdelivr.net/gh/SaraKale/blogimg@0.1/bg/bg7.jpg",
"https://fastly.jsdelivr.net/gh/SaraKale/blogimg@0.1/bg/bg8.jpg",
"https://fastly.jsdelivr.net/gh/SaraKale/blogimg@0.1/bg/bg9.jpg",
"https://fastly.jsdelivr.net/gh/SaraKale/blogimg@0.1/bg/bg10.jpg",
"https://fastly.jsdelivr.net/gh/SaraKale/blogimg@0.1/bg/bg11.jpg",
"https://fastly.jsdelivr.net/gh/SaraKale/blogimg@0.1/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实现网站加速和离线缓存