V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 3345 天前的主题，其中的信息可能已经有所发展或是发生改变。

GitBlog

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

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

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

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

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

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

如何更新文章？

使用任意 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

GitHub

博客

Pages

blog

92 条回复 • 2016-03-02 21:27:16 +08:00

phoenixlzx

2015-09-14 02:55:52 +08:00 via Android

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

KyoHiroki

2015-09-14 03:19:54 +08:00

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

Yamade

2015-09-14 08:15:31 +08:00

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

vitovan

2015-09-14 08:30:06 +08:00 via Android

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

跟这个有什么区别？

wsph123

2015-09-14 08:37:43 +08:00 via iPhone

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

missdeer

2015-09-14 08:59:36 +08:00

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

vitovan

2015-09-14 09:01:14 +08:00

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

gangsta

2015-09-14 09:03:37 +08:00

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

vitovan

2015-09-14 09:08:30 +08:00

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

wsph123

2015-09-14 09:10:42 +08:00

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

wsph123

2015-09-14 09:14:19 +08:00

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

vitovan

2015-09-14 09:20:57 +08:00

@wsph123 前端怎么渲染的

vitovan

2015-09-14 09:22:10 +08:00

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

zhicheng

2015-09-14 09:23:21 +08:00 via Android

TextArea.com 欢迎大家！

pynix

2015-09-14 09:23:33 +08:00

貌似不错的样子。。。

wsph123

2015-09-14 09:25:48 +08:00

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

wsph123

2015-09-14 09:29:09 +08:00

@zhicheng prpr!

gongpeione

2015-09-14 09:32:18 +08:00

流石肉肉菊苣
API 地址 GET

wsph123

2015-09-14 09:33:21 +08:00

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

zhicheng

2015-09-14 09:33:23 +08:00 via Android

@wsph123 2333

vitovan

2015-09-14 09:33:43 +08:00

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

wsph123

2015-09-14 09:35:08 +08:00

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

jayin

2015-09-14 09:36:18 +08:00

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

vitovan

2015-09-14 09:38:54 +08:00

@wsph123 多谢。

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

请问这是怎么回事？

wsph123

2015-09-14 10:18:09 +08:00

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

wsph123

2015-09-14 10:18:28 +08:00

@vitovan 客气！

wsph123

2015-09-14 10:20:06 +08:00

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

cedared

2015-09-14 10:23:42 +08:00

围观，点赞， star

wsph123

2015-09-14 10:26:19 +08:00

@cedared prprprprprpr ！

yingluck

2015-09-14 10:30:10 +08:00

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

mingan.org

yingluck

2015-09-14 10:31:51 +08:00

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

yingluck

2015-09-14 10:40:37 +08:00

@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

2015-09-14 11:05:28 +08:00

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

yingluck

2015-09-14 11:05:49 +08:00

@wsph123 多谢！

qgy18

2015-09-14 11:22:45 +08:00 via iPhone

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

2015-09-14 11:30:50 +08:00 via Android

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

3214668848

2015-09-14 11:34:31 +08:00

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

learnshare

2015-09-14 11:37:04 +08:00

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

wsph123

2015-09-14 11:38:27 +08:00

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

wsph123

2015-09-14 11:39:36 +08:00

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

wsph123

2015-09-14 11:39:58 +08:00

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

wsph123

2015-09-14 11:40:10 +08:00

@learnshare 是么！

plqws

2015-09-14 11:52:05 +08:00

好棒，兹瓷一下

wsph123

2015-09-14 11:54:19 +08:00

@plqws 射射！

tcdw

2015-09-14 12:55:27 +08:00 via Android

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

sox

2015-09-14 13:11:38 +08:00

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

3214668848

2015-09-14 13:45:28 +08:00

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

wsph123

2015-09-14 13:50:44 +08:00

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

wsph123

2015-09-14 13:52:22 +08:00

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

sox

2015-09-14 13:55:33 +08:00

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

wsph123

2015-09-14 13:58:19 +08:00

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

sox

2015-09-14 14:03:56 +08:00

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

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

3214668848

2015-09-14 14:04:11 +08:00

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

Artotria

2015-09-14 14:38:57 +08:00 via Android

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

wsph123

2015-09-14 21:10:02 +08:00

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

3214668848

2015-09-14 22:32:51 +08:00

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

kran

2015-09-14 23:03:56 +08:00 via Android

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

Winny

2015-09-15 10:02:32 +08:00

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

21grams

2015-09-15 12:00:24 +08:00

这种东西早就有轮子了： 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

2015-09-15 12:56:38 +08:00

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

wsph123

2015-09-15 12:59:38 +08:00

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

goodbest

2015-09-15 13:56:36 +08:00

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

wsph123

2015-09-15 14:05:35 +08:00

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

21grams

2015-09-15 14:31:59 +08:00

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

goodbest

2015-09-15 14:38:03 +08:00

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

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

3214668848

2015-09-15 15:30:37 +08:00

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

kran

2015-09-15 16:47:47 +08:00

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

wsph123

2015-09-15 19:17:21 +08:00

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

wsph123

2015-09-15 19:18:53 +08:00

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

wsph123

2015-09-15 19:19:24 +08:00

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

wsph123

2015-09-15 19:20:02 +08:00

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

kran

2015-09-15 20:15:51 +08:00

@wsph123 非常棒，加油～

coolcfan

2015-09-15 21:37:10 +08:00

感觉楼主萌萌哒！

starship

2015-09-15 23:24:56 +08:00

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

wsph123

2015-09-15 23:25:15 +08:00 via iPad

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

starship

2015-09-15 23:29:47 +08:00

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

wsph123

2015-09-15 23:42:07 +08:00 via iPad

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

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

wsph123

2015-09-15 23:45:08 +08:00 via iPad

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

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

starship

2015-09-16 00:18:44 +08:00

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

wsph123

2015-09-16 13:49:01 +08:00

@starship 开心！

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

starship

2015-09-16 17:53:38 +08:00

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

yicun

2015-09-16 19:32:00 +08:00

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

wsph123

2015-09-16 22:31:51 +08:00 via iPad

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

wsph123

2015-09-16 22:32:20 +08:00 via iPad

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

starship

2015-09-17 16:34:42 +08:00

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

starship

2015-09-17 16:34:52 +08:00

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

wsph123

2015-09-18 08:59:45 +08:00

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

kunr

2015-09-19 07:27:51 +08:00

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

cangzhang

2015-09-20 22:04:13 +08:00

很棒！

bozong

2016-01-22 11:18:18 +08:00

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

Webb

2016-03-02 21:27:16 +08:00

不错，很喜欢

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

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

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

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

如何更新文章？

如何绑定个性域名？

如何修改博客名称？

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

预览地址

Git 地址

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

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