Hexo博客折腾

最近拖延症发作,心血来潮又折腾起了GitHub Pages 博客,而且灵机一动,改选了Hexo来搭建,打开了新世界的大门。

一、从Jekyll到Hexo

去年折腾过GitHub Pages博客,可惜由于问题重重,最终热情消耗完就没继续下去了:

1. 错选了Jekyll

Jekyll 如果要在本地生成站点,就要安装Ruby。Ruby一点都不了解,而且对Windows不友好

Jekyll最终是在GitHub生成页面,生成的速度有时慢。但最终让我放弃的是,多个gh-pages出现了不明原因的错误:

Your site is having problems building: Page build timed out. Please try again later.

发邮件给GitHub求助,发现问题居然是一个MD文件中的一行中文字引起的,而且原因未知。

Thanks for your patience while we’re looking into this. We’ve been able to narrow the problem down to this post:

https://github.com/chchuj/jekyll-minimal-theme/blob/gh-pages/_posts/2016-06-06-fanqiang.md

Specifically, this line:

“是一款墙内也能获取的软件,只需往赛风官网提供的邮箱[email protected]发送任意邮件,立马就能收到自动回复。在回信中,直接就附上了赛风的可执行程序(如果邮件里的附件名叫“psiphon3.asc”,改为“psiphon3.exe”即可直接运行”

There’s something in there that’s causing our parser to freeze, and we’re not quite sure why yet, but we’ll be in touch as we figure out more details.

当时工作人员邀请我继续研究这个问题,当时是放弃了。过了一年,发现问题依然存在,而且出了更奇怪的bug。

相反,Hexo用的JavaScript我学过基础,而且Windows友好,本地编译速度快(第一次在本地local预览成功时非常激动);还是台湾人建的,有中文文档。搜索了一下,发现使用的人不少,很多问题都可以在中文搜索结果中找到答案。

Google 搜索“jekyll 还是hexo”,可以看到一堆选Hexo的。

2. 选错了模板

知乎被顶到最上方的是一个实际上非常难用的模板:https://github.com/Huxpro/huxpro.github.io

教程写得也很糟糕,操作起来很麻烦。

其他的Jekyll模板也多是年久失修,还有什么Jekyll的版本问题。

相反

网上搜了一下后,发现hexo可以实现本地预览的功能,就决定用hexo来搭,next这个主题是个比较经典的主题,作者的维护也一直很棒,甚至出了一个用户手册,基本能实现我的所有需求。

other–博客从jekyll搬到hexo记录

Hexo nexT这个主题内置多种模块,通过修改参数开关就能简单配置,可以快速上手。

3. 选错了教程

除了https://github.com/Huxpro/huxpro.github.io 的糟糕的README之外,被SEO到最上面的GitHub Pages教程是陈素封的《如何搭建一个独立博客——简明 GitHub Pages与 jekyll 教程》(现在发现改为Hexo教程了)。根据该教程,部署博客要安装一堆软件,而其中一个GitHub Desktop非常大,下载要翻敏感词墙,下载到了也没安装成功。

而Hexo的教程推荐的都是Git+Node.js,Git很小,36.7M,Node.js 我下载的LTS v8.9.1,15.9M不大。《GitHub+Hexo 搭建个人网站详细教程》这篇教程写得非常好,跟着它成功入坑。

4.想当然地下结论

其实去年Doge就推荐了Hexo,只不过当时很想当然地认真本地编译很麻烦,就直接跳过了。

二、Hexo折腾记录

根据《GitHub+Hexo 搭建个人网站详细教程》搭建时遇到了一些问题,花了2周的时间陆续解决了:

1.win 10 没有右键文件夹在此处打开命令窗口的功能

需要通过注册表添加,或者在地址栏键入cmd,或者建一个bat实现

2.卡在第一步npm install -g hexo-cli

这一步折腾很久,各种出错。原因包括npm被墙,使用taobao npm貌似也不行,解决方法是为cmd设置全局代理

3.hexo init blog出错

这一步也出错一堆。提示Failed to install dependencies. Please run ‘npm install’ manually!

搜索反复折腾,最后根据字面意思,要cd进入真正的json所在的文件夹。就是blog里面的blog。原因可能是因为没严格按这文章说的来,我是右键blog文件夹来运行命令行的。

1
2
3
E:\Computer\Blog>cd \computer\blog\blog

E:\Computer\Blog\blog>npm install

又出现这个错误↓

npm ERR! Please try running this command again as root/Administrator.

StackOverFlow里面的人讲了一样,试了一下

npm cache clean –f

就行了,不过那帖子里面说这是玄学,有的人第一次清就行,后面再出来用这招就不行了。

4.Coding.net和Github两地部署Hexo博客

博客预览成功,没兴奋多久,就发现我的username.github.io被墙了。考虑到我主面还是面向墙内用户,就同时部署到coding.net上。

还有一种解决方法是github repo里面的文章的MD 页面,hexo 原MD的图片相对地址上传到github无法预览,使CodeFalling/hexo-asset-image的插件能解决问题(这个插件也有问题的,有时路径是文件夹/图片,有时又直接用图片名引用)

这使我体会到,域名并不重要,个人IP、个人名牌者是最重要的。中国敏感词防火敏感词长城一发力,域名就报废了。像前阵力那些被封的公众号、营销号,重新注册了一个就复活了。

5.优化hexo博客的永久链接

根据《hexo链接持久化终极解决之道》和《HEXO的站内链接和永久链接》,我把文章的永久链接设定为“/日期-英文标题”的形式。在_config.yml中修改

1
2
3
4
5
root: /
# permalink: :title/
permalink: :year:month:day-:english_url/
permalink_defaults:
english_url: essay

Front-matter里面写上英文标题:

1
2
3
4
5
title: Hexo博客折腾
english_url: play-with-hexo-blog
date: 2017-11-25 23:29:18
tags:
- hexo

这样的的MD文件和文章tittle都是中文的,再分配一个变量来起英文名,方便后期整理

这样所有网页堆在public根下,链接非常好看(域名/tittle),等到有1000个网页,再改为permalink: post/:urlname 放到post下面吧

6.在菜单中挂上了个人项目

主要是健康科普反中医敏感词

7. markdown中本地和线上图片自动传图床并替换链接

8. Hexo Next 主题点击加载 Disqus 和来必力双评论系统

9.Hexo Seo优化

然而百度SEO并没有生效,不知道是不是tk域名的问题

10.CloudFlare & Authy 两步认证的bug

GitHub Pages用了自定义域名就没有https了,想用CloudFlare加上https。一年没登录CF了,登录时卡在Authy验证码界面,最后发现是Authy与CF不同步的问题,Authy说是CF的锅,提交了验证信息,CF的support为了解除了2FA。但感觉坑还是在Authy这边,Authy android APP和chrome扩展显示的token不同步。

https是用CF的Page Rule实现的,而且开Page Rule就一定要用它的CDN。

11.hexo中所有文件的编码格式均是UTF-8

一旦有非utf-8编辑的文件,hexo生成的博客就有错,一般是直接不显示某些部分。使用EmEditor/Sublime Text/Typora/Python都可以指定编码。EmEditor最敏感,打开文字时编码不一样就立刻有提示,Sublime Text保存的时候在下面的信息栏有提示编码。

12.RSS同步到人人网?

经过反复测试,确定人人网日志导入仅支持http格式的rss(支持tk域名),不支持导入https,支持导入七牛中的atom.xml,不支持cloudflare CDN后的atom.xml

CF的https和CDN舍不得关,所以替代的解决方案是把atom.xml自动上传到七牛,覆盖到之前七牛中的atom.xml,来实现hexo blog→RSS→人人网的同步。先写了一个简单的脚本,后期再完善吧

13.Markdown绘制流程图

期间改编了一个Python脚本,想学人家画一个流程图,学习了一下在Markdown中用语法写流程图。Markdown本身不支持流程图,它是调用http://flowchart.js.org/的插件(Typora带了这个插件),而且hexo要安装https://github.com/bubkoo/hexo-filter-flowchart才能生成流程图,简书有流程图插件,知乎和微信公众号就没有了。

Markdown中绘制流程图实际上非常蛋疼,纯手工绘制,必须为每个框起一个名字、设置属性以及打上框中的文字内容,然后又要用文字为每一条连接线指定方向(从哪连哪),一旦语法或逻辑错误,直接渲染失败而且没有提示。流程图是自动生成、动态预览的,布置和字体大小不能自定义,流程图太大的时候字就被缩得很小

Markdown绘制流程图

而且想修改某个元素时,没有自动跳转功能,要肉眼去代码堆里面找到对应的地方进行修改。

于是又研究对比了Xmind 8和M$ Visio 2016的流程图绘制,发现还是Visio好。

13.关于Markdown写作

Markdown 是一种轻量级标记语言,将格式与样式分开,方便进行各种CSS渲染及网络发布。实际上写作时也是使用各种快捷键和菜单,边写边格式化,而且由于格式少、语法严格,写作时会更加在意格式。就写作这一点,并没有比M$ Word更有优势,而且Word中的写作形式更自由,格式更自由,比如图片大小、各种排版、序号自动变、格式刷等等。

Word是一种富文本格式,包含的内容更多。因此,Markdown文件可以转为Word(Typora内置了Pandoc),而Word无法完美地转换为Markdown。这和PDF/Word之间的转换是一个道理。


博客折腾史:

知乎专栏不是一个好的博客平台

网易博客解封之折腾 - 知乎专栏

微信公众号开通原创赞赏功能

参考文章:

各种博客平台的比较:https://www.zhihu.com/question/21981094

What is the best solution for a personal blog?

other–博客从jekyll搬到hexo记录

Chalkit wechat
欢迎您扫一扫上面的微信公众号,订阅我的博客!
坚持原创技术分享,您的支持将鼓励我继续创作!