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

✒️「妹 Blog - GitHub Pages 特别版」无需生成器的静态 GitHub 博客!

  •  4
     
  •   wsph123 · 2015-09-14 02:21:07 +08:00 · 8308 次点击
    这是一个创建于 1134 天前的主题,其中的信息可能已经有所发展或是发生改变。

    GitBlog

    这是一个无需生成器的静态 GitHub 博客!

    Git 地址: https://github.com/itorr/itorr.github.io

    GitHub Pages 只能托管静态内容,所以以往搭建在 GitHub 上的博客程序多是通过客户端生成 HTML 之后,再同步到 GitHub Pages 上实现的博客功能。妹 Blog 通过 GitHub HTTP API 实现了无需客户端转义的纯 MarkDown 博客程序。

    1. 相比同类 Github 静态博客更快的展示速度
    2. 更清晰的二次开发方式
    3. 无需跳页的 hash 路由
    4. 8KB 大小

    如何使用 「妹 Blog - GitHub Pages 特别版」

    1. fork 当前分支到个人仓库中,并设置 github.io 域名
    2. 修改 index.html 中的 gitConfig.ssh 地址
    3. 博客搭建完成!

    如何更新文章?

    使用任意 MarkDown 编辑器,在 markdown 目录下新建 .md 格式文档,通过 Git 更新到线上即可。

    如何绑定个性域名?

    修改 CNAME 文件中的域名信息,并将您绑定的域名 通过 cname 的方式指向 您的用户名.github.io

    如何修改博客名称?

    修改 index.html 中的 titleh1 标签内容即可

    这个版本和「妹 Blog 」正式版 什么关系?

    没任何关系!如果对速度要求更高,并且更喜欢折腾的同学可以围观 https://github.com/itorr/imouto

    预览地址

    http://im.front.dog

    Git 地址

    https://github.com/itorr/itorr.github.io

    92 回复  |  直到 2016-03-02 21:27:16 +08:00
        1
    phoenixlzx   2015-09-14 02:55:52 +08:00 via Android
    给肉肉点赞!
    貌似玲奈早先有类似想法的,还一起讨论过,不过大概是个带后台的
        2
    KyoHiroki   2015-09-14 03:19:54 +08:00
    你这么闲,还不快到咱碗里来 ww
        3
    Yamade   2015-09-14 08:15:31 +08:00
    + 1 写的不错哦。一起来健身啊。
        4
    vitovan   2015-09-14 08:30:06 +08:00 via Android
    https://github.com/barryclark/jekyll-now

    跟这个有什么区别?
        5
    wsph123   2015-09-14 08:37:43 +08:00 via iPhone
    @phoenixlzx 谢谢凤凰卷!😆
    @KyoHiroki 别急呀😫😫😫
    @Yamade ww 好呀
    @vitovan Jekyll 必须经过转译生成 HTML 版本并同步到线上才可发布文章,妹特别版只需要同步 md 格式文章即可
        6
    missdeer   2015-09-14 08:59:36 +08:00
    github pages 直接支持 jekyll 的自动生成 html 页面
        7
    vitovan   2015-09-14 09:01:14 +08:00
    @wsph123 我之前用过这个,不用转译,好像是自动的。
        8
    gangsta   2015-09-14 09:03:37 +08:00
    @wsph123 难道我的姿势不对?我一直都是直接 commit 日志.md 文件到 github pages 的
        9
    vitovan   2015-09-14 09:08:30 +08:00
    @gangsta 我也在说这个问题,之前用 jekyll-now 都是直接 commit 日志.md 的。
        10
    wsph123   2015-09-14 09:10:42 +08:00
    @missdeer
    @vitovan 确实是自动转译!
        11
    wsph123   2015-09-14 09:14:19 +08:00
    @gangsta
    @vitovan 妹 Blog 是把这一步转移到了前端完成,前端载入的是 md 格式文档
        12
    vitovan   2015-09-14 09:20:57 +08:00
    @wsph123 前端怎么渲染的
        14
    zhicheng   2015-09-14 09:23:21 +08:00 via Android
    TextArea.com 欢迎大家!
        15
    pynix   2015-09-14 09:23:33 +08:00
    貌似不错的样子。。。
        16
    wsph123   2015-09-14 09:25:48 +08:00
    @vitovan 对的!整个 Blog 全靠这一个 API 实现!
        17
    wsph123   2015-09-14 09:29:09 +08:00
    @zhicheng prpr!
        18
    gongpeione   2015-09-14 09:32:18 +08:00
    流石肉肉菊苣
    API 地址 GET
        19
    wsph123   2015-09-14 09:33:21 +08:00   ♥ 1
    @pynix OwQ
    @gongpeione
    吃我大 API list !
    https://api.github.com
        20
    zhicheng   2015-09-14 09:33:23 +08:00 via Android
    @wsph123 2333
        21
    vitovan   2015-09-14 09:33:43 +08:00
    @wsph123 这个 API 的说明在哪里吖?帮忙放个文档吧?太懒没去找。我一直在后端用的这个:
    https://developer.github.com/v3/markdown/
        22
    wsph123   2015-09-14 09:35:08 +08:00   ♥ 1
    @vitovan MarkDown 生成也走 GitHub 太慢了,于是用的 https://github.com/evilstreak/markdown-js
        23
    jayin   2015-09-14 09:36:18 +08:00   ♥ 1
    我写了一个跟楼主思路差不多的,纯前端,只写 mardown,不用生成静态文件 https://github.com/Jayin/silentor
        24
    vitovan   2015-09-14 09:38:54 +08:00
    @wsph123 多谢。
        25
    yingluck   2015-09-14 10:16:01 +08:00
    /**/GitBlog.listUpdata ({
    "meta": {
    "X-RateLimit-Limit": "60",
    "X-RateLimit-Remaining": "57",
    "X-RateLimit-Reset": "1442200365",
    "X-GitHub-Media-Type": "github.v3",
    "status": 404
    },
    "data": {
    "message": "Not Found",
    "documentation_url": "https://developer.github.com/v3"
    }
    })



    请问这是怎么回事?
        26
    wsph123   2015-09-14 10:18:09 +08:00
    @jayin 好赞!没有搞清楚 index.md 是如何生成的,求教!😥
        27
    wsph123   2015-09-14 10:18:28 +08:00
    @vitovan 客气!
        28
    wsph123   2015-09-14 10:20:06 +08:00
    @yingluck 希望能提供下 github.io 地址,出现这个错误通常是由于:
    index.html 中的 gitConfig.ssh 地址设置出错 或者 项目内文件不完整
        29
    cedared   2015-09-14 10:23:42 +08:00
    围观,点赞, star
        30
    wsph123   2015-09-14 10:26:19 +08:00
    @cedared prprprprprpr !
        31
    yingluck   2015-09-14 10:30:10 +08:00
    @wsph123 好像是我的 repository 里面含有中划线 被转义了

    mingan.org
        32
    yingluck   2015-09-14 10:31:51 +08:00
        33
    yingluck   2015-09-14 10:40:37 +08:00   ♥ 1
        34
    wsph123   2015-09-14 11:05:28 +08:00   ♥ 1
    @yingluck 感谢 bug 提交!现已修复,是一处正则错误
        35
    yingluck   2015-09-14 11:05:49 +08:00
    @wsph123 多谢!
        36
    qgy18   2015-09-14 11:22:45 +08:00 via iPhone   ♥ 1
    在 iPhone 上,访问预览地址详情页,滑动页面不太自然。
    应该是你禁用了系统滚动,然后模拟滚动没实现惯性导致的。
        37
    49   2015-09-14 11:30:50 +08:00 via Android
    你弄了个大新闻,我竟然不造!…
        38
    3214668848   2015-09-14 11:34:31 +08:00
    跟我的想法很像啊 https://github.com/isnowfy/simple 我这个连编辑器都给好了,也是利用 github api 直接在线写 md 生成 html
        39
    learnshare   2015-09-14 11:37:04 +08:00
    哦,我也拿 Angular.js 写了一个,就是拿到 Markdown 渲染为 HTML
        40
    wsph123   2015-09-14 11:38:27 +08:00
    @qgy18 在 IOS 上伪造一个页内滚动条成本太高了、拖动时还是会出 bug ,调整了一下布局、避开了这个问题>_<! 感谢 qgy18 >3<
        41
    wsph123   2015-09-14 11:39:36 +08:00
    @49 昨天凌晨翻到 API 立刻写出来的 OAQ
        42
    wsph123   2015-09-14 11:39:58 +08:00
    @3214668848 怎么做到的在线写 md !!!这个好溜!!
        43
    wsph123   2015-09-14 11:40:10 +08:00
    @learnshare 是么!
        44
    plqws   2015-09-14 11:52:05 +08:00
    好棒,兹瓷一下
        45
    wsph123   2015-09-14 11:54:19 +08:00
    @plqws 射射!
        46
    tcdw   2015-09-14 12:55:27 +08:00 via Android
    这个很好,可以节省大量时间。
        47
    sox   2015-09-14 13:11:38 +08:00
    直接请求 GitHub API 是有 Rate Limit 的。
        48
    3214668848   2015-09-14 13:45:28 +08:00
    @wsph123 js 实时渲染 md ,保存的时候用 github api 保存到 repo 里就好了呢
        49
    wsph123   2015-09-14 13:50:44 +08:00
    @tcdw OwQ
    @sox 感谢提醒!这就提供翻页
        50
    wsph123   2015-09-14 13:52:22 +08:00
    @3214668848 这个是如何实现的呢?
        51
    sox   2015-09-14 13:55:33 +08:00
    @3214668848 不差那几十毫秒。。
    @wsph123 我觉得你回复错人了。。
        52
    wsph123   2015-09-14 13:58:19 +08:00
    @sox 阿勒!! Rate Limit 我还以为是翻页用的 OAQ 访问限制的话是针对每个访客的吧?如果是真多 git 仓库的话这有点忧伤呀
        53
    sox   2015-09-14 14:03:56 +08:00
    @wsph123 每个访客访问 api.github.com 每小时请求限制是 60 次 233

    不过似乎可以用这个 https://github.com/settings/tokens/new 提高
        54
    3214668848   2015-09-14 14:04:11 +08:00
    @wsph123 js 渲染 md 网上找个库就好了, github api 保存 repo 的话可以用 https://github.com/michael/github 这有人封好的 js 工具
        55
    Artotria   2015-09-14 14:38:57 +08:00 via Android
    卜卜的新坑,先 star 为敬(。・ω・。)
        56
    wsph123   2015-09-14 21:10:02 +08:00
    @sox 还好是个人访客限制 T^T
    @3214668848 这个还是需要 oauth 登录才可以更新 repo 的样子
    @Artotria 谢谢>_<
        57
    3214668848   2015-09-14 22:32:51 +08:00
    @wsph123 github 提供了两种方式,一种是 oauth 跳转,一种是 basic 直接用账户名密码,我的就是直接用账户名密码就可以了
        58
    kran   2015-09-14 23:03:56 +08:00 via Android
    真巧,昨天我也想到这个,没有用 api ,做成 wiki 的形式,对于博客我很焦虑╮(╯_╰)╭
        59
    Winny   2015-09-15 10:02:32 +08:00
    关注你的博客很久了 速度很快。
        61
    wsph123   2015-09-15 12:56:38 +08:00
    @3214668848 如果可能可以考虑一下尝试通过前端和 GitHub API 交互
    @kran 哈哈,快去尝试 没有 API 的话用什么实现呢
    @Winny 谢谢>_<!!
        62
    wsph123   2015-09-15 12:59:38 +08:00
    @21grams 呃,虽然 hash 路由和利用了 guthub page 存放资源这一点比较像之外,实现原理并不一样 更新内容需要其他服务来完成,这是另一个轮子
        63
    goodbest   2015-09-15 13:56:36 +08:00
    这种是不是不利于搜索引擎收录啊..
        64
    wsph123   2015-09-15 14:05:35 +08:00
    @goodbest 没错~是哒 可是 github pages 本身就屏蔽了大部分搜索引擎 的 user-agent
        65
    21grams   2015-09-15 14:31:59 +08:00
    @wsph123 更新内容并不需要其他任何服务,跟你的做法一样,都是直接 push md 文件就可以了,怎么看都是同一个轮子。
        66
    goodbest   2015-09-15 14:38:03 +08:00
    @wsph123
    关于 API 请求限制,能不能通过把 update API 的返回结果缓存来解决呢?

    当然最好是结合 github 的 api ,每次有 commit 都自动进行缓存。
        67
    3214668848   2015-09-15 15:30:37 +08:00
    @wsph123 我现在就是通过前端和 github api 交互来实现在线编辑的说
        68
    kran   2015-09-15 16:47:47 +08:00
    @wsph123 也就是在 md 里自己写链接,并没有一个列表
        69
    wsph123   2015-09-15 19:17:21 +08:00
    @21grams 我又去前辈的项目确认一下,获取文件列表这里使用的确实是同一个 API 。之前只围观了博客本身 误以为那也是完全基于他的项目建立
    目前为止,确实很像
        70
    wsph123   2015-09-15 19:18:53 +08:00
    @goodbest 没错!现在最大的问题就是这个 API 的请求速度和频率限制,如果有可能实现一定是会有的,那样可以做的事情其实也可以多很多
        71
    wsph123   2015-09-15 19:19:24 +08:00
    @3214668848 这个可以有!这样其实都可以把一些数据的缓存在这里实现了
        72
    wsph123   2015-09-15 19:20:02 +08:00
    @kran 其实这个博客程序解决的最大问题就是这里,不需要自己更新这个列表
        73
    kran   2015-09-15 20:15:51 +08:00
    @wsph123 非常棒,加油~
        74
    coolcfan   2015-09-15 21:37:10 +08:00
    感觉楼主萌萌哒!
        75
    starship   2015-09-15 23:24:56 +08:00
    @wsph123 您好,写新 blog 时似乎排版有些问题,如果新段落顶格写,那么提交后总是要空一点格,如果要实现段首空两格,经过研究后,就得把输入法把输入法由半角改为全角,然后把一个新的段落的顶格写的文字一次空格后,就可以有两个汉字的缩进。但是回车后第二个段落要两个空格,才能空两格并且与上文对齐。如图:
    ![]( http://ww3.sinaimg.cn/mw1024/5f7e4f3egw1ew3jb1h0lfj20m80gowgx )
    <http://jerry011235.github.io/#/建立博客.md>
        76
    wsph123   2015-09-15 23:25:15 +08:00 via iPad
    @kran 谢谢 OAQ 期待 wiki (≧∇≦)
    @coolcfan 那必须嗒(=´∀`)人(´∀`=)
        77
    starship   2015-09-15 23:29:47 +08:00
    @wsph123 另外请问,如果在本地写好 md 文件(比如 E:\新文章.md ),已安装 Git-1.9.5-preview20150319.exe ,怎么把他 push 到 github 上去,请问代码是什么?要 SSH key 吗?
        78
    wsph123   2015-09-15 23:42:07 +08:00 via iPad
    @starship 感谢使用!目前是在每个段落上通过 CSS 样式实现的通用首行缩近,如果希望去掉首行缩进或者调整 可以手动修改 i/i.css 中的 text-indent:1em 参数 为 0 可去掉 2em 可调整为段落两全角字符缩进

    双行换行为整段结束与开始,单换行为换行
        79
    wsph123   2015-09-15 23:45:08 +08:00 via iPad
    @starship 都需要的!关于 git 可以了解一下 http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000 这篇教程,肯定比我叙述的简单易懂

    或者 GitHub 的目录管理器 也是可以用来新建文本文档的!
        80
    starship   2015-09-16 00:18:44 +08:00
    @wsph123 感谢!成功了,我设置 text-indent:2em 就好了。另外 GitHub 的目录管理器是不是文件夹右侧的“+”号?
        81
    wsph123   2015-09-16 13:49:01 +08:00
    @starship 开心!

    对,那个是在当前目录下新建文本文件~
        82
    starship   2015-09-16 17:53:38 +08:00
    @wsph123 您好,还有一个小细节,在点击文章标题到完全加载文章时,会快速闪现四个图标,如图,这是什么东东?是彩蛋吗?相关代码在哪里?截图是在 IE 下截的,在 IE 下能看出是四个图标,在 chrome 上就是四个方框。
    http://ww4.sinaimg.cn/large/a15b4afegw1ew4fqlp665j20bw08ljrj
    哈哈,图标太好玩了!
        83
    yicun   2015-09-16 19:32:00 +08:00
    @3214668848 感谢,用你的 simple 建了一个 blog ,不过不懂 git push ,没办法自己修改
        84
    wsph123   2015-09-16 22:31:51 +08:00 via iPad
    @starship 对嗒!是彩蛋 这四个图标在 Gitblog.js 里面~
        85
    wsph123   2015-09-16 22:32:20 +08:00 via iPad
        86
    starship   2015-09-17 16:34:42 +08:00
    因为 emoji 图标在 chrome 下显示为空的方框,所以换成颜文字(●'◡'●),再转成 Unicode 编码: text:'<h1><center>&#40;&#9679;&#39;&#9697;&#39;&#9679;&#41;</center></h1>
        87
    starship   2015-09-17 16:34:52 +08:00
    @wsph123 您好,那些图标在博客加载第一次的时候,切换的速度慢,还能看见,但是多点几次,切换的速度极快,于是就想删掉了,达到 即点即显示,请问是删除 MD ('.article',{
    text:'',
    size:'233'
    }) 还是删除 哪几行代码?
        88
    wsph123   2015-09-18 08:59:45 +08:00
    @starship 对的,如果不想中途展示替换内容可以去掉这行!
        89
    kunr   2015-09-19 07:27:51 +08:00
    好厉害 ww 以前也有这个想法,我要玩 ww
        90
    cangzhang   2015-09-20 22:04:13 +08:00
    很棒!
        91
    bozong   2016-01-22 11:18:18 +08:00
    这要是文章多了,查找的话很不方便吧
        92
    Webb   2016-03-02 21:27:16 +08:00
    不错,很喜欢
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   1678 人在线   最高记录 3762   ·  
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.1 · 22ms · UTC 15:58 · PVG 23:58 · LAX 08:58 · JFK 11:58
    ♥ Do have faith in what you're doing.
    沪ICP备16043287号-1