将 Hexo 和 NexT 主题升级到 4.0.0 和 7.5.0

今天真的是脑子抽了,看了一篇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 文件

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() &#123;
      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+"秒";
    &#125;, 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中体现,以后升级也可能会有隐患。所以我们执行下面几步。

额外的步骤

  1. npm-check检查更新

    npm install -g npm-check  # 先安装
    npm-check
    
  2. npm-upgrade 更新包,一路回车就行了

    npm install -g npm-upgrade  # 先安装
    npm-upgrade
    
  3. 更新所有包

    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 [email protected]&#123;0&#125;  # 修改成对应的编号

可以看到修改过哪些文件,图中可以看到我修改了四个文件和三张图片。然后根据这个去一一修改就行了。

——–题外话结束——–

好不容易升级完成了,在本地测试也没有问题了,deploy到服务器上却显示一篇空白,这我可就懵逼了。开始以为是没有清除缓存,结果清除了也不行;然后换了浏览器试试,firefox不行,IE也不行,突然想起来遗忘在角落的edge,打开居然显示成功了!这下我更懵逼了,到底是个什么问题啊。

然后为了排除是Hexo的问题, 我下载了其他主题,-g -d 一气呵成,成功打开,好的,肯定是NexT的问题了。果断加入了官方telegram讨论组。

还是大佬牛逼,三两下就看出了我的问题,问我是不是用了cloudflare,然后让我关了这个。立马生效,牛逼!

到这里,所有的问题就已经解决了。也就是我开始写这篇文章的时间了

开始时间八点半