本文介绍将Steem文章同步到GitHub pages的开源工具和免费服务:
- 开源工具 “blog”:https://think-in-universe.github.io/blog/
- 免费服务 “steemblog”:https://steemblog.github.io/
Image Source: Pixabay
缘由
最近在用steem的时候,觉得不管是用busy, steempeak还是steemit等,它们的界面设计对于看自己以前的文章并不太方便(当然想看其他人的旧文章也比较麻烦),并且由于国内的网络访问这些站点的速度都不太快,所以以博客服务来看,用户体验是挺差的;至于要方便地搜索、归类自己的文章就更麻烦了。
之前曾经有过一些浏览历史文章较方便的服务(如chinabb和steemitfriends),似乎也或者关闭或者收费了,因此暂时没有找到好用的服务。
于是想到可以把Steem上的文章备份成镜像,每日自动同步,便于自己梳理和分析;虽然我文章写的不多,但如同在《标签的本质 | The Nature of Tags(一)》里提到的,组织信息是人类的本能,于是便实现了这里的工具和服务。
GitHub镜像博客
关于为什么需要自己写文章同步工具,其实是值得询问的:
- 首先,博客镜像的工作相信之前有人也已经做过了,这并非什么新想法(但我简单搜了一下也没有找到可以立即复用的工具)。但是搭建博客镜像是一项需要适应自身需求的工作,所以自己动手的话可以有更高的灵活性和掌控度。
- 其次,即便之前有类似工作的话,可能也并不是同步到GitHub,或者也未必会做到近实时的更新,所以这项工作也可以作为一种服务,也并非完全没有价值。
为了完成这项工作,我们基于steem API、GitHub pages和Hexo[1]框架创建了博客镜像搭建工具,效果如下(示例:https://think-in-universe.github.io/blog/):
1. 博客首页
左侧是用户的profile,右侧是近期的文章,中间为最近文章。
screenshot from https://think-in-universe.github.io/blog/
2. 侧边栏:类别和标签
Steem上的标签和类别,会同步到hexo框架下面,并能够正常显示。遗憾的地方在于由于steem上没有类别层级的概念,所以要分类文章,相对来说没有那么灵活。
screenshots from https://think-in-universe.github.io/blog/
3. 侧边栏:近期文章和归档
显示最近5篇文章,以及每个月的文章数量。可以看出,作为写作者而言,我是比较懒惰的 :) 和大家比还有很大差距。
screenshots from https://think-in-universe.github.io/blog/
4. 文章展示:右侧目录、代码高亮和原文链接
在右侧添加了一个目录控件,对于阅读长文是有帮助的。
代码高亮对类似本文的有代码的文章有一定帮助,steemit对代码高亮的处理是比较初级的。
原文链接其实是为了方便我自己有时候引用文章需要,在steem上找文章比较低效。
screenshots from https://think-in-universe.github.io/blog/
5. 搜索
搜索功能对于想要快速查阅或引用自己的文章,较有帮助。点击右上角的搜索按钮,可以进行快速搜索。
screenshot from https://think-in-universe.github.io/blog/
6. 独立的归档、类别、标签页等
如果要单独查看这些信息,可以到分别的独立页面下查看,如有需要,也可以建立其他的标签页。例如,归档页面的时间线,比steem看起来简洁一点:https://think-in-universe.github.io/blog/archives/
screenshots from https://think-in-universe.github.io/blog/
页面展示大体如此,主要的价值在于从文章的角度,信息的组织更为清晰。如果想要获得一个类似的博客镜像,大抵有两种方法:
- 如果你了解GitHub和GitHub pages如何使用,可以使用本文发布的开源代码(https://github.com/think-in-universe/blog),根据其中的README,搭建一个类似的镜像就行了。
- 如果你希望可以使用一个免费的博客镜像服务,可以参考文章最后一章提到的 steemblog 博客镜像服务,或者直接联系我。
如何实现博客镜像工具?
为了实现以上功能,我们可以基于博客框架Hexo[1],搭建从Steem同步数据、并发布到GitHub pages的博客镜像工具,可以支持基于用户名、标签、日期等查询方式的数据同步。下面简要介绍如何实现这一博客镜像工具。
工具的代码在GitHub开源:https://github.com/think-in-universe/blog
关于具体如何使用此工具,可以参考上面项目中的README的介绍:可以在本地安装后使用,也可以通过travis-ci部署。
本项目的代码里重用了 @cn-hello 小门童实现时的一些基本框架,所以需要增加的功能较少。工具的工作流程如下,也比较简单:
- 下载你的Steem文章;
- 用Hexo编译成静态文件;
- 用GitHub pages部署博客;
(1)下载你的Steem文章
由于重用了之前的SteemReader的方法,我们可以指定通过账户或者标签以及时间(天数)来获取文章。
blog/builder.py
1 | class BlogBuilder(SteemReader): |
code from https://github.com/think-in-universe/blog | MIT License
为了将文章下载为hexo可识别的markdown格式,需要在markdown中加入相关ymal或json的元数据。以下为markdown模板,包含了标题、类别、日期、标签等信息,并指定显示文章的目录。
blog/message.py
1 | MESSAGES["blog"] = """ |
code from https://github.com/think-in-universe/blog | MIT License
使用Steem API,获取steem文章的元数据和markdown文本。
blog/builder.py
1 | def _write_content(self, post): |
code from https://github.com/think-in-universe/blog | MIT License
(2)用Hexo编译成静态文件
我们需要为建立的博客设置一个美观的主题。
我们这里使用了 https://github.com/ppoffice/hexo-theme-icarus 主题,需要将其作为一个git submodule加入到git repository中。
.gitmodules
1 | [submodule "theme"] |
code from https://github.com/think-in-universe/blog | MIT License
随后使用hexo命令来将markdown转换成生成静态的文档。
blog/command.py
1 | @task(help={ |
code from https://github.com/think-in-universe/blog | MIT License
(3)用GitHub pages部署博客
正式部署时,我们有两种方式,一是在本地使用hexo命令部署,或者在travis-ci 中定期每日进行同步。
hexo命令部署:blog/command.py
1 | @task(help={ |
code from https://github.com/think-in-universe/blog | MIT License
travis-ci部署:.travis/deploy.sh
1 | [ -z "${GITHUB_PAT}" ] && exit 0 |
code from https://github.com/think-in-universe/blog | MIT License
另外,需要注意,由于用travis-ci 部署时需要用户提供Git用户信息(用于commit到gh-pages)以及GitHub的token,所以需要以环境变量的方式进行配置。
博客镜像服务 http://steemblog.github.io/
今天在微信群中 岩哥 @andrewma 提到想要一个分析文章标签的服务,我想起搭建的这个博客镜像也有标签云和标签统计,所以帮助建一个类似的镜像服务就能解决该问题。
但由于岩哥对GitHub并不熟悉,使用上面提到的博客镜像工具可能较为困难,所以在此基于https://github.com/think-in-universe/blog 项目,建一个organization account用户管理博客,帮助有需要的人建博客镜像的子目录,这就是steemblog。
1. 如何使用博客镜像服务
目前,这个博客镜像服务可以在 https://steemblog.github.io 找到。
如果要添加一个新的用户到镜像同步中,只需添加账户到用户列表中即可(目前是手动添加的)。例如,我们添加了 @robertyan 和 @andrewma 到列表中。我们可以在以下链接访问他们的博客镜像:
与之前的工具需要手动配置用户信息不同,这里自动从steem同步了用户的profile。(不过跟我手动配置的差不多)
screenshot from https://steemblog.github.io/@robertyan/
@andrewma的博客镜像也创建成功了,不过头像和缩略图的处理可能需要做一些改进。
screenshot from https://steemblog.github.io/@andrewma/
比如岩哥关心的标签信息,可以在https://steemblog.github.io/@andrewma/ 中找到:
screenshots from https://steemblog.github.io/@andrewma/
同样的,我们可以继续添加新的用户,他们的镜像可以在 https://steemblog.github.io/@{账户名} 中找到。
对于这样的博客镜像,如有需要或建议,可以在文章后面留言讨论。
2. 如何建立博客镜像服务
https://github.com/steemblog/blog 是在 https://github.com/think-in-universe/blog 的基础上构建的,为了适应多用户的子目录的需要,需要对原来的项目的目录结构和部署方式做一些调整。
(1)从steem下载文章的同时,自动同步用户信息
通过steem获取的账户信息,自动更新_config.yml
和_config.theme.yml
相对应的模板在 blog/message.py
中,由于内容太长,这里不贴出。
blog/builder.py
1 | def update_config(self): |
code from https://github.com/steemblog/blog | MIT License
(2)在生成静态网页时,相互隔离不同用户的路径
将不同账户的页面放置到@account子目录下。
blog/message.py
1 | # URL |
code from https://github.com/steemblog/blog | MIT License
编译指定的steem用户的文章为静态页面,隔离放置在发布目录下。
blog/command.py
1 | @task(help={ |
code from https://github.com/steemblog/blog | MIT License
(3)部署时,将页面推送到 steemblog.github.io
只需修改 .travis/deploy.sh
中的目标代码仓库的参数即可。
最后
究其本质,本文是对steem上的数据进行处理的一种尝试,在开放的区块链数据的基础上,我们可以根据场景,采取多种灵活的数据展现方式,这里的镜像博客无疑又是其中的一种。
希望本文提供的工具或服务对你有帮助,如果需要帮助你开启博客镜像服务,可以在本文留言,我会尽量提供支持。由于travis的使用也有一些限制,优先帮助前5位留言的朋友提供服务 :)
参考文献
- https://hexo.io
- Hexo icarus主题:https://github.com/ppoffice/hexo-theme-icarus
- 博客镜像工具:https://think-in-universe.github.io/blog/
- 博客镜像服务:https://steemblog.github.io/
Posted from my blog with SteemPress : https://robertyan.000webhostapp.com/2019/05/%e7%94%a8github%e5%88%9b%e5%bb%basteem%e6%96%87%e7%ab%a0%e9%95%9c%e5%83%8f-mirroring-your-steem-blogs-on-github-%e5%85%8d%e8%b4%b9%e5%8d%9a%e5%ae%a2%e5%a4%87%e4%bb%bd%e6%9c%8d%e5%8a%a1%ef%bc%9a-st
This page is synchronized from the post: 用GitHub创建Steem文章镜像 | Mirroring Your Steem Blogs on GitHub | 免费博客备份服务: steemblog