Hexo博客部署和Next主题设置
有问题先看这里啦,更新说明及常见问题 我自己的博客基本会跟着Next主题每月发布的release更新版本,偶尔直接跳到最新的master版本。 可能有的时候因为忙或者其他原因,并不会追最新版,有些之前写的东西过时了也没有改,请大家尽量以官方文档为准。
更新升级至hexo5.0
没有什么太大魔改的话直接
npm install [email protected]
然后把next.yml的配置(或者主题的_config.yml)配置放到根目录_config.next.yml下面。
hexo 5 支持用npm安装主题了
npm install hexo-theme-next
升级7.X的大坑
NexT主题的顺畅更新好像很难,官方不推荐,之前乱改的5.X主题升级7.2分支合并出现问题,一堆warning,索性推倒重来直接新搞一个7.X。
升级可以直接按照官网方法
cd themes/next
git tag -l
git checkout tags/v7.7.1
spawn failed 问题,删除.deploy_git文件夹并重新部署。 _config.yml配置请注意对齐问题
给备份博客的repo添加README.md文档可在这个路径下,这样就会显示在首页 themes%yourtheme%.md
为文章设置预览:添加 <!-- more -->
插入本地图片推荐hexo-asset-image插件,可以看这里
上面那个图片插件的repo已经时archived了,可以考虑换hexo-asset-link这个插件
各种小问题
公式问题
原来采用的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
canvas效果
似乎那几个背景特效和进度条都会拖慢网页加载速度,不填建议用(新版的Next已经把乱晃的那个canvas移除了)
报错
可能出现的一类问题是yaml的配置出现了语法错误报错
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或者将二者合并就可以了
还有一种经常出现的问题
ERROR read ECONNRESET
Error: read ECONNRESET
at TLSWrap.onStreamRead (internal/stream_base_commons.js:111:27)
这种可能是配置出错了,比如引用了某个本地资源结果路径不对找不到资源。这种建议在浏览器里打开F12检查一下
新的自定义配置路径
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 pull
了,不需要再merge自定义修改了 很多老的Next主题自定义教程都是在custom.styl或者直接改主题的css文件,7.3以后的新版要把老教程里的路径改了。 还有一种方法是用Injects自定义主题 据说Hexo5.x之后就能用npm安装主题了,Hexo一直咕咕咕,我们慢慢等吧
标签
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"></div>
或者hexo标签
{% img [class names] /path/to/image [width] [height] "title text 'alt text'" %}
其他插件
附上我安装的插件
$ npm list --depth=0
[email protected] /home/zjk/blog
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── hexo-serv[email protected]
fancybox
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已经有了自带的夜间模式,在配置里开启即可,会自动随着系统设置变
# Dark Mode
darkmode: auto
更新主题
这里我使用的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之后指定版本
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%)。闲着没事就升级玩玩吧虽然我这也没几篇文章,生成速度本来也不慢。
λ 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
直接升级
npm install -g [email protected]
更新,现在hexo-cli包也上hexo4.0了,使用官网的那个带cli的命令就行了 升级之后试一下'hexo generate'
INFO Files loaded in 1.94 s
INFO 140 files generated in 3.07 s
好像是快了点 等等,更新了Hexo4.0以后下面的分页突然变成这个样子了,我先报个修
找到了问题了,已经在issue#3729里解决了 现在直接升级到master分支就行了
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'.
好了,开心。目前没看到其他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等域名商也可进行验证 有自己的域名可以直接选择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添加论文脚注效果
安装插件:
npm install hexo-reference --save
注释测试1
主页文章置顶
hexo-generator-indexed
使用Cloudflare和Github Pages
由于Netlify访问速度实在太慢(居然比Github Pages还慢),本来以为只是在国内慢,没想到收到一封邮件,说:
然后我感觉不对劲,拿ping工具和网络测试工具(https://gtmetrix.com)看了一下,又查了一下,原来不仅国内慢啊,国外也比Github Pages慢啊 Netlify居然还说“Why You don't need clcoudflare”, 我。。。
换回GitHub Pages和cloudlfare,还有CNAME Flatterning, 不需要备案的免费CDN也就cloudflare了。 ping检测结果终于不是一片飘红了。巨硬收购Github后说要建设Github国内的服务器,但是它自家的Azure、bing、onedrive都整天抽风,感觉指望不上了。
现在唯一的问题就是图床用的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教程
注释
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/lurongkai/anti-baidu/js/anti-baidu-latest.min.js" charset="UTF-8"></script>