Be into the Gist

readme.md

Gist是GitHub推出的一款类似于Pastebin的代码片段托管服务，初衷是为了分享和交流代码，但是实际上可以做很多事。

测试环境

Windows 7 sp

功能

基本功能

1. 创建私有(private)或者公开(public)的gist，默认是公开的
2. 创建匿名(anonymous)gist，无需登录
3. 支持多格式文件，如：.md/.html/.js/.css/.cpp/.db
4. 通过script标签，嵌入(embed)其他页面
5. 支持git，gist本质上是一个小型仓库，可以跟普通仓库一般使用命令行操作，只不过gist页面没有GitHub仓库那么复杂
6. 自带评论功能
7. 在gist的url后加上.pibb后缀，可访问纯页面形式的gist，没有其他操作交互元素，如： https://gist.github.com/uolcano/e7dd8c16489f82835f73d131d2319422.pibb

扩展功能

1. 可以做在线笔记本

2. 私有gist可以存储浏览器书签

3. 利用GFM语法的任务列表，管理待办事宜

4. 利用Chrome浏览器插件GistBox Clipper，方便的保存网页的内容以及文章内的代码，支持添加标签，默认存储来源网页链接

5. 利用GA Beacon统计gist的实时访问情况，只要将以下代码写入gist中的markdown文件中即可

   ![Analytics](https://ga-beacon.appspot.com/UA-XXXXX-X/gist-id?pixel)

6. 结合roughdraft.io把gist作为写作平台，发布文章，gist的自带评论可以当做文章的评论区

7. 结合bl.ocks.org托管单页应用，支持同一个gist下的文件间相对引用

8. 结合jsbin可以在线调试代码，甚至可以实时预览markdown

9. 资源托管，将创建或者fork的gist中某个文件的源文件(raw)的url，放到其他网站或页面，可以直接引用，不过对于使用https安全协议的网站会有跨域限制

写作平台

roughdraft是基于gist API的文章发布平台，你只需要下面几步就可自动发布文章，无需花费过多精力打理：

1. 创建一个公开(public)的gist，其中至少包含一个以markdown、textile、haml或者纯文本的文件，多个被支持的文件会在roughdraft的页面中合并
2. 记下gist-id，也就是gist url的最后一串16进制数
3. 再通过roughdraft.io/gist-id就可以访问被渲染后的文章了

PS: 其实私有的文章可以发布，只是roughdraft不会自动扫描到，通过第3步的方式可以访问到被渲染的私有gist

另外，roughdraft支持以下几个方便的功能：

1. gist的description描述会作为发布到roughdraft上的文章的标题
2. roughdraft可渲染GFM/Textile/Haml/纯文本格式
3. 支持图片和表情:v:
4. 支持引用同一个gist下的文件，但不支持图片引用，不支持文本缩进

<gist>code.js</gist>渲染为：

code.js</g ist>

<gist>Koala.jpg</gist>渲染为：

Koala.jpg

最后，通过username.roughdraft.io你可以看到你的所有公开的gist渲染的文章，而且可以使用GitHub账号登录，进行管理。

单页应用

bl.ocks.org比roughdraft更强大，通过不同的url来访问，可以作为文章发布平台，也可以托管单页应用

1. 通过bl.ocks.org/username/gist-id可访问被渲染的文件，markdown等文本被渲染为页面，html/js/css等文件直接显示为代码，图片不直接显示，可显示License许可证 http://bl.ocks.org/uolcano/15f61be11e32432c9d73a2d8601f9cf8
2. 通过bl.ocks.org/username/raw/gist-id可以做单页应用，可以做demo http://bl.ocks.org/uolcano/raw/15f61be11e32432c9d73a2d8601f9cf8/

PS:

• 因为bl.ocks.org允许同一gist内的文件相互引用，所以可以托管单页
• 可以引用外来资源，但是url的方案必须使用http(https有跨域限制)
• bl.ocks.org还支持一定页面配置，点击详情
• 访问 https://bl.ocks.org/ ，你会发现很多有趣的作品与示例，通过拷贝作品后的gist-id，粘贴到gist.github.com/gist-id，你可以查看作者的源代码，以及在gist下面评论

在线调试

jsbin.com是一个类似codepen.io的在线编辑器，可以在线调试。但是jsbin还支持gist API，同样你可以拷贝gist-id粘贴到jsbin的url以访问之
jsbin.com/gist/gist-id

jsbin支持markdown和jade模板，还有在线控制台console。既可以做代码调试工具，又可以做markdown实时预览编辑器

比如，从bl.ocks.org上找到的一个作品：https://bl.ocks.org/mbostock/1353700，拷贝gist-id：1353700，从jsbin访问http://jsbin.com/gist/1353700，就可以在线调试观察了。

当然，jsbin支持的文件有限，需要支持markdown/html/js/css以外的文件时，jsbin就乏力了。
比如：https://bl.ocks.org/kerryrodden/7090426，找到这个的gist：https://gist.github.com/kerryrodden/7090426，可以看到后面还有svg/csv等格式文件的数据需要使用到。

文件托管

rawgit

rawgit.com是一个很好的转换GitHub和Gist上托管的文件的在线工具。
rawgit通过重定向，可以指定到GitHub仓库里的文件或者某个Gist里的文件

你可以直接使用rawgit的url来访问托管的文件：

1. rawgit.com/user/repo/branch/file访问GitHub仓库中的文件
2. rawgit.com/user/gist-id/raw/file访问Gist中的文件

PS: rawgit支持两种形式的托管转换：

1. 普通模式。如上介绍的使用格式，但是会有流量限制，过多流量会被节流和被拉黑名单，一般只在开发调试时使用
2. cdn模式。用法类似普通模式，可以在rawgit.com上在线生成，没有流量限制，不支持查询字符串，不保证稳定支持

GitHub raw

GitHub或者Gist托管的源文件都会有个特殊的访问格式，在GitHub仓库或者Gist中找到文件的raw按钮，可以查看源文件，这个源文件可以直接在外部其他页面引用。
PS: 生成的raw链接，在文件前有部分是blob-id，可以省略，照样能够访问该文件

GitHub仓库中文件的访问方式

1. https://raw.githubusercontent.com/user/repo/branch/path/to/file
   
2. https://raw.github.com/user/repo/branch/path/to/file 这个会重定向到1的url
   

Gist中文件的访问方式只有一种
https://gist.githubusercontent.com/uolcano/gist-id/raw/file

PS: 在有些使用安全协议(https)的页面不能使用这种静态文件托管形式，必须要使用支持查询字符串的代码托管形式。

工具

Gist既然有这么多第三方应用，当然会有很多工具：

1. Chrome应用GistBox
2. 桌面软件Gisto
3. 命令行工具gist CL
4. Sublime Text的插件Gist

SublimeText的插件，虽说支持gist的各项操作，但是卡顿严重，非常影响ST的使用。也许是我的机器配置问题，也许是国内网速的问题，不做过多介绍。
还有其他编辑器也支持gist插件：atom

对比前3个工具

工具	优点	缺点
GistBox	页面简洁，轻量 Chrome应用无需安装 标签管理 延迟低，不会重复操作 email分享gist 可解析图片	不支持GFM预览 进入编辑模式会破坏图片文件，导致不得不重新push图片 不支持添加图片
Gisto	功能丰富 调用GFM预览，比较美观 可以自定义编辑器，支持vim模式 在jsbin中打开gist 分享个GitHub好友 可以查看gist评论 一件public/private转换	容易延迟，会造成多次gist操作 不能解析图片格式 因为一打开某个gist就是进入编辑模式，会破坏不支持格式的文件 需要本地安装 不支持添加图片
gist CL	本地多文件上传	不支持添加图片 需要安装ruby

PS: 我还是比较推荐使用GistBox或者直接使用Gist页面进行操作(Gist页面编辑，不会破坏图片格式文件)。

gist CL常用命令行

# 登录GitHub
gist --login
# 创建私有gist
gist -p readme.md
# 多文件上传
gist a.html b.js c.css
gist *.md
# 创建或更新gist时，添加gist的描述
gist -d 'A sentence to describe this gist'
# 更新某个已经存在的gist的文件
gist -u e7dd8c16489f82835f73d131d2319422 index.html
# 列出登录用户的所有gist，包括private
gist -l
# 列出指定用户的public gist
gist -l uolcano
# 读取已创建gist的内容
gist -r e7dd8c16489f82835f73d131d2319422

上传图片

以上4种工具各有特点，但是都有一个缺点：不能上传图片等gist页面不支持的格式操作。
但是利用gist的git特性，我们可以通过以下几步上传图片到指定gist：

1. 找到一个已创建的gist

2. 在Embed下拉找到Clone via HTTPS或者Clone via SSH，复制

3. 克隆gist到本地：

   git clone https://gist.github.com/e7dd8c16489f82835f73d131d2319422.git
   

4. 切换到刚克隆gist的目录dir：

   cd path/to/e7dd8c16489f82835f73d131d2319422
   

5. 向目录dir中复制待上传的图片，然后

   git add --all
   git commit -m 'upload images'
   git push origin master

6. 打开gist页面查看上传是否成功，在Revisions选项中可以查看上变更记录

综合使用

1. GistBox进行gist管理
2. GistBox Clipper收藏代码片段或网页文章
3. gist.github.com/gist-id托管文件
4. roughdraft.io/gist-id渲染文章，管理发布的文章
5. bl.ocks.org/gist-id实现单页应用，托管demo
6. jsbin.com/gist/gist-id在线调试代码，markdown撰写预览
7. rawgit.com转换托管文件url

参考阅读

• Creating gists
• 6.1. GitHub:Gist - GotGitHub
• 如何看待 Github Gist这个服务，怎样更好的利用？

code.js

function reverse(str) {
	return str.split('').reverse().join('');
}

Koala.jpg