从 2014 年开始, 不知不觉用 Octopress 写博客已经四年多了. 用的主题叫做Greyshade, 陆陆续续做了很多小改动, 同时也使整个项目一团糟, 慢慢的变得难以维护, 编写一篇新博客的成本也越来越高了, 终于下定决心给博客搬个家.
调研过一些博客框架, 例如车亮亮做的基于 Django 的博客系统 (GitHub 主页), Jekyll, Ghost, etc. 但最后还是选择了现在最火的 Hexo. 本文主要记录了使用 hexo 的心路历程, 至于如何部署可以参考这篇 blog: 在 vps 上部署你的静态博客(网站)
放一张图纪念一下老博客:
Octopress 几个痛点
toc 支持差
toc: table of content, 虽然在老博客上可以在文章开头手动生成, 但体验肯定没有 hexo 上原生支持的好:
痛苦的编辑:
虽然有一些小技巧提升实时预览的响应速度: Octopress rake generate 命令的大提速🚀, 但每插入一张图片都需要手动的编辑标签(为了支持 lazy-load), 例如:
1 | <img style="max-height:350px" class="lazy" |
直接抹杀了我更博的速度, 而 hexo 因为比较好的生态支持, 有 hexo-admin, HexoEditor 之类的工具, 可以解决上面说到的问题.
octopress 生态不行
已经三年没有更新了.
从迁移 Octopress
官方文档: https://hexo.io/docs/migration.html#Octopress
基本配置
Template render error: (unknown path)!!!!!!
官方提示: https://hexo.io/docs/troubleshooting.html#Template-render-error
日志hexo s --debug
最后发现竟然是\u2028
的问题, 是一个不占位数, 不可见的字符..图片 (lazyload & fancybox):
https://github.com/Robin-front/hexo-lazyload
fancybox 和 lazyload 的自定义配置!!!:themes/next/source/js/src/utils.js
终极解决方案: Webstorm 的 Zero Width Characters locator 插件:目录: toc 自动生成
基本的 config: https://hexo.io/docs/configuration.html
打赏 (Done)
RSS (Done)
Local Search (Done): https://guahsu.io/2017/12/Hexo-Next-LocalSearch-cant-work/
Instagram/wechat social icon
disqus 手机端不加载
个性化配置
目标: 让人感觉不到是在用 Hexo 的 Next 主题.
-
首页文章显示为块状 - read more 的按钮.
- 关于我的页面
- 主题颜色
- font-awesome icons: https://fontawesome.com/v4.7.0/icons/
- algolia search(没有 local search 好用)
- 背景图片
- github CI
- 不翻墙也能使用的 Disqus 评论框.
- 分离图片使用 CDN
- github CI
- Email Subscriptions
- 自定义 404 页面
- 百度熊账号
优化加载速度
- HTTP/2
- hexo-filter-optimize 效果见下图: