0%

Hexo博客部署和Next主题设置

next主题从5.X版本迁移到7.X,坑很多,慢慢填
5.X主题已经停止维护了,6.X和7.X版本交给了开源社区维护,后续改进了不少,这也造成了迁移坑多

注:

升级7.X的大坑

NexT主题的顺畅更新好像很难,官方不推荐,之前乱改的5.X主题升级7.2分支合并出现问题,一堆warning,索性推倒重来直接新搞一个7.X。

升级可以直接按照官网方法

 cd themes/next
 git tag -l
 git checkout tags/v6.0.1

spawn failed 问题,删除.deploy_git文件夹并重新部署。
_config.yml配置请注意对齐问题

添加README.md文档可在这个路径下,这样就会显示在首页
themes%yourtheme%\source\README.md

为文章设置预览:添加
<!-- more -->

插入本地图片推荐hexo-asset-image插件,可以看这里

公式问题:原来采用的hexo-math插件,在hexo-inject插件上有坑,看了看官方推荐,换成新的插件。换完记得卸载hexo-inject插件

设置_config.yml时那个rss如果开启,默认空着就好了,不要填true

rss: true

像这样就会报错

本地搜索一直转圈圈,看到issue里面说是插件的问题,卸载后重装,神奇的好了

 npm uninstall hexo-generator-searchdb --save
 npm install hexo-generator-searchdb --save

在Next版本7.20以后(如7.30),hexo-generator-searchdb换成了hexo-generator-search,卸载并安装hexo-generator-search,本地搜索就可以正常使用了,不然会出现只能搜索标题内容的bug

 npm uninstall hexo-generator-searchdb --save
 npm install hexo-generator-search --save

似乎那几个背景特效和进度条都会拖慢网页加载速度,不知道什么时候支持原生动画

报错

 YAMLException: duplicated mapping key at line ...

这说明你的key重复了,比如在yaml里同时两段

 calendar:
      calendar_id: <required> # Your Google account E-Mail
      api_key: <required>
 calendar:
      calendar_id: <required> # Your Google account E-Mail
      api_key: <required>

删掉一个calender或者将二者合并就可以了

next v7.3.0 版本的定制路径改了,比如custom.styl改成了source/_data/styles.styl,参见

custom_file_path:
  #head: source/_data/head.swig
  #header: source/_data/header.swig
  #sidebar: source/_data/sidebar.swig
  #postMeta: source/_data/post-meta.swig
  #postBodyEnd: source/_data/post-body-end.swig
  #footer: source/_data/footer.swig
  #bodyEnd: source/_data/body-end.swig
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  #style: source/_data/styles.styl

你也可以修改custom_file_path:来自定义定制内容路径。
这些内容在git merge的时候需要手动移动

Next v7.3.0 版本的标签不再支持 Full-image tag

 WARN  Full-image tag is no longer supported.

使用

 {% fi https://image-url, 图片名称, , 35% %}

这样的标签无法再进行图片缩放,可以改用html方式

 <img src="图片地址" width="50%" height="50%"  style="margin: 0 auto;"/>
 <img width=400 src=" your-image-link" alt="上海鲜花港 - 郁金香" />

<div style="width: 200px; margin: auto">![picture name](example.jpeg)</div>

或者hexo标签

 {% img [class names] /path/to/image [width] [height] "title text 'alt text'" %}

另外,fancybox虽然现在还支持,但是据说计划在8.0版移除,所有jQuery有关的东西都在逐步移除,目前已经支持 medium-zoom,可以在设置中开启

 npm install medium-zoom

“在新版中 quicklink 不建议再使用,最起码不要与 pjax 同时开” 更新,这个在7.4版本以后修复了
无法加载 woff 字体资源 404 问题

 Failed to load resource: the server responded with a status of 404 () fontawesome-webfont.woff2:1

这个找到提示的文件夹 source/font 路径,找到这三个缺失的文件,补上就可以了(可能没有这个文件夹,新建一下就行了)

更新主题

这里我使用的Next主题,参考https://github.com/theme-next/hexo-theme-next/blob/master/docs/zh-CN/DATA-FILES.md
在7.X以后大的更新还是需要手动处理冲突,但是Next主题将两个_config.yml文件合并搞了一个next.yml,在source/_data底下。这样更新的时候git pull后commit和merge就不用每次手动处理主题的_config.yml冲突了
merge之后指定版本

1
git checkout tags/v7.4.1

(可能会有nothing added to commit but untracked files present的提示,运行git clean -f清理不想要的文件,或者加到.gitignore里面, 还要就使用git add . )
如果版本指定不对,会有detached HEAD出现,重新指定正确版本。如果还不行,可能git add等出了冲突,看这里

升级Hexo4.0

今天检查更新的时候看到这样的提示,发现Hexo出4.0了。
跑到群里一看,说是什么Hexo 4.0.0 会有巨大的性能提升(相比 Hexo 3.2 生成速度提升 10%,内存占用减少 40%)。闲着没事就升级玩玩吧虽然我这也没几篇文章,生成速度本来也不慢。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
λ npm-upgrade
Checking for outdated dependencies for "D:\zjk\myblog2\package.json"...
[====================] 21/21 100% s can be used.

New versions of active modules available:

hexo ^3.9.0 → ^4.0.0
hexo-deployer-git ^1.0.0 → ^2.0.0
hexo-generator-archive ^0.1.5 → ^1.0.0
hexo-generator-category ^0.1.3 → ^1.0.0
hexo-generator-feed ^1.2.2 → ^2.0.0
hexo-generator-index ^0.2.1 → ^1.0.0
hexo-generator-tag ^0.2.0 → ^1.0.0
hexo-renderer-ejs ^0.3.1 → ^1.0.0
hexo-renderer-stylus ^0.3.3 → ^1.1.0
hexo-server ^0.3.3 → ^1.0.0

? Update "hexo" in package.json from ^3.9.0 to ^4.0.0? (Use arrow keys)
> Yes
No
Show changelog
Ignore
Finish update process

直接升级

1
npm install -g [email protected]

更新,现在hexo-cli包也上hexo4.0了,使用官网的那个带cli的命令就行了
升级之后试一下’hexo generate’

1
2
INFO  Files loaded in 1.94 s
INFO 140 files generated in 3.07 s

好像是快了点
等等,更新了Hexo4.0以后下面的分页突然变成这个样子了,我先报个修
bug

bug

找到了问题了,已经在issue#3729里解决了
现在直接升级到master分支就行了

1
2
3
cd themes/next
git pull https://github.com/theme-next/hexo-theme-next master
git checkout master

看到显示这样就行了

Already on ‘master’
Your branch is up to date with ‘origin/master’.

Picture 好了,开心。目前没看到其他bug了,请放心更(cai)新(keng)

更新,现在最新的master报这样的错:

 ERROR Cannot read property 'replace' of null

还有这样的错

 ERROR Process failed: layout/tag.swig

换到nunjucks分支,也有这个问题,先切到contrib分支里面,nunjucks那块正在施工,大家先用着旧版,我已经报修了。劳模mimi同学已经在修了(19.10.18)
更新,感谢劳模Mimi同学,已经修了Migrate to Nunjucks [3] #1226

绑定域名并托管到netlify

先到namecheap或者namesilo等网站找个中意的域名,不介意在天朝备案腾讯和阿里云买也可以,不愿意花钱也可以申请个免费的。我这里0.99刀一年优惠买了个zhangjk98.xyz

在netlify的domian setting里找到Custom domains按照提示来,可以参考这个使用 Netlify 托管个人网站 详细步骤

Google Search Console 验证和配置

这里以netlify为例,namesilo等域名商也可进行验证
dns验证
有自己的域名可以直接选择domian验证,看这里
打开netlify,找到dns setting,点击下方add new record 按钮
添加验证
value就填谷歌给你的那个值,等几分钟就好了

美化

设置footer跳动的红心
在next配置里找到icon 设成下面这个样子

   icon: 
      # Icon name in Font Awesome. See: https://fontawesome.com/v4.7.0/icons/
      # `heart` is recommended with animation in red (#ff0000).
      name: heartbeat
      # If you want to animate the icon, set it to true.
      animated: true
      # Change the color of icon, using Hex Code.
      color: "#FF0000"

自定义字体: _config.yml里找到

 font:
      enable: true

使用caniuse测试浏览器兼容性

使用yarn管理npm包和travis-ci自动化部署

可选,本地生成速度够快或者不嫌麻烦也没太有必要上travis-ci
不愿意折腾就直接本地生成部署就好了,ci反而慢,而且就想发个博客的话完全没有必要!

今天经人提醒,hexo s 是动态编译的,本地预览直接hexo s 就行了,不用先 hexo g 生成

插件选择

踩坑

lazyload插件、fancybox插件(改用mediumzoom)、pjax插件、fliter-optimizer插件(经常跟很多地方冲突)等建议慎用

给Mardown添加论文脚注效果

安装插件:

1
npm install hexo-reference --save

注释测试[1]

使用Cloudflare和Github Pages

由于Netlify访问速度实在太慢(居然比Github Pages还慢),本来以为只是在国内慢,没想到收到一封邮件,说:

然后我感觉不对劲,拿ping工具和网络测试工具(https://gtmetrix.com)看了一下,又查了一下,原来不仅国内慢啊,国外也比Github Pages慢啊
Netlify居然还说“Why You don’t need clcoudflare”, 我。。。

Picture

换回GitHub Pages和cloudlfare,还有CNAME Flatterning, 不需要备案的免费CDN也就cloudflare了。
ping检测结果终于不是一片飘红了。巨硬收购Github后说要建设Github国内的服务器,但是它自家的Azure、bing、onedrive都整天抽风,感觉指望不上了。

Picture

现在唯一的问题就是图床用的Github,已经弃疗,国内速度不管了。

可能的小坑:开启coludflare的 rocket loader 功能后会出错(这是个实验性的功能),Next主题会变成一片空白,一直加载不出来。关掉就好了。

提高加载速度

GTmetrix上看到我这得分才70多
发现首页两个图片占了很多,把两个图整成webp格式的,然后再调整一下大小(这里我用的这个网站)。这里抛弃safari用户了
(cloudflare的business是有这个功能的,但是我用不起)
然后把velocityjs的那些动画效果关了(这个早就想关了,和其他组件各种冲突)

虽然拉黑了百度[2],但是发现我的流量统计还是有一大半是国内访问,为了照顾一下国内速度,还是用了Cloudflare的CDN
大多数时候,国内 cloudflare > github pages > netlify (如果不用个人域名,用netlify的二级域名会比XXX.github.io快一点)。raw.githubusercontent.com 是基本废了,想作为国内图床并不可行
(备案是不可能备案的)

可能的问题请参考

Hexo常见问题解决方案
hexo主题美化
hexo-next主题下的美化
hexo官网
next文档(6.0以后)
hexo指南 从node.js操作到next主题,很详细,自己折腾可以参考,也记录了很多坑,但是不全,非官方指南,都是个人博客的坑。他还写了别的指南
https://github.com/theme-next/awesome-next#pluginsNext主题的插件,7.X版本之后越来越多的功能都剥离出来做成了插件, 使用时要npm install 一下,不能会直接在设置里设为true
markdown教程

注释

1
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/lurongkai/anti-baidu/js/anti-baidu-latest.min.js" charset="UTF-8"></script>

  1. 1.这是一个注释测试
  2. 2.加了一个这个