写了一个极简 Github Page,黑科技,不用第三方插件支持评论. - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
SkyEcho
V2EX    分享创造

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

  •  5
     
  •   SkyEcho 2016-10-14 00:55:11 +08:00 12211 次点击
    这是一个创建于 3296 天前的主题,其中的信息可能已经有所发展或是发生改变。

    TinyBlog 有什么特性

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

    为什么要写 TinyBlog

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

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

    Demo 地址

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

    TinyBlog 教程

    1. TinyBlog 的 Github 主页fork 一份到你的仓库,更改项目名称为your_name.github.io,几分钟后 Github 会自动为你开通your_name.github.io的个人主页

    2. 修改aboutme.md文件作为你的个人介绍,为了更快的加载速度,也可以选择写死在index.html

    3. 写好 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
        1
    mzlogin  
       2016-10-14 08:12:11 +08:00 via Android
    评论的实现好创意~
    imxieke
        2
    imxieke  
       2016-10-14 09:02:52 +08:00
    楼主坐标合肥哪里? 我在大蜀山
    SkyEcho
        3
    SkyEcho  
    OP
       2016-10-14 09:11:24 +08:00
    @mzlogin 哈哈,我也觉得自己机智
    SkyEcho
        4
    SkyEcho  
    OP
       2016-10-14 09:11:54 +08:00
    @imxieke 白天的话,大蜀山西边两公里
    imxieke
        5
    imxieke  
       2016-10-14 09:18:04 +08:00 via Android
    @a302800411 啥意思? 咋还白天? 在高新区这边上班?
    SkyEcho
        6
    SkyEcho  
    OP
       2016-10-14 09:20:46 +08:00
    @imxieke 大四,还在实习
    imxieke
        7
    imxieke  
       2016-10-14 09:23:18 +08:00
    哦哦 酱紫 可以留个联系方式不?
    fyibmsd
        8
    fyibmsd  
       2016-10-14 09:28:17 +08:00
    每次评论都要输一次账密?
    SkyEcho
        9
    SkyEcho  
    OP
       2016-10-14 09:33:30 +08:00
    @fyibmsd 保存我倒是有办法,但是其它*.github.io 下的域名也能访问,我下个版本增加一个记住密码的复选框吧
    SkyEcho
        10
    SkyEcho  
    OP
       2016-10-14 09:34:03 +08:00
    @imxieke telegram: hqyang
    virusdefender
        11
    virusdefender  
       2016-10-14 09:50:59 +08:00
    国外有类似的,类似多说,但是是保存到你的 github 仓库的。不记得名字了
    SkyEcho
        12
    SkyEcho  
    OP
       2016-10-14 09:55:55 +08:00
    @virusdefender 怎么实现的?总不能把自己的账户密码保存到 js 里吧......
    virusdefender
        13
    virusdefender  
       2016-10-14 09:57:23 +08:00   1
    @a302800411 是你先 oauth 授权那个网站,然后网站以你的名义更新 github 。不需要评论的人登陆。
    SkyEcho
        14
    SkyEcho  
    OP
       2016-10-14 10:05:56 +08:00
    @virusdefender 哦哦,是一个思路,但是那样还是需要除了 Github 以外的服务器才行
    levie
        15
    levie  
       2016-10-14 10:38:33 +08:00
    只需要 push md 就可以发表文章,等这种很久了……
    就是样式有点过于简陋了,希望能美化一下 >_<
    SkyEcho
        16
    SkyEcho  
    OP
       2016-10-14 10:44:01 +08:00
    @levie 嗯嗯 下个版本先把响应式布局给搞了,然后做一个漂亮一点的主题..
    virusdefender
        17
    virusdefender  
       2016-10-14 10:46:30 +08:00
    @a302800411 是的~
    yhxx
        18
    yhxx  
       2016-10-14 10:59:48 +08:00
    这个评论厉害了 word 哥
    ooTwToo
        19
    ooTwToo  
       2016-10-14 11:07:39 +08:00
    评论思路赞,只是一堆 issue 有点....

    [我用 Vue 写了一个 gh-pages]( https://github.com/x-pengg/vue-gh-pages)
    SkyEcho
        20
    SkyEcho  
    OP
       2016-10-14 11:13:41 +08:00
    @ooTwToo 赞,正常情况下,一篇 Blog 只对应一个 Issue,不算特别多吧
    inoris
        21
    inoris  
       2016-10-14 11:19:08 +08:00
    做过一个类似的东西,用 GitHub issues 存储的作业列表: http://kyouko.net/homework
    hanxiV2EX
        22
    hanxiV2EX  
       2016-10-14 11:28:44 +08:00 via iPhone
    treehole00
        23
    treehole00  
       2016-10-14 11:38:40 +08:00
    赞,想过这个创意,一直在期待有人实现!
    ooTwToo
        24
    ooTwToo  
       2016-10-14 11:45:00 +08:00 via iPhone
    @a302800411 OK ,我理解有误
    HmyBmny
        25
    HmyBmny  
       2016-10-14 11:52:09 +08:00
    我也是用 GitHub Issues 来做评论系统的,可以参观
    https://hmybmny.com/2016/06/01/netease-cloud-music/
    SkyEcho
        26
    SkyEcho  
    OP
       2016-10-14 12:03:00 +08:00 via Android
    @HmyBmny 哈哈,我要提取你的时间转换函数,我偷懒了没弄
    withlqs
        27
    withlqs  
       2016-10-14 12:16:54 +08:00
    厉害了!赞
    HmyBmny
        28
    HmyBmny  
       2016-10-14 12:20:22 +08:00
    @a302800411 提吧提吧~
    viko16
        29
    viko16  
       2016-10-14 12:25:00 +08:00
    cheny95
        30
    cheny95  
       2016-10-14 12:31:22 +08:00
    @a302800411 大蜀山东边 2KM 的 V 友帮顶
    ooTwToo
        31
    ooTwToo  
       2016-10-14 12:36:22 +08:00
    @viko16 是的,初学 Vue.js 于是造了个轮子,感谢你的开源~
    awthink
        32
    awthink  
       2016-10-14 13:08:26 +08:00
    棒,这样就优雅多了
    我也是这个思路,不过没有去实现,只是简单的加了个 issues 的链接……
    est
        33
    est  
       2016-10-14 13:12:29 +08:00
    还需要登录啊。好麻烦。
    SkyEcho
        34
    SkyEcho  
    OP
       2016-10-14 13:17:54 +08:00 via Android
    @est 登录有登录的好,可以自动获取 Github 用户名头像,至于不登录的黑科技,除了把自己的授权信息暴露在 js 里,我想不到不用服务器的办法
    SilentDepth
        35
    SilentDepth  
       2016-10-14 14:17:43 +08:00
    这是变相实现玉伯拿 Issues 当博客的效果嘛 :doge:
    SkyEcho
        36
    SkyEcho  
    OP
       2016-10-14 14:26:50 +08:00
    @SilentDepth 你这倒是提醒我了,我可以把文章存到 issue 里呀...这样我就能获取博客的 created_at 和 updated_at 时间了,我想想...
    SilentDepth
        37
    SilentDepth  
       2016-10-14 14:32:33 +08:00
    @a302800411 于是果然变成 Issues 博客化了,然后打个「 blog 」的 label (笑哭)
    SkyEcho
        38
    SkyEcho  
    OP
       2016-10-14 14:47:11 +08:00
    @SilentDepth 我仔细想了想还是把文章存在 code 里比较好,
    因为 issue 的发布并不能通过 git 命令来操作,其次 git 可以查看历史版本.
    不过我会尝试在发布的时候,备份一份到 issue 的一楼里,这样我可以获取 Blog 的日期
    (用 py 脚本来做 ? 应该机器里有 git 命令的都能执行 Python 吧)
    其他的好处就是,Github 的 MD 规范支持不完全,我现在使用的 markdown-js 插件对 MD 的支持就好很多.后面的版本可以实现评论的楼中楼功能.
    SilentDepth
        39
    SilentDepth  
       2016-10-14 14:53:06 +08:00
    @a302800411
    貌似 git 和 python 没什么关系吧,比如说 Windows 上?
    如果只是要获取 blog 的日期,提交一个包含文章链接的 issue 就好了,备份文章内容到 issue 里似乎没什么意义。如有必要,再加点其他的标记数据什么的(怎么又有点像马克飞象了?)
    luili
        40
    luili  
       2016-10-14 14:54:12 +08:00
    赞啊 如果能在 coding.net 使用也很棒
    SkyEcho
        41
    SkyEcho  
    OP
       2016-10-14 15:02:37 +08:00
    @luili coding.net 的 api 我简单看了一下,貌似只提供 OAUTH 授权哎 不是很好迁移
    SkyEcho
        42
    SkyEcho  
    OP
       2016-10-14 15:07:30 +08:00
    @SilentDepth 你看我现在的步骤是写好文章 push 就好了.
    如果我想在 push 的同时新建 issue 的话,issue 的内容不重要,关键是新建这个步骤.
    用 git 命令是肯定不行了,只能用官网的 api,
    那最好的办法就是写好文章后执行运行一条 python 脚本来实现.
    因为会用 git 的都是程序员,Mac 和 Linux 都自带 Python,Win 的话麻烦一些
    zwhu
        43
    zwhu  
       2016-10-14 15:07:43 +08:00
    如果是做前端的话,还是早点离开合肥吧,不适合个人发展
    SilentDepth
        44
    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 建博客呢。当然我这有点吹毛求疵的意味啦。看好你的项目~
    SkyEcho
        45
    SkyEcho  
    OP
       2016-10-14 15:22:26 +08:00
    @zwhu 我在合肥上学...应届生...这是第一次写前端...主力做安卓的...目标是全栈...
    SkyEcho
        46
    SkyEcho  
    OP
       2016-10-14 15:24:47 +08:00
    @SilentDepth 非程序员...我直接写个 chrome 扩展..还支持 Markdown 实时预览...更简单..不过这和其它静态博客生成工具就没差了....别人在电脑上用 npm 装...我在 chrome 商店装...
    wuling
        47
    wuling  
       2016-10-14 15:38:50 +08:00
    楼主把 github 的 README 文件重命名为 README.md 吧,写成 markdown 又不存成.md 文件, github 不会解析的看着好难受
    SkyEcho
        48
    SkyEcho  
    OP
       2016-10-14 15:50:03 +08:00
    @wuling 好啦..thx 提醒
    zwhu
        49
    zwhu  
       2016-10-14 16:07:20 +08:00
    @a302800411

    我之前也在合肥上学,还好离开的早,合肥基本没什么太好的前端发展环境
    cosven
        50
    cosven  
       2016-10-14 16:16:44 +08:00
    楼主要不要考虑直接 Issue 做成 Github Pages 。
    SkyEcho
        51
    SkyEcho  
    OP
       2016-10-14 16:17:59 +08:00
    @cosven 前面有人提了....可惜 Issue 不支持 push,而且不能版本控制
    a570295535
        52
    a570295535  
       2016-10-14 16:23:02 +08:00
    期待成熟的正式版发布。。。
    tomato3
        53
    tomato3  
       2016-10-14 17:09:38 +08:00
    黑科技
    viko16
        54
    viko16  
       2016-10-14 17:26:02 +08:00
    doubleflower
        55
    doubleflower  
       2016-10-14 17:54:30 +08:00
    评论需要用户名密码这点不合理,谁会为加个评论把自已的用户密码交出来?
    yiqiok
        56
    yiqiok  
       2016-10-14 19:01:51 +08:00
    cool
    jswh
        57
    jswh  
       2016-10-14 23:04:03 +08:00
    我做过类似的东西, https://github.com/jswh/MDBlog ,但是后来烂尾了,因为始终没办法获取文档的创建时间,没法做排序,就懒得做了。
    jswh
        58
    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 要手动安装的时候
    SkyEcho
        59
    SkyEcho  
    OP
       2016-10-14 23:10:41 +08:00
    @jswh 现在排序有两个思路,要么是上传的时候,文件命名为 "001#title.md",
    要么通过脚本在上传同时创建一个 issue,issue 可以获取时间.
    SkyEcho
        60
    SkyEcho  
    OP
       2016-10-14 23:14:02 +08:00
    @jswh 不用其他语言,纯静态也有办法,写一个 editor.html ,所有都可以用 js 来完成,提交的时候需要输入帐号密码
    jswh
        61
    jswh  
       2016-10-14 23:21:38 +08:00
    @a302800411 另外,我之前考虑的过的时间实现思路就和普通的生成器一样。反正最后的渲染可以在前端做,直接要求在写文章的时候第一样写时间,或者文档的标题上加上时间信息。不过不管怎样都是在增加书写的负担,距离只要写文章不要其他的理想还是很远。最后丧气,烂尾。

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

    最近 github 在搞自己的 graphql ,不过现在获取的内容比较简陋,持续观望中,希望到时候如果能获取足够丰富的内容
    SkyEcho
        62
    SkyEcho  
    OP
       2016-10-14 23:27:49 +08:00
    @jswh 我觉得吧...不如发邮件给 Github 提醒他们 api 上加上时间.
    做着玩的东西,纯属练手
    jswh
        63
    jswh  
       2016-10-14 23:30:13 +08:00
    @a302800411 有道理
    wsph123
        64
    wsph123  
       2016-10-15 02:19:07 +08:00
    好棒!评论好厉害
    xinpure
        65
    xinpure  
       2016-10-15 02:49:58 +08:00 via iPhone
    赞评论
    JimmyCai
        66
    JimmyCai  
       2016-10-15 03:27:00 +08:00 via Android
    staticman.net
    用 GitHub 仓库来保存评论,无需登录。
    msg7086
        67
    msg7086  
       2016-10-15 03:28:09 +08:00
    Github Issue As A Database Service ,简称 GIAADS 。
    Dynalist
        68
    Dynalist  
       2016-10-15 04:53:04 +08:00
    存 comments 的方式很有意思。

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

    比如我们的 Help Center 每一页都有一个 "Improve this page on GitHub" 的链接,我点就可以直接进去改,别人也可以 fork 来做贡献(改错字什么的)。
    YV4usGtvaOIAeXIa
        69
    YV4usGtvaOIAeXIa  
       2016-10-16 03:27:04 +08:00 via Android
    竟然不用插件做到评论
    davidkingzyb
        70
    davidkingzyb  
       2016-10-19 18:56:12 +08:00
    记得有个 staticman 是干这个的?
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     1034 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 38ms UTC 19:00 PVG 03:00 LAX 12:00 JFK 15:00
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86