今天真的是脑子抽了,看了一篇Hexo优化的文章,教了如何升级Hexo和NexT主题。顺手执行了git pull 命令。结果当然就是GG。折腾了一下午才弄好,现在来记录一下。
Attention:每一个环节执行以后都推荐hexo s看看效果有没有出错,这样好回退
升级 NexT
git pull
先把NexT主题升级了,因为问题出的最多的就是这个地方。
先把next文件夹复制到另外一个地方。这样如果有任何问题还可以回退。如果记得自己改了哪些文件的话还可以只复制修改了的文件。
然后在next文件夹下打开cmd
小技巧: 在当前目录地址栏输入cmd可以快捷打开cmd
在确保已经复制了文件夹之后,cmd中输入
git stash
如果提示你有 unmerged paths 就先 git add -A ,然后 git pull
没有问题了之后就输入
git pull
这个命令将从github上拉取最新的文件下来。
执行完毕以后NexT文件夹里都是没有修改过的文件了,此时可以回到博客根目录执行
hexo clean && hexo s
看一下效果,如果能够正常显示就进行下一步。
config.yml
打开复制出去的文件夹里的 _config.yml ,和 next文件夹下的同名文件一一对比看看修改了哪些东西,然后对照修改。因为7.5多增加了几个选项,所以不推荐直接覆盖配置文件。同样的,如果不放心,修改几个项目就执行上面的那行代码看看效果。
因为我的页脚还增加了博客建立时间,所以还需要修改 next\layout_partials\footer.swig 文件
打开文件在上部(任何地方都可以,不同的位置显示的地方不同)添加如下代码
<div class="running-time">
<span>本站已运行<span id="showDays"></span></span>
<script>
var seconds = 1000;
var minutes = seconds * 60;
var hours = minutes * 60;
var days = hours * 24;
var years = days * 365;
var birthDay = Date.UTC(2019,08,01,10,13,14); // 这里设置建站时间
setInterval(function() {
var today = new Date();
var todayYear = today.getFullYear();
var todayMonth = today.getMonth()+1;
var todayDate = today.getDate();
var todayHour = today.getHours();
var todayMinute = today.getMinutes();
var todaySecond = today.getSeconds();
var now = Date.UTC(todayYear,todayMonth,todayDate,todayHour,todayMinute,todaySecond);
var diff = now - birthDay;
var diffYears = Math.floor(diff/years);
var diffDays = Math.floor((diff/days)-diffYears*365);
var diffHours = Math.floor((diff-(diffYears*365+diffDays)*days)/hours);
var diffMinutes = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours)/minutes);
var diffSeconds = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours-diffMinutes*minutes)/seconds);
document.getElementById('showDays').innerHTML=""+diffYears+"年"+diffDays+"天"+diffHours+"小时"+diffMinutes+"分钟"+diffSeconds+"秒";
}, 1000);
</script>
</div>
记得修改建站时间。
保存退出,执行
hexo clean && hexo s
看看效果吧。
如果修改过头像和网站图标,记得把images文件夹里的内容覆盖。
到此,NexT 主题升级完毕
升级 Hexo
升级npm和node
在升级Hexo之前,记得先把npm和node升级了,我的主机是windows,只能去官网下载安装包来升级(更新node的同时会把npm也更新了),其他系统请自行Google如何升级node。
升级Hexo-cli
在博客文件夹执行
npm i hexo-cli -g
然后执行
npm update
升级成功以后输入 hexo -v 看看结果
但是这样升级不会在package.json中体现,以后升级也可能会有隐患。所以我们执行下面几步。
额外的步骤
npm-check检查更新
npm install -g npm-check # 先安装 npm-check
npm-upgrade 更新包,一路回车就行了
npm install -g npm-upgrade # 先安装 npm-upgrade
更新所有包
npm update --save
这时候整个更新就完成了。本地看看效果吧,没问题就deploy到服务器上去。
我踩的坑
可以看到步骤其实不多,但是为什么我搞了一下午才弄出来呢?
那是因为,我看了这篇文章: https://io-oi.me/tech/Hexo-NexT-optimization/#%E6%9B%B4%E6%96%B0%E4%B8%BB%E9%A2%98
在执行了 git stash 之后我跟着就执行了git stash pop。结果出现了一堆冲突,在一一删除冲突代码后,整个东西完美的失效了。我又不懂前端的东西,完全不知道怎么处理。
光是找其中两个错误就看了五十多个网页。
——–题外话——–
不过,如果正好你忘了修改过哪些文件。执行
git stash list # 获取stash记录
git stash show stash@{0} # 修改成对应的编号
可以看到修改过哪些文件,图中可以看到我修改了四个文件和三张图片。然后根据这个去一一修改就行了。
——–题外话结束——–
好不容易升级完成了,在本地测试也没有问题了,deploy到服务器上却显示一篇空白,这我可就懵逼了。开始以为是没有清除缓存,结果清除了也不行;然后换了浏览器试试,firefox不行,IE也不行,突然想起来遗忘在角落的edge,打开居然显示成功了!这下我更懵逼了,到底是个什么问题啊。
然后为了排除是Hexo的问题, 我下载了其他主题,-g -d 一气呵成,成功打开,好的,肯定是NexT的问题了。果断加入了官方telegram讨论组。
还是大佬牛逼,三两下就看出了我的问题,问我是不是用了cloudflare,然后让我关了这个。立马生效,牛逼!
到这里,所有的问题就已经解决了。也就是我开始写这篇文章的时间了