@scomper

博客迁移到 Bitcron 的二三事

2017.09.22

最早的个人博客是在网易的 Lofter 上,现在都记不清是因为些什么细碎的不顺畅改到了「简书」,当时感觉「简书」的后台编辑器使用起来太方便了,于是开始喜欢上 MarkDown 这种写博客的方式,好像人的口味就是这么一步一步被提高的,因为 MarkDown 知道了 Ulysses 这样的编辑器,然后给自己挖的坑就越来越多了。从「简书」转到 Medium 或许只是可以在 Ulysses 里一键发布,毕竟由俭入奢易,反过来就很难再适应。

对于 Bitcron 自己完全属于后知后觉的一群,原本只是打算找个 Ulysses 的替代品,试用了 MarkEditor 以后才发现这个一站式的解决方案。购买 MarkEditor Pro,注册 Bitcron、购买新域名,好像有点冲动消费似的一口气都决定了,回想起来那些无形的推手不少,@kawnnor 对域名的建议和赞助、Medium.com 国内用户无法访问、发布后的文章修改无法同步到本地、Ulysses 预览图片不方便,脑补的时候自己都觉得有点「牛夫人」似得喋喋不休。

简书文章的导出

简书里导出文章很方便,直接在后台设置「帐号管理 - 打包下载文章」就好了。下载下来的文章不包含图片,所以接下来的工作就需要 MarkEditor 开始接手。

MarkEditor 和 Ulysses 最典型的不同就是 MarkEditor 是基于文件夹的方式来管理文档的,Ulysses 是基于自己的文档库以及内部分组实现文档的有序管理。首次使用 MarkEditor,它就会提示你创建工作文件夹,用来保存 md 文件,工作文件夹里再创建一系列子文件夹来实现文档的分类,实际上这个工作在 Finder 里完成也一样,你指定一个文件夹给 MarkEditor,当它打开的时候会遍历并显示在边栏中。MarkEditor 的边栏像是 Finder 针对某个文件夹的聚焦模式,所以,我们可以直接将图片、文档拖拽进去,不过 MarkEditor 仅会显示 .md 后缀的文件。

为了接下来的文章迁移,工作文件夹里需要创建一个_image的文件夹,然后回到「简书」网站,打开网页逐一浏览文章并将图片右键保存到这个文件夹。What ???怎么用这么原始的方式。当然有更快的下载方式,例如,安装 Chrome 扩展 Fatkun 或者 I'm a Gentleman,Fatkun 好像存图片原始名称有问题,最后还是用 I'm a Gentleman。安装上 I'm a Gentleman 后退出重新打开一次 Chrome,前往需要下载图片的网页,按住 option 键点击图片就是单张下载,如果点击扩展栏按钮当前网页的图片会全部下载。

Gentleman 不仅下载了原图,还会下载网站优化后的图,所以你会看到一堆图片哦。比较一下图片的分辨率就能发现带括号的是尺寸压缩后的网站优化图片。如果文章中的图片不多,还是按住 ⌥ 点击下载更有效一些。


下载图片并保留原始名称主要是方便后面替换,如此,只需要先将图片都下载好并保存到_image的文件夹,然后用文本编辑器(例如 BBedit)批量打开简书打包下载的 md 文章替换其中的图片链接就好。

例如,简书文章中图片的链接前面都是http://upload-images.jianshu.io/upload_images/,统一替换成 MarkEditor 工作文件夹中的_image文件夹。用 BBEdit 的 「Search - Multi-File Search」很容易实现。将 md 文件保存到 MarkEditor 的工作文件夹,打开 MarkEditor 刷新一次就能看到内容和图片,如果图片链接有问题,显示的就是类似于![](/_image/3175-0c1742256.png)这样的 MarkDown 语句。

为了便于复查和批量操作,建议每次打开 10 篇左右的文章,改完一批,清理下载文件夹再继续操作。Finder 中按照文件夹分好类,打开 MarkEditor 看到的就是下面这个样子。

MarkEditor 边栏和 Finder 里的文件夹是一一对应的,和 Bitcron 同步(发布博客到网站)后还会新增一些配置性质的文件夹(_ 下横线开头的文件),MarkEditor 里文件夹上右键可以将这些文件夹隐藏。

MarkEditor 编辑界面会直接显示图片,这是自己很喜欢它的一个地方,对写作来说直观和方便很多。当我们将图片拖拽到编辑器里时,图片插入的同时也会自动复制一份到工作目录的_image文件夹,而删除图片时亦会询问是否删除导入的图片。

Ulysses 文章的导出

以前博客文章发布后,如果需要修改,都只能通过网站的在线编辑器来修改,所以本地文章的版本往往不能和网站的版本保持一致,人工线上线下同步更新太耗费精力,也容易出现遗漏。所以在博客文章迁移这件事上,肯定是优先考虑从网站上下载。比较起来「简书」就厚道多了,Medium 后台申请下载的文章既不识别中文文件名(全部替换成短横线),而且还都是 HTML 格式,所以只能考虑从发布源头 Ulysses 里导出。

Ulysses 通过添加外部文件夹可以批量导出所有文档,但是包含的图片不会保留,而且图片位置的 MarkDown 语句也会被拿掉,这意味着所有的图片需要重新插入。这个方式只适合没有配图或者图片很少的文章。

Ulysses 里选择单篇的文章(接合的文稿需先拆开),导出为 MarkDown 可以同时将图片和 md 文件都保存到指定目录,转移起来相对容易一些。槽点还是有,这种方式每次只能导出一篇,而且导出的 md 文件默认是 index.md,需要自己重命名)。

接下来的工作和前面一样,先将图片移动到 MarkEditor 工作目录的图片文件夹,然后将命名好的 md 文件移动到 MarkDown 工作文件夹。图片链接的修正问题在 BBEdit 和 MarkEditor 里完成都可以。例如,将 Ulysses 导出文章中的 ![键盘热键](3175-bdff-sample.png)替换为![键盘热键](/_image/3175-bdff-sample.png)

发布到博客平台前的注意事项

MarkEditor 是基于文件夹管理文档的,所以最好是在发布前做好文件夹的规划,发布后修改文件夹的名称可能会导致链接的指向出现问题,那个时候修复就只能全部从云端下载一次。

Finder 里创建的图片文件夹/_image/需要和 MarkEditor 中当前目录设定的一致,MarkEditor 会基于设定路径来复制插入的图片,同时这个图片路径也是文章发布后网页文章调用图片的绝对路径。/_image/ 和默认的 ./_image/是不同的,后者如果你移动文章到其他文件夹图片显示就会出问题,采用前者文章可以在工作文件夹里随意移动。

Meta 的用法

迁移文章时面对的第一个问题是文章的发布日期,如果不设置通通就都变成了当前的日期和时间,这其实是个很大的问题。好在看完 MarkEditor 的文档后发现用 Meta 语句 就能自己定义。

每篇文稿的最前面加上 Meta 声明,从首行开始,每行用 key: value 格式进行声明,其中key必须是英文名。比如

date: 2015-01-10 19:55
title: 'Blogging Like a Hacker'
comment: no 
toc: false
status: false

然后这里是正文的开始...

date 后面是你文章的发布日期;title 是文章的名称;comment 决定是否显示评论;toc 决定是否显示大纲(MarkDown 语法中 # 号开头的部分);status 决定在网站显示并可访问。在 MarkEditor 中写的时候如果不希望不小心就把未完成的稿件发出去加上 status 就好,默认 status: public 才会显示,其他任何值都不显示。通常只会用到 title、date 这两项。

另外,status设置,也基于根目录规则的优先级最高,比如 site_foder/_draft,其中 _draft 是一个根目录,同时又以_开始,则认为这个目录下的所有日志的 status 都为 draft,同理类推,如果是 _system 目录,则是 system 这个 status。

如果不定义这些 key,MarkEditor 发布文章时会调用文章现在的创建时间并以文件名为文章名称。所以不管是旧的文稿还是新建的文稿都加上比较好,MarkEditor 的工作文件夹设置中(边栏底部的扳手图标)将「自动 Metadata」设为是即可。

途径有了,但是迁移的旧文稿要添加这一块的内容就真是体力活了,简书和 Medium 导出的文章都是不带创建时间的,Ulysses 里也不显示,所以只能在网站上一篇一篇打开来复制当初的发布时间。

为了提高一点效率,还在 Alfred 里创建了一个快速短语,自动粘贴需要的 Metadata 并插入前后两次的复制结果。


这样在简书网站先复制文章标题,然后复制发布时间,最后到 MarkEditor 的文章里通过快捷短语插入。Ulysses 的创建日期是在 Finder 里一篇篇搜索出来的,唉,怨念啊。每一篇旧稿的 Metadata 日期加的人很崩溃。

发布博客

Bitcron 的注册就不赘述了,注册成功后在管理后台进入「我的网站」,点击「Token」获知你的访问密钥,打开 MarkEditor 工作目录的云设置(边栏底部的☁️图标),将密钥复制到「网站 Token」当中,节点可以在 Bitcron 我的网站里展开顶部的「节点」查看到。默认填写 us.bitcron.com 的主节点就可以。域名部分如果你没有注册个人域名,使用 Bitcron 提供给你的域名也可以,以后添加了个人域名再修改这里。


同步参数填写好理论上就可以直接在 MarkEditor 里发布博客文章到网站了,如果文章比较多第一次同步的时间会长一点。

MarkEditor 的同步是单向操作,发布选「开始同步」,从博客网站同步数据下来选「从服务端同步回来」。

「我的网站」选择 Clouds(Dropbox)启用网站和 Dropbox 的同步,这样博客里的所以文件都会同步到 Dropbox 的文件夹(应用 - Bitcron - 域名)中。

博客网站的优化

发布完文章看起来就告一段落了,不过博客网站还有一些优化的工作要做,要细说起来就很琐碎了,我就只简单列举一下这些不务正业的事项吧,这些工作大部分是在「我的网站 - Dashboard」中完成,少部分是在「我的网站 - 文件管理器 」里完成的,后者操作风险更高,不熟悉最好不要动。

主题和 App

尝试了多个主题,搞清楚了「应用为主题」和「作为 App」的区别,App 里添加了一个 wechat ,方便访问 https://scomper.me/wechat 以微信预览的格式浏览指定文件夹下的文章,然后可以复制发布到微信公众号。

https://scomper.me/diagram 链接的是打算专门放图片的一个页面,不过因为全是图片刷新速度不理想,也费流量,所以最后从导航里拿掉了。


研究 smart page 还保存了一个 https://scomper.me/apps/simple,😄放视频和图册不错的主题。

修改主题

发现没有完全符合自己要求的主题,例如,风格简单但是没有搜索框,文章阅读页要有一个上一篇和下一篇方便跳转页面;琢磨如何修改主题,用克隆的方式应用主题,在「我的网站 - 文件管理器 - 」里找到文件对代码的部分作出修改。

base.jade 中添加搜索
增加了一行代码:
+posts.search_in_html()

post.jade 中增加了上一篇和下一篇
a(href=posts.previous_one.url)= posts.previous_one.title
a(href=posts.next_one.url)= posts.next_one.title

下载找了一个 404.jade 上传到 template 目录,让报错页更友好。

Dashboard 中的优化

对照 pi.bitcron.com 帮助中的介绍优化网站:

  • 常规设置中,设定图片的最大宽度,优化图片提高网页加载速度
  • 使用单一域名(已经注册域名的可以设)
  • 创建 Bitcron Mail,接收评论邮件
  • Dashboard 内将「同步到云端」设为「是」,将「从云端同步」设为「否」,避免 Dropbox 本地的改动影响网站,仅做文件备份
  • 常规设置中隐藏日志前缀URL,设置 URL 不以 /post/ 开头
  • 高级设置中启用「防盗链」,降低不必要的流量消耗,「禁用爬虫」,实践结果是「防盗链」开启后,RSS 订阅中无法显示图片,最后还是关闭了
  • 添加「关于」页的导航
  • 制作图标,设定自己的 Site Favicon [.ico](网址栏,收藏夹中显示的图标)、Site Avatar(网站头像,部分模板中显示在首页)、Admin Avatar(评论留言中管理员的头像)、Visitor Avatar(评论留言中访客的头像)、Default Background(网站的背景图)


其实还花时间研究了 smart page 的定制,用到了范例里提供的「简历.page」,最后发现它的呈现风格很难和现有主题协调,最后还是单独以 md 文件的方式写了一个。会用到 Meta 的一些 key,comment: no 文章后不显示评论,status: false 不以文章的方式呈现,html: true以 html 的方式可访问,便于在自定义导航中引用,例如,导航里我填写的是/sc_static/aboutme,前面的/sc_static/是保存这篇特殊文章的文件夹。

title: aboutme
comment: no 
toc: false
status: false
html: true

站点 Favicon 进阶

博客后台添加的 Favicon.ico 并不会在 iOS 设备上显示,直到打开 https://realfavicongenerator.net 这个网站才知道要支持各种平台可不光是一个 ico 文件就能搞定。让人欣慰的是这个网站不仅提供了网站 Favicon 支持情况的检测,还提供了一站式的生成服务,最后提供图片和相关文件包以及嵌入代码。


Bitcron 采用的是 jade 格式,所以这里我们选择 Jade 的标签获取嵌入代码。
Favicon package 包下载后解压复制到你博客之中,代码中默认的路径是根目录下,我的模板里这类资源都放在_direct目录,所以对应修改了一下路径。

        link(rel="apple-touch-icon", sizes="180x180", href="/_direct/apple-touch-icon.png")
        link(rel="icon", type="image/png", sizes="32x32", href="/_direct/favicon-32x32.png")
        link(rel="icon", type="image/png", sizes="16x16", href="/_direct/favicon-16x16.png")
        link(rel="manifest", href="/_direct/manifest.json")
        link(rel="mask-icon", href="/_direct/safari-pinned-tab.svg", color="#5bbad5")
        meta(name="theme-color", content="#ffffff")

访问「我的网站」的文件管理器,将解压的文件复制进去,并且修改 base.jade 文件,将上面的代码复制到图示的位置(head 后,注意缩进)。


保存修改后,再试试用 Favicon checker 检查一下网站 Favicon 的支持情况,一片绿色就是 OK。

阅读数量

在列表页和文章页显示文章被访问的次数,需要加上post.visits or 0


拉拉杂杂流水账一般的罗列了这么些,希望对刚开始使用 Bitcron 的用户有一些帮助,不重复踩坑。具体的设置问题欢迎留言或者 Telegram 交流。

--「壹页单章」会员计划 --

Comments
Write a Comment