吐槽

将近有大半年没更新了,又要重新整理博客了,没错又重新把博客改造了……原因是手贱更新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值添加

1
F:\webResearch\nodejs\node_global

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

1
F:\webResearch\nodejs\node_global\node_modules

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

1
2
3
4
5
6
7
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

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

1
node -V

代理&镜像

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

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

某宝镜像临时使用:
临时使用

1
npm config --registry https://registry.npm.taobao.org

永久设置

1
npm config set registry https://registry.npm.taobao.org

或者使用cnpm

1
npm install -g cnpm --registry=https://registry.npm.taobao.org

验证是否配置成功

1
npm config get registry

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

Hexo安装

官网:https://hexo.io

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

全局安装

1
npm install hexo -g

如果在安装过程中出现了WARN警告,不用管,那是给MAC系统装的。

新建项目

1
hexo init blog

安装依赖包

1
npm install

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

1
npm install hexo-server --save

升级命令

1
2
npm i hexo -g
npm i hexo-cli -g

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

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

~blog\package.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
  "hexo": {
"version": "4.2.0" //hexo版本
},
"dependencies": {
"cheerio": "^1.0.0-rc.3",
"gulp": "^4.0.2", //压缩html、css、js等资源
"gulp-babel": "^8.0.0",
"gulp-htmlclean": "^2.7.22",
"gulp-htmlmin": "^5.0.1",
"gulp-imagemin": "^7.1.0",
"gulp-minify-css": "^1.2.4",
"gulp-uglify": "^3.0.2",
"hexo": "^4.0.0",
"hexo-abbrlink": "^2.0.5", //永久链接插件
"hexo-bilibili-bangumi": "^1.1.6", //B站番剧列表插件
"hexo-blog-encrypt": "^3.0.12", //加密文章插件
"hexo-deployer-git": "^2.1.0", //git部署插件
"hexo-filter-nofollow": "^2.0.2", //外链辅助插件
"hexo-generator-archive": "^1.0.0", //归档插件
"hexo-generator-baidu-sitemap": "^0.1.6", //百度提交插件
"hexo-generator-category": "^1.0.0", //分类插件
"hexo-generator-feed": "^2.2.0", //RSS插件
"hexo-generator-index": "^1.0.0", //索引插件
"hexo-generator-json-content": "^4.1.6", //json插件
"hexo-generator-search": "^2.4.0", //搜索插件
"hexo-generator-sitemap": "^2.0.0", //生成站点地图插件
"hexo-generator-tag": "^1.0.0", //标签插件
"hexo-renderer-ejs": "^1.0.0", //ejs渲染
"hexo-renderer-marked": "^2.0.0", //markdown语法渲染
"hexo-renderer-pug": "^1.0.0", //jsde渲染
"hexo-renderer-stylus": "^1.1.0", //样式渲染
"hexo-server": "^1.0.0", //hexo渲染服务器插件
"hexo-steam-games": "^1.1.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" //文章字数统计插件
}
}

npm-check检查更新

1
2
npm install -g npm-check
npm-check

npm-upgrade更新

1
2
npm install -g npm-upgrade
npm-upgrade

更新全局包

1
npm update <name> -g

更新生产环境依赖包

1
npm update <name> --save

另外在最终输出前,要提前更新bangumi和steam插件,如:

hexo bangumi -u
hexo steam -u

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

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

主题

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

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

现在使用:hexo-theme-butterfly

主题更新前也需要备份,可在旧版文件夹后面加个-old保留,然后再去下载主题最新版。
_config.yml文件同样也需要对比增删检查,文件放在_data文件夹

友情链接页面修改了样式,要复制过去
~\themes\Butterfly-old\layout\flink.pug

修改CDN地址,删除img文件夹不需要的图片,还有样式导入,把custom.style文件复制过去。

~\blog\themes\Butterfly\source\css\index.styl
1
2
// 导入自定义样式
@import 'custom'

然后接下来是换主题了,自带的主题还是有点点丑,所以主题也可以去官方主题站找找好看的!
之前呢,最早是二次元主题,但是后来发现了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配置中加上一行

1
add_header Referrer-Policy "no-referrer"

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

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

针对单个链接:在 aimg 标签上添加属性 referrerpolicy="no-referrer"

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

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

加载仓库资源:

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

加载已发布版本的资源:

https://cdn.jsdelivr.net/gh/用户名/仓库名@发布的版本号/文件路径
例:
https://cdn.jsdelivr.net/gh/SaraKale/blogimg@0.1/sarakale.jpg

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

插件

番剧和steam插件

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

steam游戏库插件有BUG已经停用,B站番剧图片IOS上的safari和chrome都不支持webp格式,需要去插件目录下找到index,js文件修改57行代码,把webp改成Jpg格式。

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

背景轮播插件

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!-- 背景图片轮播 backstretch https://github.com/jquery-backstretch/jquery-backstretch -->
<script src="https://cdn.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://cdn.jsdelivr.net/gh/SaraKale/blogimg@0.1/bg/bg.jpg",
"https://cdn.jsdelivr.net/gh/SaraKale/blogimg@0.1/bg/bg1.jpg",
"https://cdn.jsdelivr.net/gh/SaraKale/blogimg@0.1/bg/bg3.jpg",
"https://cdn.jsdelivr.net/gh/SaraKale/blogimg@0.1/bg/bg4.jpg",
"https://cdn.jsdelivr.net/gh/SaraKale/blogimg@0.1/bg/bg5.jpg",
"https://cdn.jsdelivr.net/gh/SaraKale/blogimg@0.1/bg/bg6.jpg",
"https://cdn.jsdelivr.net/gh/SaraKale/blogimg@0.1/bg/bg7.jpg",
"https://cdn.jsdelivr.net/gh/SaraKale/blogimg@0.1/bg/bg8.jpg",
"https://cdn.jsdelivr.net/gh/SaraKale/blogimg@0.1/bg/bg9.jpg",
"https://cdn.jsdelivr.net/gh/SaraKale/blogimg@0.1/bg/bg10.jpg",
"https://cdn.jsdelivr.net/gh/SaraKale/blogimg@0.1/bg/bg11.jpg",
"https://cdn.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和iconfont支持,请确保相关样式表已在页面中加载,否则无法正常显示,如果网页中已经加载了 Font Awesome,就不要重复加载了,仅需要加载iconfont即可。

1
2
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/SaraKale/sarakale.github.io/blog/css/iconfont/iconfont.css">

iconfont是来自 hexo-theme-nexmoe,因为要加载B站图标。

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

1
<script src="https://cdn.jsdelivr.net/gh/sarakale/live2d-widget@latest/autoload.js"></script>

一般在主题的”layout/_layout.swig”中修改,我是使用了hexo-theme-butterfly这个主题,所以要在 butterfly/layout/includes/layout.pug 文件的body末尾加入,注意空格缩进:

1
2
3
4
5
6
7
8
9
10
11
12
13
head
include ./head.pug
body

..........

include ./rightside.pug
!=partial('includes/search/index', {}, {cache:theme.fragment_cache})
each item in theme.CDN_USE.js
script(src=url_for(item))
include ./additional-js.pug
//- live2d 看板娘
script(src="https://cdn.jsdelivr.net/gh/sarakale/live2d-widget@latest/autoload.js")

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实现网站加速和离线缓存