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

[wsph123]

这是一个无需生成器的静态 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 中的 title 和 h1 标签内容即可

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

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

预览地址

http://im.front.dog

Git 地址

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

[phoenixlzx]

给肉肉点赞！
貌似玲奈早先有类似想法的，还一起讨论过，不过大概是个带后台的

[KyoHiroki]

你这么闲，还不快到咱碗里来 ww

[Yamade]

＋ 1 写的不错哦。一起来健身啊。

[vitovan]

https://github.com/barryclark/jekyll-now

跟这个有什么区别？

[wsph123]

@phoenixlzx 谢谢凤凰卷！😆
@KyoHiroki 别急呀😫😫😫
@Yamade ww 好呀
@vitovan Jekyll 必须经过转译生成 HTML 版本并同步到线上才可发布文章，妹特别版只需要同步 md 格式文章即可

[missdeer]

github pages 直接支持 jekyll 的自动生成 html 页面

[vitovan]

@wsph123 我之前用过这个，不用转译，好像是自动的。

[gangsta]

@wsph123 难道我的姿势不对?我一直都是直接 commit 日志.md 文件到 github pages 的

[vitovan]

@gangsta 我也在说这个问题，之前用 jekyll-now 都是直接 commit 日志.md 的。

[wsph123]

@missdeer
@vitovan 确实是自动转译！

[wsph123]

@gangsta
@vitovan 妹 Blog 是把这一步转移到了前端完成，前端载入的是 md 格式文档

[vitovan]

@wsph123 前端怎么渲染的

[vitovan]

找到了：
https://api.github.com/repos/itorr/itorr.github.io/contents/markdown?callback=GitBlog.listUpdata

[zhicheng]

TextArea.com 欢迎大家！

[pynix]

貌似不错的样子。。。

[wsph123]

@vitovan 对的！整个 Blog 全靠这一个 API 实现！

[wsph123]

@zhicheng prpr!

[gongpeione]

流石肉肉菊苣
API 地址 GET

[wsph123]

@pynix OwQ
@gongpeione
吃我大 API list ！
https://api.github.com

[zhicheng]

@wsph123 2333

[vitovan]

@wsph123 这个 API 的说明在哪里吖？帮忙放个文档吧？太懒没去找。我一直在后端用的这个：
https://developer.github.com/v3/markdown/

[wsph123]

@vitovan MarkDown 生成也走 GitHub 太慢了，于是用的 https://github.com/evilstreak/markdown-js

[jayin]

我写了一个跟楼主思路差不多的,纯前端，只写 mardown,不用生成静态文件 https://github.com/Jayin/silentor

[vitovan]

@wsph123 多谢。

[yingluck]

/**/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"
}
})



请问这是怎么回事？

[wsph123]

@jayin 好赞！没有搞清楚 index.md 是如何生成的，求教！😥

[wsph123]

@vitovan 客气！

[wsph123]

@yingluck 希望能提供下 github.io 地址，出现这个错误通常是由于：
index.html 中的 gitConfig.ssh 地址设置出错 或者 项目内文件不完整

[cedared]

围观，点赞， star

[wsph123]

@cedared prprprprprpr ！

[yingluck]

@wsph123 好像是我的 repository 里面含有中划线 被转义了

mingan.org

[yingluck]

项目地址 https://github.com/zhao-ji/zhao-ji.github.io

[yingluck]

@wsph123
https://api.github.com/repos/zhao-ji/zhao-ji.github.io/contents/markdown?callback=GitBlog.listUpdata
这个 API 是请求有效的

但是请求的是这个
https://api.github.com/repos/null/contents/markdown?callback=GitBlog.listUpdata

应该就是因为中划线的原因

[wsph123]

@yingluck 感谢 bug 提交！现已修复，是一处正则错误

[yingluck]

@wsph123 多谢！

[qgy18]

在 iPhone 上，访问预览地址详情页，滑动页面不太自然。
应该是你禁用了系统滚动，然后模拟滚动没实现惯性导致的。

[49]

你弄了个大新闻，我竟然不造！…

[3214668848]

跟我的想法很像啊 https://github.com/isnowfy/simple 我这个连编辑器都给好了，也是利用 github api 直接在线写 md 生成 html

[learnshare]

哦，我也拿 Angular.js 写了一个，就是拿到 Markdown 渲染为 HTML

[wsph123]

@qgy18 在 IOS 上伪造一个页内滚动条成本太高了、拖动时还是会出 bug ，调整了一下布局、避开了这个问题>_<! 感谢 qgy18 >3<

[wsph123]

@49 昨天凌晨翻到 API 立刻写出来的 OAQ

[wsph123]

@3214668848 怎么做到的在线写 md ！！！这个好溜！！

[wsph123]

@learnshare 是么！

[plqws]

好棒，兹瓷一下

[wsph123]

@plqws 射射！

[tcdw]

这个很好，可以节省大量时间。

[sox]

直接请求 GitHub API 是有 Rate Limit 的。

[3214668848]

@wsph123 js 实时渲染 md ，保存的时候用 github api 保存到 repo 里就好了呢

[wsph123]

@tcdw OwQ
@sox 感谢提醒！这就提供翻页

[wsph123]

@3214668848 这个是如何实现的呢？

[sox]

@3214668848 不差那几十毫秒。。
@wsph123 我觉得你回复错人了。。

[wsph123]

@sox 阿勒！！ Rate Limit 我还以为是翻页用的 OAQ 访问限制的话是针对每个访客的吧？如果是真多 git 仓库的话这有点忧伤呀

[sox]

@wsph123 每个访客访问 api.github.com 每小时请求限制是 60 次 233

不过似乎可以用这个 https://github.com/settings/tokens/new 提高

[3214668848]

@wsph123 js 渲染 md 网上找个库就好了， github api 保存 repo 的话可以用 https://github.com/michael/github 这有人封好的 js 工具

[Artotria]

卜卜的新坑，先 star 为敬(｡･ω･｡)

[wsph123]

@sox 还好是个人访客限制 T^T
@3214668848 这个还是需要 oauth 登录才可以更新 repo 的样子
@Artotria 谢谢>_<

[3214668848]

@wsph123 github 提供了两种方式，一种是 oauth 跳转，一种是 basic 直接用账户名密码，我的就是直接用账户名密码就可以了

[kran]

真巧，昨天我也想到这个，没有用 api ，做成 wiki 的形式，对于博客我很焦虑╮(╯_╰)╭

[Winny]

关注你的博客很久了 速度很快。

[21grams]

这种东西早就有轮子了： https://sneezry.com/#!/2014/02/11/%E5%9F%BA%E4%BA%8EGithub%E7%9A%84%E5%89%8D%E7%AB%AF%E8%BD%BB%E9%87%8F%E7%BA%A7%E5%8D%9A%E5%AE%A2%E7%B3%BB%E7%BB%9F

[wsph123]

@3214668848 如果可能可以考虑一下尝试通过前端和 GitHub API 交互
@kran 哈哈，快去尝试 没有 API 的话用什么实现呢
@Winny 谢谢>_<!!

[wsph123]

@21grams 呃，虽然 hash 路由和利用了 guthub page 存放资源这一点比较像之外，实现原理并不一样 更新内容需要其他服务来完成，这是另一个轮子

[goodbest]

这种是不是不利于搜索引擎收录啊..

[wsph123]

@goodbest 没错~是哒 可是 github pages 本身就屏蔽了大部分搜索引擎 的 user-agent

[21grams]

@wsph123 更新内容并不需要其他任何服务，跟你的做法一样，都是直接 push md 文件就可以了，怎么看都是同一个轮子。

[goodbest]

@wsph123
关于 API 请求限制，能不能通过把 update API 的返回结果缓存来解决呢？

当然最好是结合 github 的 api ，每次有 commit 都自动进行缓存。

[3214668848]

@wsph123 我现在就是通过前端和 github api 交互来实现在线编辑的说

[kran]

@wsph123 也就是在 md 里自己写链接，并没有一个列表

[wsph123]

@21grams 我又去前辈的项目确认一下，获取文件列表这里使用的确实是同一个 API 。之前只围观了博客本身 误以为那也是完全基于他的项目建立
目前为止，确实很像

[wsph123]

@goodbest 没错！现在最大的问题就是这个 API 的请求速度和频率限制，如果有可能实现一定是会有的，那样可以做的事情其实也可以多很多

[wsph123]

@3214668848 这个可以有！这样其实都可以把一些数据的缓存在这里实现了

[wsph123]

@kran 其实这个博客程序解决的最大问题就是这里，不需要自己更新这个列表

[kran]

@wsph123 非常棒，加油～

[coolcfan]

感觉楼主萌萌哒！

[starship]

@wsph123 您好，写新 blog 时似乎排版有些问题，如果新段落顶格写，那么提交后总是要空一点格，如果要实现段首空两格，经过研究后，就得把输入法把输入法由半角改为全角，然后把一个新的段落的顶格写的文字一次空格后，就可以有两个汉字的缩进。但是回车后第二个段落要两个空格，才能空两格并且与上文对齐。如图：
<http://jerry011235.github.io/#/建立博客.md>

[wsph123]

@kran 谢谢 OAQ 期待 wiki （≧∇≦）
@coolcfan 那必须嗒(=´∀｀)人(´∀｀=)

[starship]

@wsph123 另外请问，如果在本地写好 md 文件（比如 E:\新文章.md ），已安装 Git-1.9.5-preview20150319.exe ，怎么把他 push 到 github 上去，请问代码是什么？要 SSH key 吗？

[wsph123]

@starship 感谢使用！目前是在每个段落上通过 CSS 样式实现的通用首行缩近，如果希望去掉首行缩进或者调整 可以手动修改 i/i.css 中的 text-indent:1em 参数 为 0 可去掉 2em 可调整为段落两全角字符缩进

双行换行为整段结束与开始，单换行为换行

[wsph123]

@starship 都需要的！关于 git 可以了解一下 http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000 这篇教程，肯定比我叙述的简单易懂

或者 GitHub 的目录管理器 也是可以用来新建文本文档的！

[starship]

@wsph123 感谢！成功了，我设置 text-indent:2em 就好了。另外 GitHub 的目录管理器是不是文件夹右侧的“+”号？

[wsph123]

@starship 开心！

对，那个是在当前目录下新建文本文件~

[starship]

@wsph123 您好，还有一个小细节，在点击文章标题到完全加载文章时，会快速闪现四个图标，如图，这是什么东东？是彩蛋吗？相关代码在哪里？截图是在 IE 下截的，在 IE 下能看出是四个图标，在 chrome 上就是四个方框。
http://ww4.sinaimg.cn/large/a15b4afegw1ew4fqlp665j20bw08ljrj
哈哈，图标太好玩了！

[yicun]

@3214668848 感谢，用你的 simple 建了一个 blog ，不过不懂 git push ，没办法自己修改

[wsph123]

@starship 对嗒！是彩蛋 这四个图标在 Gitblog.js 里面～

[wsph123]

@yicun http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000 快去入门 Git ！😆

[starship]

因为 emoji 图标在 chrome 下显示为空的方框，所以换成颜文字(●'◡'●)，再转成 Unicode 编码： text:'<h1><center>&#40;&#9679;&#39;&#9697;&#39;&#9679;&#41;</center></h1>

[starship]

@wsph123 您好，那些图标在博客加载第一次的时候，切换的速度慢，还能看见，但是多点几次，切换的速度极快，于是就想删掉了，达到 即点即显示，请问是删除 MD ('.article',{
text:'',
size:'233'
}) 还是删除 哪几行代码？

[wsph123]

@starship 对的，如果不想中途展示替换内容可以去掉这行！

[kunr]

好厉害 ww 以前也有这个想法，我要玩 ww

[cangzhang]

很棒！

[bozong]

这要是文章多了，查找的话很不方便吧

[Webb]

不错，很喜欢