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

发表于 更新于 阅读次数： 本文字数： 3.1k 阅读时长 ≈ 3 分钟

今天真的是脑子抽了，看了一篇Hexo优化的文章，教了如何升级Hexo和NexT主题。顺手执行了git pull 命令。结果当然就是GG。折腾了一下午才弄好，现在来记录一下。

Attention：每一个环节执行以后都推荐hexo s看看效果有没有出错，这样好回退

升级 NexT

git pull

先把NexT主题升级了，因为问题出的最多的就是这个地方。

先把next文件夹复制到另外一个地方。这样如果有任何问题还可以回退。如果记得自己改了哪些文件的话还可以只复制修改了的文件。

然后在next文件夹下打开cmd

小技巧： 在当前目录地址栏输入cmd可以快捷打开cmd

在确保已经复制了文件夹之后，cmd中输入

1
git stash

如果提示你有 unmerged paths 就先 git add -A ，然后 git pull

没有问题了之后就输入

1
git pull

这个命令将从github上拉取最新的文件下来。

执行完毕以后NexT文件夹里都是没有修改过的文件了，此时可以回到博客根目录执行

1
hexo clean && hexo s

看一下效果，如果能够正常显示就进行下一步。

config.yml

打开复制出去的文件夹里的 _config.yml ，和 next文件夹下的同名文件一一对比看看修改了哪些东西，然后对照修改。因为7.5多增加了几个选项，所以不推荐直接覆盖配置文件。同样的，如果不放心，修改几个项目就执行上面的那行代码看看效果。

因为我的页脚还增加了博客建立时间，所以还需要修改 next\layout_partials\footer.swig 文件

footer.swig添加代码

打开文件在上部(任何地方都可以，不同的位置显示的地方不同)添加如下代码

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
<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>

记得修改建站时间。

保存退出，执行

1
hexo clean && hexo s

看看效果吧。

如果修改过头像和网站图标，记得把images文件夹里的内容覆盖。

到此，NexT 主题升级完毕

升级 Hexo

升级npm和node

在升级Hexo之前，记得先把npm和node升级了，我的主机是windows，只能去官网下载安装包来升级（更新node的同时会把npm也更新了），其他系统请自行Google如何升级node。

升级Hexo-cli

在博客文件夹执行

1
npm i hexo-cli -g

然后执行

1
npm update

升级成功以后输入 hexo -v 看看结果

但是这样升级不会在package.json中体现，以后升级也可能会有隐患。所以我们执行下面几步。

额外的步骤

  1. npm-check检查更新

    1
    2
    npm install -g npm-check  # 先安装
    npm-check

  2. npm-upgrade 更新包，一路回车就行了

    1
    2
    npm install -g npm-upgrade  # 先安装
    npm-upgrade

  3. 更新所有包

    1
    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。结果出现了一堆冲突，在一一删除冲突代码后，整个东西完美的失效了。我又不懂前端的东西，完全不知道怎么处理。

历史记录 历史记录

光是找其中两个错误就看了五十多个网页。

——–题外话——–

不过，如果正好你忘了修改过哪些文件。执行

1
2
git stash list  # 获取stash记录
git stash show stash@{0}  # 修改成对应的编号

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

——–题外话结束——–

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

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

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

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

开始时间八点半