Home Sign Up Sign In
爱意满满的作品展示区。
Advertisement
SkyEcho

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

  •  5      
  •   SkyEcho · Oct 14, 2016 · 13080 views
    This topic created in 3677 days ago, the information mentioned may be changed or developed.

    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

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

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

    [我用 Vue 写了一个 gh-pages]( https://github.com/x-pengg/vue-gh-pages)
    SkyEcho
    SkyEcho
    OP
    Oct 14, 2016
    20
    @ooTwToo 赞 ,正常情况下,一篇 Blog 只对应一个 Issue,不算特别多吧
    inoris
    inoris
    Oct 14, 2016
    21
    做过一个类似的东西，用 GitHub issues 存储的作业列表： http://kyouko.net/homework
    hanxiV2EX
    hanxiV2EX
    Oct 14, 2016 via iPhone
    22
    赞
    treehole00
    treehole00
    Oct 14, 2016
    23
    赞，想过这个创意，一直在期待有人实现！
    ooTwToo
    ooTwToo
    Oct 14, 2016 via iPhone
    24
    @a302800411 OK ，我理解有误
    HmyBmny
    HmyBmny
    Oct 14, 2016
    25
    我也是用 GitHub Issues 来做评论系统的，可以参观
    https://hmybmny.com/2016/06/01/netease-cloud-music/
    SkyEcho
    SkyEcho
    OP
    Oct 14, 2016 via Android
    26
    @HmyBmny 哈哈，我要提取你的时间转换函数，我偷懒了没弄
    withlqs
    withlqs
    Oct 14, 2016
    27
    厉害了！赞
    HmyBmny
    HmyBmny
    Oct 14, 2016
    28
    @a302800411 提吧提吧~
    viko16
    viko16
    Oct 14, 2016
    29
    @ooTwToo

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

    从名字到思路都很像。。。
    cheny95
    cheny95
    Oct 14, 2016
    30
    @a302800411 大蜀山东边 2KM 的 V 友帮顶😬
    ooTwToo
    ooTwToo
    Oct 14, 2016
    31
    @viko16 是的，初学 Vue.js 于是造了个轮子，感谢你的开源~
    awthink
    awthink
    Oct 14, 2016
    32
    棒，这样就优雅多了
    我也是这个思路，不过没有去实现，只是简单的加了个 issues 的链接……
    est
    est
    Oct 14, 2016
    33
    还需要登录啊。好麻烦。
    SkyEcho
    SkyEcho
    OP
    Oct 14, 2016 via Android
    34
    @est 登录有登录的好，可以自动获取 Github 用户名头像，至于不登录的黑科技，除了把自己的授权信息暴露在 js 里，我想不到不用服务器的办法
    SilentDepth
    SilentDepth
    Oct 14, 2016
    35
    这是变相实现玉伯拿 Issues 当博客的效果嘛 :doge:
    SkyEcho
    SkyEcho
    OP
    Oct 14, 2016
    36
    @SilentDepth 你这倒是提醒我了,我可以把文章存到 issue 里呀...这样我就能获取博客的 created_at 和 updated_at 时间了,我想想...
    SilentDepth
    SilentDepth
    Oct 14, 2016
    37
    @a302800411 于是果然变成 Issues 博客化了，然后打个「 blog 」的 label (笑哭)
    SkyEcho
    SkyEcho
    OP
    Oct 14, 2016
    38
    @SilentDepth 我仔细想了想还是把文章存在 code 里比较好,
    因为 issue 的发布并不能通过 git 命令来操作,其次 git 可以查看历史版本.
    不过我会尝试在发布的时候,备份一份到 issue 的一楼里,这样我可以获取 Blog 的日期
    (用 py 脚本来做 ? 应该机器里有 git 命令的都能执行 Python 吧)
    其他的好处就是,Github 的 MD 规范支持不完全,我现在使用的 markdown-js 插件对 MD 的支持就好很多.后面的版本可以实现评论的楼中楼功能.
    SilentDepth
    SilentDepth
    Oct 14, 2016
    39
    @a302800411
    貌似 git 和 python 没什么关系吧，比如说 Windows 上？
    如果只是要获取 blog 的日期，提交一个包含文章链接的 issue 就好了，备份文章内容到 issue 里似乎没什么意义。如有必要，再加点其他的标记数据什么的（怎么又有点像马克飞象了？）
    luili
    luili
    Oct 14, 2016
    40
    赞啊 如果能在 coding.net 使用也很棒
    SkyEcho
    SkyEcho
    OP
    Oct 14, 2016
    41
    @luili coding.net 的 api 我简单看了一下,貌似只提供 OAUTH 授权哎 不是很好迁移
    SkyEcho
    SkyEcho
    OP
    Oct 14, 2016
    42
    @SilentDepth 你看我现在的步骤是写好文章 push 就好了.
    如果我想在 push 的同时新建 issue 的话,issue 的内容不重要,关键是新建这个步骤.
    用 git 命令是肯定不行了,只能用官网的 api,
    那最好的办法就是写好文章后执行运行一条 python 脚本来实现.
    因为会用 git 的都是程序员,Mac 和 Linux 都自带 Python,Win 的话麻烦一些
    zwhu
    zwhu
    Oct 14, 2016
    43
    如果是做前端的话，还是早点离开合肥吧，不适合个人发展
    SilentDepth
    SilentDepth
    Oct 14, 2016
    44
    @a302800411
    哦，刚才没细想这事儿。话说 commit 操作有 fix issue 的 hook ，但没有 new issue 的 hook ，想来 GitHub 也没想过 Issues 系统会被这么玩儿吧 2333
    不了解 GitHub API 。 Windows 集成的资源少一些，打个运行时进去呢？好像又太大了……虽说下一个 Python 并不费事，但是好像越来越多的非程序员（至少不是职业程序员）也选择了在 GitHub Pages 建博客呢。当然我这有点吹毛求疵的意味啦。看好你的项目～
    SkyEcho
    SkyEcho
    OP
    Oct 14, 2016
    45
    @zwhu 我在合肥上学...应届生...这是第一次写前端...主力做安卓的...目标是全栈...
    SkyEcho
    SkyEcho
    OP
    Oct 14, 2016
    46
    @SilentDepth 非程序员...我直接写个 chrome 扩展..还支持 Markdown 实时预览...更简单..不过这和其它静态博客生成工具就没差了....别人在电脑上用 npm 装...我在 chrome 商店装...
    wuling
    wuling
    Oct 14, 2016
    47
    楼主把 github 的 README 文件重命名为 README.md 吧，写成 markdown 又不存成.md 文件， github 不会解析的看着好难受
    SkyEcho
    SkyEcho
    OP
    Oct 14, 2016
    48
    @wuling 好啦..thx 提醒
    zwhu
    zwhu
    Oct 14, 2016
    49
    @a302800411

    我之前也在合肥上学，还好离开的早，合肥基本没什么太好的前端发展环境
    cosven
    cosven
    Oct 14, 2016
    50
    楼主要不要考虑直接 Issue 做成 Github Pages 。
    SkyEcho
    SkyEcho
    OP
    Oct 14, 2016
    51
    @cosven 前面有人提了....可惜 Issue 不支持 push,而且不能版本控制
    a570295535
    a570295535
    Oct 14, 2016
    52
    期待成熟的正式版发布。。。
    tomato3
    tomato3
    Oct 14, 2016
    53
    黑科技
    doubleflower
    doubleflower
    Oct 14, 2016
    55
    评论需要用户名密码这点不合理，谁会为加个评论把自已的用户密码交出来？
    yiqiok
    yiqiok
    Oct 14, 2016
    56
    cool
    jswh
    jswh
    Oct 14, 2016
    57
    我做过类似的东西， https://github.com/jswh/MDBlog ，但是后来烂尾了，因为始终没办法获取文档的创建时间，没法做排序，就懒得做了。
    jswh
    jswh
    Oct 14, 2016
    58
    @a302800411 这样搞的话最后还是需要用到别的语言，那纯静态的 blog 的意义就少了一大半。我现在用 pelican ，自己写了两个脚本一个 setup 只在初始化的时候用，一个 publish ，在每次写完文章之后用。把 publish 绑定到提交动作那整个流程就一样了，唯一的区别只是 fork 完 clone 到本地之后，要 setup 一次，同样需要 python 环境。

    https://github.com/jswh/jswh.github.io
    readme 还是以前 setup 要手动安装的时候
    SkyEcho
    SkyEcho
    OP
    Oct 14, 2016
    59
    @jswh 现在排序有两个思路,要么是上传的时候,文件命名为 "001#title.md",
    要么通过脚本在上传同时创建一个 issue,issue 可以获取时间.
    SkyEcho
    SkyEcho
    OP
    Oct 14, 2016
    60
    @jswh 不用其他语言,纯静态也有办法,写一个 editor.html ,所有都可以用 js 来完成,提交的时候需要输入帐号密码
    jswh
    jswh
    Oct 14, 2016
    61
    @a302800411 另外，我之前考虑的过的时间实现思路就和普通的生成器一样。反正最后的渲染可以在前端做，直接要求在写文章的时候第一样写时间，或者文档的标题上加上时间信息。不过不管怎样都是在增加书写的负担，距离只要写文章不要其他的理想还是很远。最后丧气，烂尾。

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

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

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

    比如我们的 Help Center 每一页都有一个 "Improve this page on GitHub" 的链接，我点就可以直接进去改，别人也可以 fork 来做贡献（改错字什么的）。
    YV4usGtvaOIAeXIa
    YV4usGtvaOIAeXIa
    Oct 16, 2016 via Android
    69
    竟然不用插件做到评论
    davidkingzyb
    davidkingzyb
    Oct 19, 2016
    70
    记得有个 staticman 是干这个的？
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   1548 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 79ms · UTC 07:31 · PVG 15:31 · LAX 23:31 · JFK 02:31
    ♥ Do have faith in what you're doing.