妙镜

十袭珍藏,但誓传家而永寳

妙镜改版始末

2017-10-02


博客改版过程中,遇到的一些技术上的细节问题,在此记录。
就像黑夜中的摸索者,手握萤石在岩壁刻上一串记号。

缘起 | 垃圾 node, 毁我青春

版权归原作

本来 Hexo 用的好好的,怎么就换掉了呢?

还不是因为上次搞 自建笔记 云编译时,被疯狂刷 log 的 npm install 吓到。
这才意识到,不光 Hexo, 只要 nodejs 搞的东西,都要装一大砣依赖,以量取胜,令人乍舌。

迁移到哪种博客编译器, 有过纠结。 初步考察后确定,要么 Hugo ,要么 Jekyll.
Jekyll 虽然菜, 相中它还是看在 GitHub 本身配套了云编译。 韦海生的想法(Q2) 给我启发不小。 按他说的方法,随便找个 fork 就能上手,也不用伺候 “高贵” 的 Ruby 环境。 省心。

几经权衡, 考虑到 GitHub 上原生 Jekyll 版本较低,而且绑死 GitHub 的战车上,万一跑路也不方便,所以最终选择了 Hugo,雨果。 Hugo 的好处显而易见:快,无依赖一身轻,跨平台 —— 可以说是非常酷了。

迁移 | 好事多磨

换博客程序,改变的不止构建工具本身,更是围绕构建工具的完整生态。 从草稿格式,到上传发布流程,都有所不同。

这一版 (妙镜201709) 从版面设计,到站点构造,主要照搬自统计学家谢益辉的博客
照搬并不可耻 —— 模仿是新手入门的捷径,懒汉省事的妙招。 多谢谢博士心宽面善,敞开大门,任君采撷。

1.题头

每篇文章的原稿件,开头几行一定有 meta (亦称 Front-matter) 。
文章的标题、发表日期、归类、简述、网址等,都用 meta 来标识,不可或缺。

两个程序都要求写 meta,但格式规定不同:Hexo 通常用 yaml,而 Hugo 虽也兼容 yaml, 但偏爱 toml; 日期格式上,两者水火不容。死板的程序,在这点上含糊不了,必须解决。

那么按照 “解决一批问题” 的思路,搜了个 https://github.com/wd/hexo2hugo/ 转换小工具。

嗨这轮子总归不赖,尽管踩了两洼小坑。

  1. 路径应该写成 .md 文件所在目录,而不是像作者给的范例,定在博客根目录
  2. 以前偶尔偷懒,手写日期。没写全 Hexo 也能过,但这个脚本不认。 比如只有日月年,没有时分秒。 办法也简单粗暴,挨个点开文件,补上 00:00:00 就好了。

2.样式

安装主题请注意, 老老实实地上 git-submodule (不然 Netlify 不兹磁) , 别乱动里面任何东西。
如果想自己修改样式,也没必要改动主题里的文件。 因为主目录下新建的样式文件,会直接顶替主题目录下对应的同名文件 hhhhh。

git-submodule 虽然是个恶客,但如果不惹他,只须 git submodule initgit submodule update 二连就能打发。

然后愉快的改样式咯。

和以前两眼一抹黑相比,这回解读 Hugo 的目录结构,条理清楚得多。
看到基本上能猜到,每个文件夹是干什么的。 今次得心应手,可能也得益于 自建在线笔记的探索过程 , 以及摘抄谢益辉博客源码

管理网站样式的文件,大可分三种:
./static/css 管大方向排版,改改字体,颜色,间距什么的;
./layouts 管细节,讲究什么东西摆在哪里;
./archetypes 管用新文章的 Front-matter 默认模板,用处不大。

css 就换了个颜色 (三四级标题对应棕色,绿色),
而 Layouts 零零碎碎地,改动了不少。 试着列个表 (虽然过去几周了应该记不全)

至于 泛用型网站插件, 主题 里已经集成好 Google Analytics 和 Disqus ,就不用操心了。

3. 站内搜索

搜索这个大坑,在 自建笔记 时已经了解过。

简而言之, 如果自建站内搜索,并把条件限定为 静态页面 + 中文, 那么现有的解决方案寥寥无几;

况且 hugo 并不能像 hexo 那样靠 nodejs 便于无限堆插件 (抱歉)

把自建笔记里的搜索轮子移植过来 不难, 然而全文索引会膨胀, 也估计在 Netlify 的部署环境 上水土不服, 懒得搞了。

不情愿归不情愿, 这里搞搜索还是要靠大厂。 一下子想起的好榜样,不正是V站 Google 搜索么。
咳, 照搬v站搜索框,参考了这则帖子。 勉强考虑一下大清国情,搜索引擎从不可描述的 G 站换成了微软必应。

改成喜欢的样式,还是花了不少功夫。 搞完后看起来舒服多了,哈哈。

我主要的我就是三件事情,很惭愧,就做了一点微小的工作,谢谢大家。

在云端 | chromebook 存活确认

带到学校的笔记本电脑,左转轴终于在这学期彻底崩了,只能摆在宿舍里当台式机。 这件事促使我下定决心,买了台 chromebook

顺带一提,买 chromebook 注意三点: (仅针对低端机型)

  1. 适用性。 有些型号不能装 Android 软件,那就亏大了。先看好型号
    另外注意CPU架构。 Android 软件在 ARM (瑞星微) 上更多,如果装 Linux, 软件在 x86 (英特尔) 上更多。
  2. 选择英特尔,意味着你要放弃一部分续航,或许还有一部分性能。
  3. 双拼用户慎重考虑!你只能在 Chrome 网页上在线用双拼,其他地方它不给一点空子钻!

这“假电脑”真好用,以至于 现在上学必备 chromebook: 放书包里,重量相当于一本大点的教材,记笔记全靠它。

于是, 我有一个很大胆的想法

搞定用 chromebook 发博客的完整流程。即, 从头至尾使用 chromebook 发表一篇博客

Challenge Accepted

浏览器上用 git 托管站(比如 github)自带的在线编辑,也不是不行,但那样的话你只能手动保存, 不符合"在线编辑"的直觉。 而且每存一次,就多一次 commit ; commit 历史记录太长会嫌烦的。

Chrome OS 的原生文本编辑器,却少得可怜:
最完善的要数 caret, 最美观的应该是 quantum
可惜,无论哪个都不能在“替换”文本段里写换行符。 没这个功能还真不习惯。 如果有人找到 chromebook 上有换行符的替换方法,请与我联系~

另一个思路, 就是借助 Chrome OS 原生兼容的 Android 端。
在 Chromeboook 中, Android 的 ~/download 和 Chrome OS 的 ~/Downloads 目录互通,这样倒是可以把 Android 上的编辑器用起来。 git 客户端嘛,也可以用 Android 的。

但编辑本地文件弱点,相当致命,让我不得不否定这条路线:
Chrome OS 的拼音输入法,没有双拼!用惯双拼后,再换回全拼简直太傻了。
甚至我再度动了为此学注音/仓颉的念头。 (额,以前学过这些,半途而废没学会,惭愧惭愧)

好在只要思路开阔,天无绝人之路。 用 Chromebook 这种上网本的同学,一定要心怀两个信念 来骗自己

  1. js 是万能的
  2. 云计算搞定一切。 劳资只要能上网,啥事干不了?

随便搜索找个云IDE,比如撰写本文所用的 CodeAnywhere, 或者cloud9 (这个注册要填信用卡)。 一般 “云IDE” 都带 git,其中有些和 git 托管站集成度好的,写完直接提交上传,也不用调什么设置,还是挺方便。

总结目前 Chromebook 上,发博客从书写到发布的完整流程是:

在远程 terminal 更新 git 仓库后, 使用 hugo 新建文章, 命令为 hugo new post/new-post-name.md –>
Workflowy 摆好思路点和素材链接,放左屏; 右屏开 云IDE 打字,就像这样
–>
开自动保存, 感觉写完了,就通过远程 terminal 提交,推送到 BitBucket 仓库 –>
仓库收到新推送,提交给 Netlify –>
Netlify 把文本文件编译成网页,发布到互联网 –>
于是屏幕前的你,看到了 精美 的本文

可以,这很流畅。

讲真 chrome 浏览器 上的编辑体验,只能算凑合。 怎么可能像真电脑上用 SublimeText 打字舒服。

新出来的 SublimeText 配上美观的主题、字体,真是赏心悦目。 诶,可惜 chromebook 用不了 :(

希冀 | 一点设想

既然博主胸无点墨,文章也乏善可陈, 那么给博客改个版,换个后台,就并没有多少值得敲锣打鼓之处。 如你所见,改版后的那个“妙镜”,还像从前一样,虚有其表。

这回改版,给博客换上了新名字。 “妙镜” ,既落实了旧名“荀木狼之镜”,又隐隐透露出一个惊天动地的大计划

把不同话题的内容,发布到不同博客平台上,组成集群。比如, “器集论” 专门介绍电脑上的使用心得、“鲁工技” 用于积累专业知识、“咒文行” 记录学外语的技巧,等等

是不是光看名字,就觉得很高级? 作为索索明阿姨《阴阳学堂》的骨灰级粉丝,取名当然要从 这里面选

话说天下大势,分久必合,合久必分。
集团化后的下一步,便是统合集群中各个“分部”的内容,又重新收集到同一平台上,像 喵窝社区星球 那样。
找到了这种 平台的搭建教程 ,发现发明人居然是凤凰卷,这就厉害了。

当然啦,既然计划辣么宏大,做好的可能性肯定不足 0.1%

嗯,截至本文发稿,上线的仅有更新日常动态的荀氏传盒, 相信剩下几个面世的时间, 不会拖太久 🏁 Soon™