写了一个极简 Github Page,黑科技,不用第三方插件支持评论.

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 2968 天前的主题，其中的信息可能已经有所发展或是发生改变。

TinyBlog 有什么特性

完全静态,以至于没有任何生成程序
支持 Markdown 常用语法
支持 Github 用户添加评论

为什么要写 TinyBlog

有时候只想简单的写一篇文章,WordPress 毫无疑问过于臃肿,Jekyll 需要安装,而我想要一种更简单的更新博客方式,受到开源项目Simple的启发,我用几个晚上的时间写了一个极简的静态博客.

每次写文章只有一个步骤,push 写好的 md 文章到./blog目录下, that's all .

Demo 地址

http://yanghanqing.github.io/ 推荐电脑访问,暂时没做响应式布局

TinyBlog 教程

从TinyBlog 的 Github 主页fork 一份到你的仓库,更改项目名称为your_name.github.io,几分钟后 Github 会自动为你开通your_name.github.io的个人主页
修改aboutme.md文件作为你的个人介绍,为了更快的加载速度,也可以选择写死在index.html中
写好 markdown 文件后,保存到./blog目录下,push 即可

评论功能

评论这个功能我是取巧了,利用 Github API 在项目 issues 下新建 comment 来存储,实现了原本需要第三方插件才能完成的功能.

许可

MIT

练手的作品~分享给那些和我一样,偶尔只想简单的更新一篇博客的人~

第 1 条附言 · 2016-10-14 12:44:14 +08:00

v1.1 修复了 HTTPS 访问,无法获取用户名的 BUG

第 2 条附言 · 2016-10-15 00:15:34 +08:00

v1.2 支持响应式布局

70 条回复 • 2016-10-19 18:56:12 +08:00

mzlogin

2016-10-14 08:12:11 +08:00 via Android

评论的实现好创意~👍👍👍

imxieke

2016-10-14 09:02:52 +08:00

楼主坐标合肥哪里？我在大蜀山

a302800411

2016-10-14 09:11:24 +08:00

@mzlogin 哈哈,我也觉得自己机智

a302800411

2016-10-14 09:11:54 +08:00

@imxieke 白天的话,大蜀山西边两公里

imxieke

2016-10-14 09:18:04 +08:00 via Android

@a302800411 啥意思？咋还白天？在高新区这边上班？

a302800411

2016-10-14 09:20:46 +08:00

@imxieke 大四,还在实习

imxieke

2016-10-14 09:23:18 +08:00

哦哦酱紫可以留个联系方式不？

fyibmsd

2016-10-14 09:28:17 +08:00

每次评论都要输一次账密？

a302800411

2016-10-14 09:33:30 +08:00

@fyibmsd 保存我倒是有办法,但是其它*.github.io 下的域名也能访问,我下个版本增加一个记住密码的复选框吧

a302800411

2016-10-14 09:34:03 +08:00

@imxieke telegram: hqyang

virusdefender

2016-10-14 09:50:59 +08:00

国外有类似的，类似多说，但是是保存到你的 github 仓库的。不记得名字了

a302800411

2016-10-14 09:55:55 +08:00

@virusdefender 怎么实现的?总不能把自己的账户密码保存到 js 里吧......

virusdefender

2016-10-14 09:57:23 +08:00

@a302800411 是你先 oauth 授权那个网站，然后网站以你的名义更新 github 。不需要评论的人登陆。

a302800411

2016-10-14 10:05:56 +08:00

@virusdefender 哦哦,是一个思路,但是那样还是需要除了 Github 以外的服务器才行

levie

2016-10-14 10:38:33 +08:00

只需要 push md 就可以发表文章，等这种很久了……
就是样式有点过于简陋了，希望能美化一下 >_<

a302800411

2016-10-14 10:44:01 +08:00

@levie 嗯嗯下个版本先把响应式布局给搞了,然后做一个漂亮一点的主题..

virusdefender

2016-10-14 10:46:30 +08:00

@a302800411 是的~

yhxx

2016-10-14 10:59:48 +08:00

这个评论厉害了 word 哥

ooTwToo

2016-10-14 11:07:39 +08:00

评论思路赞，只是一堆 issue 有点....

[我用 Vue 写了一个 gh-pages]( https://github.com/x-pengg/vue-gh-pages)

a302800411

2016-10-14 11:13:41 +08:00

@ooTwToo 赞 ,正常情况下,一篇 Blog 只对应一个 Issue,不算特别多吧

inoris

2016-10-14 11:19:08 +08:00

做过一个类似的东西，用 GitHub issues 存储的作业列表： http://kyouko.net/homework

hanxiV2EX

2016-10-14 11:28:44 +08:00 via iPhone

treehole00

2016-10-14 11:38:40 +08:00

赞，想过这个创意，一直在期待有人实现！

ooTwToo

2016-10-14 11:45:00 +08:00 via iPhone

@a302800411 OK ，我理解有误

HmyBmny

2016-10-14 11:52:09 +08:00

我也是用 GitHub Issues 来做评论系统的，可以参观
https://hmybmny.com/2016/06/01/netease-cloud-music/

a302800411

2016-10-14 12:03:00 +08:00 via Android

@HmyBmny 哈哈，我要提取你的时间转换函数，我偷懒了没弄

withlqs

2016-10-14 12:16:54 +08:00

厉害了！赞

HmyBmny

2016-10-14 12:20:22 +08:00

@a302800411 提吧提吧~

viko16

2016-10-14 12:25:00 +08:00

@ooTwToo

https://github.com/viko16/vue-ghpages-blog/tree/vue-1

从名字到思路都很像。。。

cheny95

2016-10-14 12:31:22 +08:00

@a302800411 大蜀山东边 2KM 的 V 友帮顶😬

ooTwToo

2016-10-14 12:36:22 +08:00

@viko16 是的，初学 Vue.js 于是造了个轮子，感谢你的开源~

awthink

2016-10-14 13:08:26 +08:00

棒，这样就优雅多了
我也是这个思路，不过没有去实现，只是简单的加了个 issues 的链接……

est

2016-10-14 13:12:29 +08:00

还需要登录啊。好麻烦。

a302800411

2016-10-14 13:17:54 +08:00 via Android

@est 登录有登录的好，可以自动获取 Github 用户名头像，至于不登录的黑科技，除了把自己的授权信息暴露在 js 里，我想不到不用服务器的办法

SilentDepth

2016-10-14 14:17:43 +08:00

这是变相实现玉伯拿 Issues 当博客的效果嘛 :doge:

a302800411

2016-10-14 14:26:50 +08:00

@SilentDepth 你这倒是提醒我了,我可以把文章存到 issue 里呀...这样我就能获取博客的 created_at 和 updated_at 时间了,我想想...

SilentDepth

2016-10-14 14:32:33 +08:00

@a302800411 于是果然变成 Issues 博客化了，然后打个「 blog 」的 label (笑哭)

a302800411

2016-10-14 14:47:11 +08:00

@SilentDepth 我仔细想了想还是把文章存在 code 里比较好,
因为 issue 的发布并不能通过 git 命令来操作,其次 git 可以查看历史版本.
不过我会尝试在发布的时候,备份一份到 issue 的一楼里,这样我可以获取 Blog 的日期
(用 py 脚本来做 ? 应该机器里有 git 命令的都能执行 Python 吧)
其他的好处就是,Github 的 MD 规范支持不完全,我现在使用的 markdown-js 插件对 MD 的支持就好很多.后面的版本可以实现评论的楼中楼功能.

SilentDepth

2016-10-14 14:53:06 +08:00

@a302800411
貌似 git 和 python 没什么关系吧，比如说 Windows 上？
如果只是要获取 blog 的日期，提交一个包含文章链接的 issue 就好了，备份文章内容到 issue 里似乎没什么意义。如有必要，再加点其他的标记数据什么的（怎么又有点像马克飞象了？）

luili

2016-10-14 14:54:12 +08:00

赞啊如果能在 coding.net 使用也很棒

a302800411

2016-10-14 15:02:37 +08:00

@luili coding.net 的 api 我简单看了一下,貌似只提供 OAUTH 授权哎不是很好迁移

a302800411

2016-10-14 15:07:30 +08:00

@SilentDepth 你看我现在的步骤是写好文章 push 就好了.
如果我想在 push 的同时新建 issue 的话,issue 的内容不重要,关键是新建这个步骤.
用 git 命令是肯定不行了,只能用官网的 api,
那最好的办法就是写好文章后执行运行一条 python 脚本来实现.
因为会用 git 的都是程序员,Mac 和 Linux 都自带 Python,Win 的话麻烦一些

zwhu

2016-10-14 15:07:43 +08:00

如果是做前端的话，还是早点离开合肥吧，不适合个人发展

SilentDepth

2016-10-14 15:21:30 +08:00

@a302800411
哦，刚才没细想这事儿。话说 commit 操作有 fix issue 的 hook ，但没有 new issue 的 hook ，想来 GitHub 也没想过 Issues 系统会被这么玩儿吧 2333
不了解 GitHub API 。 Windows 集成的资源少一些，打个运行时进去呢？好像又太大了……虽说下一个 Python 并不费事，但是好像越来越多的非程序员（至少不是职业程序员）也选择了在 GitHub Pages 建博客呢。当然我这有点吹毛求疵的意味啦。看好你的项目～

a302800411

2016-10-14 15:22:26 +08:00

@zwhu 我在合肥上学...应届生...这是第一次写前端...主力做安卓的...目标是全栈...

a302800411

2016-10-14 15:24:47 +08:00

@SilentDepth 非程序员...我直接写个 chrome 扩展..还支持 Markdown 实时预览...更简单..不过这和其它静态博客生成工具就没差了....别人在电脑上用 npm 装...我在 chrome 商店装...

wuling

2016-10-14 15:38:50 +08:00

楼主把 github 的 README 文件重命名为 README.md 吧，写成 markdown 又不存成.md 文件， github 不会解析的看着好难受

a302800411

2016-10-14 15:50:03 +08:00

@wuling 好啦..thx 提醒

zwhu

2016-10-14 16:07:20 +08:00

@a302800411

我之前也在合肥上学，还好离开的早，合肥基本没什么太好的前端发展环境

cosven

2016-10-14 16:16:44 +08:00

楼主要不要考虑直接 Issue 做成 Github Pages 。

a302800411

2016-10-14 16:17:59 +08:00

@cosven 前面有人提了....可惜 Issue 不支持 push,而且不能版本控制

a570295535

2016-10-14 16:23:02 +08:00

期待成熟的正式版发布。。。

tomato3

2016-10-14 17:09:38 +08:00

黑科技

viko16

2016-10-14 17:26:02 +08:00

@cosven 搜索了一下，似乎有不少

https://github.com/0x00A/blog
https://github.com/wuhaoworld/github-issues-blog

doubleflower

2016-10-14 17:54:30 +08:00

评论需要用户名密码这点不合理，谁会为加个评论把自已的用户密码交出来？

yiqiok

2016-10-14 19:01:51 +08:00

cool

jswh

2016-10-14 23:04:03 +08:00

我做过类似的东西， https://github.com/jswh/MDBlog ，但是后来烂尾了，因为始终没办法获取文档的创建时间，没法做排序，就懒得做了。

jswh

2016-10-14 23:10:18 +08:00

@a302800411 这样搞的话最后还是需要用到别的语言，那纯静态的 blog 的意义就少了一大半。我现在用 pelican ，自己写了两个脚本一个 setup 只在初始化的时候用，一个 publish ，在每次写完文章之后用。把 publish 绑定到提交动作那整个流程就一样了，唯一的区别只是 fork 完 clone 到本地之后，要 setup 一次，同样需要 python 环境。

https://github.com/jswh/jswh.github.io
readme 还是以前 setup 要手动安装的时候

a302800411

2016-10-14 23:10:41 +08:00

@jswh 现在排序有两个思路,要么是上传的时候,文件命名为 "001#title.md",
要么通过脚本在上传同时创建一个 issue,issue 可以获取时间.

a302800411

2016-10-14 23:14:02 +08:00

@jswh 不用其他语言,纯静态也有办法,写一个 editor.html ,所有都可以用 js 来完成,提交的时候需要输入帐号密码

jswh

2016-10-14 23:21:38 +08:00

@a302800411 另外，我之前考虑的过的时间实现思路就和普通的生成器一样。反正最后的渲染可以在前端做，直接要求在写文章的时候第一样写时间，或者文档的标题上加上时间信息。不过不管怎样都是在增加书写的负担，距离只要写文章不要其他的理想还是很远。最后丧气，烂尾。

评论其实完全可以用多说插件的，用文档标题的 hash 做 key 就好了。

最近 github 在搞自己的 graphql ，不过现在获取的内容比较简陋，持续观望中，希望到时候如果能获取足够丰富的内容

a302800411

2016-10-14 23:27:49 +08:00

@jswh 我觉得吧...不如发邮件给 Github 提醒他们 api 上加上时间.
做着玩的东西,纯属练手

jswh

2016-10-14 23:30:13 +08:00

@a302800411 有道理 🤔

wsph123

2016-10-15 02:19:07 +08:00

好棒！评论好厉害

xinpure

2016-10-15 02:49:58 +08:00 via iPhone

赞评论

JimmyCai

2016-10-15 03:27:00 +08:00 via Android

staticman.net
用 GitHub 仓库来保存评论，无需登录。

msg7086

2016-10-15 03:28:09 +08:00

Github Issue As A Database Service ，简称 GIAADS 。

Dynalist

2016-10-15 04:53:04 +08:00

存 comments 的方式很有意思。

不过 Jekyll 的 hosting GitHub 是自带的，所以其实不需要安装和 setup 任何东西啊。而且编辑可以直接用 GitHub 的编辑器。

比如我们的 Help Center 每一页都有一个 "Improve this page on GitHub" 的链接，我点就可以直接进去改，别人也可以 fork 来做贡献（改错字什么的）。

Jestom

2016-10-16 03:27:04 +08:00 via Android

竟然不用插件做到评论

davidkingzyb

2016-10-19 18:56:12 +08:00

记得有个 staticman 是干这个的？