V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
a302800411
V2EX  ›  分享创造

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

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

    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
    楼主坐标合肥哪里? 我在大蜀山
    a302800411
        3
    a302800411  
    OP
       2016-10-14 09:11:24 +08:00
    @mzlogin 哈哈,我也觉得自己机智
    a302800411
        4
    a302800411  
    OP
       2016-10-14 09:11:54 +08:00
    @imxieke 白天的话,大蜀山西边两公里
    imxieke
        5
    imxieke  
       2016-10-14 09:18:04 +08:00 via Android
    @a302800411 啥意思? 咋还白天? 在高新区这边上班?
    a302800411
        6
    a302800411  
    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
    每次评论都要输一次账密?
    a302800411
        9
    a302800411  
    OP
       2016-10-14 09:33:30 +08:00
    @fyibmsd 保存我倒是有办法,但是其它*.github.io 下的域名也能访问,我下个版本增加一个记住密码的复选框吧
    a302800411
        10
    a302800411  
    OP
       2016-10-14 09:34:03 +08:00
    @imxieke telegram: hqyang
    virusdefender
        11
    virusdefender  
       2016-10-14 09:50:59 +08:00
    国外有类似的,类似多说,但是是保存到你的 github 仓库的。不记得名字了
    a302800411
        12
    a302800411  
    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 。不需要评论的人登陆。
    a302800411
        14
    a302800411  
    OP
       2016-10-14 10:05:56 +08:00
    @virusdefender 哦哦,是一个思路,但是那样还是需要除了 Github 以外的服务器才行
    levie
        15
    levie  
       2016-10-14 10:38:33 +08:00
    只需要 push md 就可以发表文章,等这种很久了……
    就是样式有点过于简陋了,希望能美化一下 >_<
    a302800411
        16
    a302800411  
    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)
    a302800411
        20
    a302800411  
    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/
    a302800411
        26
    a302800411  
    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
    还需要登录啊。好麻烦。
    a302800411
        34
    a302800411  
    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:
    a302800411
        36
    a302800411  
    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 (笑哭)
    a302800411
        38
    a302800411  
    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 使用也很棒
    a302800411
        41
    a302800411  
    OP
       2016-10-14 15:02:37 +08:00
    @luili coding.net 的 api 我简单看了一下,貌似只提供 OAUTH 授权哎 不是很好迁移
    a302800411
        42
    a302800411  
    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 建博客呢。当然我这有点吹毛求疵的意味啦。看好你的项目~
    a302800411
        45
    a302800411  
    OP
       2016-10-14 15:22:26 +08:00
    @zwhu 我在合肥上学...应届生...这是第一次写前端...主力做安卓的...目标是全栈...
    a302800411
        46
    a302800411  
    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 不会解析的看着好难受
    a302800411
        48
    a302800411  
    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 。
    a302800411
        51
    a302800411  
    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 要手动安装的时候
    a302800411
        59
    a302800411  
    OP
       2016-10-14 23:10:41 +08:00
    @jswh 现在排序有两个思路,要么是上传的时候,文件命名为 "001#title.md",
    要么通过脚本在上传同时创建一个 issue,issue 可以获取时间.
    a302800411
        60
    a302800411  
    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 ,不过现在获取的内容比较简陋,持续观望中,希望到时候如果能获取足够丰富的内容
    a302800411
        62
    a302800411  
    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 来做贡献(改错字什么的)。
    Jestom
        69
    Jestom  
       2016-10-16 03:27:04 +08:00 via Android
    竟然不用插件做到评论
    davidkingzyb
        70
    davidkingzyb  
       2016-10-19 18:56:12 +08:00
    记得有个 staticman 是干这个的?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3177 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 46ms · UTC 00:39 · PVG 08:39 · LAX 16:39 · JFK 19:39
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.