Skip to content

Instantly share code, notes, and snippets.

@uolcano

uolcano/Koala.jpg

Last active November 5, 2024 02:14
Show Gist options
  • Save uolcano/70c3926a4716759ec6599f444a172e64 to your computer and use it in GitHub Desktop.
Save uolcano/70c3926a4716759ec6599f444a172e64 to your computer and use it in GitHub Desktop.
Download ZIP
Be into the Gist
Raw
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

<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仓库中的文件 Koala
  2. rawgit.com/user/gist-id/raw/file访问Gist中的文件 Koala

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
    Koala
  2. https://raw.github.com/user/repo/branch/path/to/file 这个会重定向到1的url
    Koala

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

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

工具

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

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

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

对比前3个工具

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

参考阅读

Raw
code.js
function reverse(str) {
return str.split('').reverse().join('');
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment