GitHub 上的 12 个骚操作

简评:解放生产力的,GitHub 使用指南。

1 在 Github 上编辑代码

我要先说一个很多人都知道的事儿。

当你使用 GitHub,看一些文件(任何的文本文件或者仓库),能看到一个顶部右侧有一个小铅笔图标。点击即可编辑文档。完成后,按照提示点击「Propose file change」,GitHub 会为你 fork 这个仓库并创建一个 pull request。

很帅吧,GitHub 为你创建了一个分支。

不需要 fork / pull / 改变 locally / push / 创建 PR,只需点击一下,就可以创建分支。

这对于改一些排版错误或者防恶意篡改是很有帮助的。

2 粘贴图像

对于 issue 和 comment,你还可以直接粘贴图片,当你粘贴时图片会被上传至云端,然后以 MarkDown 格式显示。

非常简洁。

3 格式化代码

如果你想写一个 code block,你可以在开始处写三个反引号,然后 GitHub 会试图猜出你在写什么语言。

但是如果你发布如 Vue、Typescript、JSX 这样的语言,你可以明确写出来,以获取正确的高亮。

下图第一行使用了 ```jsx:


片段呈现:


(这可以扩展到 gist,顺便一提,如果你给了 gist 定义成 .jsx 扩展名,那么你会得到 JSX 的高亮)

Github 支持语言列表

4 使用魔术词在 PR 中关闭 issue

比如你在创建一个 pull request 去修复 issue #234。那你可在 PR 输入「fixes #234」,就可以自动合并 PR 并关闭这个 issue,是不是很酷。

(提交信息里可以使用 fix/fixes/fixed , close/closes/closed 或者 resolve/resolves/resolved等关键词,更多请查看 help

5 链接到 comment

你甚至想链接到一个特定的评论,但无法做到?我在这里告诉你,点击名字旁边的日期/时间就万事大吉。


6 链接到代码

既然能链接到 comment,那你想问能不能链接到代码上?可以的。

试试这个操作:在查看文件时,点击代码边上的行数。

哇喔,你看到了么?URL 随之更新。如果你按住 Shift 并单击另一个行号,URL 会再次更新,并且高亮这两个行数之间的所有代码段。

你现在可以分享这个 URL 了,但等等,这些还是当前分支,如果文件变化了呢?你需要一个永久链接。

我比较懒,但是下面这一个截图已经能够表达如何获取永久链接了(Copy Permalink):

7 像使用命令行一样使用 GitHub URL

既然说到了 URL,那么久接着聊一下。使用 UI 浏览 GitHub 很方面也很好,不过很多时候最快的方式是使用 URL 来浏览。举个例子,如果我想跳转到正在处理的分支上,并想查看分支和 master 的差异,我可以在我的仓库名后面输入 /compare/branch-name。

下简单说,查看 master 和分支的区别,如下图:

可以在名字后面再加上...XXX(分支名)比如我写的 mkdocs...pre-release,如下图:

这一步你可以配合键盘快捷键,Ctrl + L 或者 cmd + L,可以让光标直接移动到 URL 中(最起码 chrome 是这样)。这些加一起能提高生产力。

专业提示:用键盘移动 chrome URL 上的某一条网页记录,使用 Shift+Delete 或 Shift+fn+Delete 来删除某一条记录。(比如合并了分支之后就可以删除了)

8 在 issue 中创建 list

你想在你的 issue中看到可多选的 list 么?

当你查看问题时,你想不想让它变成 2 of 5 这样的形式。

如果想,你可以在 issue 中使用以下句法:

- [ ] Screen width (integer) 
- [x] Service worker support 
- [x] Fetch support 
- [ ] CSS flexbox support 
- [ ] Custom elements

9 GitHub 上的 project board

我总是用 Jira 做大项目,独立项目用 Trello,这两者我都很喜欢。

后来我知道,GitHub 也有类似的 project board:

我个人为了方便把它们都添加为 note。board 极为方便的帮助你做仓库管理。

你可以点击右上角 Add Cards 来添加东西。这里有些特殊语法方便搜索,比如: is:pr is:open,你就可以把任何公开的 PR 拖到 board 上。

更多语法可以参考 search syntax

你也可以把现存的 note 转化为 issue。



你也可以选择 issue 直接添加到 projects 。

这些意味着,从现在开始,你可以明确责任制度,每一行代码的分配都可以在 GitHub 上的 Project board 上完成而不用去 Jira 或者 Trello 上。

不过它也有些缺点,比如功能比较少。你也可以试试 ZenHub,它有效的扩展 GitHub。

更多关于 board 的问题可以访问:GitHub help on Projects.

10 GitHub WiKi

GitHub WiKi 能够帮助我们处理非结构化的页面集合,就像维基百科那样。我自己 NodeJS docs 就被我弄成 wiki 的样子。几个页面,然后自定义侧边栏。具体方法网上很多,我的页面可以供你参考一下。

建议:如果你有个特别长的单页面 README.md 文件,并且想和其他人有所区别,你可以试试这种形式。

11 GitHub Pages(JekyII)

你可能已经知道了能使用 GitHub Pages 来托管静态网站。那本条就特别介绍一下如何使用 JekyII 来构建站点。

以最简单的方式,GitHub Pages + JekyII 将以最漂亮的主题来呈现你的 README.md,例如,你可以看一下 about-github 的自述文件。

在 GitHub 的 my site 中,点击 setting,打开 GitHub Pages,选择一个 JekyII 主题

就会得到一个 Jekyll 主题页面

它的优点是:

  • 轻量级网站,响应速度快
  • 网站更安全,无数据库,无动态数据
  • 无需通入过多精力维护

注意,他需要 Ruby 在本地运行,Mac 自带,Windows 用户自行安装。

12 把 GitHub 当 CMS 用

你的网站需要显示一些文字,但是你还不想直接放在 HTML 里面,那你可以把 GitHub 作为你储存内容的一个地方。这样,就可以让任何一个非程序员通过修改 Markdown 来修改 HTML 网页的内容。

我的方法是:在你的 GitHub 仓库中使用 markdown 文件来保存文本。在你网站的前端用一个组件来抓取这些文本并呈现在网页上。

我是玩 React 的,这里有个<Markdown>组件,用以抓取,解析并呈现到 HTML 上。

class Markdown extends React.Component {
 constructor(props) {
 super(props);class Markdown extends React.Component {
    constructor(props) {
      super(props);
      
      // replace with your URL, obviously
      this.baseUrl = 'https://raw.githubusercontent.com/davidgilbertson/about-github/master/text-snippets';
      
      this.state = {
        markdown: '',
      };
    }

    componentDidMount() {
      fetch(`${this.baseUrl}/${this.props.url}`)
        .then(response => response.text())
        .then((markdown) => {
          this.setState({markdown});
        });
    }

    render() {
      return (
        <div dangerouslySetInnerHTML={{__html: marked(this.state.markdown)}} />
      );
    }
}

/text-snippets 这个文件夹是储存我的 markdown)

下面这段代码是上面组件的示例:

const Page = () => (
 <div className="page">
   <div className="about-us">
     <Markdown url="about-us.md" />
   </div>
   
   <div className="disclaimer">
     <p>A very important disclaimer:</p>
     
     <Markdown url="disclaimers/home-page-disclaimer.md" />
   </div>
 </div>
);

所以现在 GitHub 也是你的 CMS,无论你想要样大小的文字都可以。

推荐一个 GitHub 工具

Octotree Chrome extension

它可以让你在看任何仓库时,获得一个左边的树状图。

以上。

希望能够对你有所帮助,have a nice day!

原文:12 cool things you can do with GitHub
延伸阅读:
Github | 程序员七大生产力工具
一个开源的社会化编程实验
开发者提到最多的十个 GitHub 仓库
每个程序员都应该阅读的 10 篇论文(至少两遍)
用 snippet 加速你的编码

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容

  • 作者丨David Gilbertson译者 丨安翔转载来源:CSDN 1. 在 GitHub.com 上编辑代码 ...
    LeanCloud官方帐号阅读 703评论 0 1
  • WebSocket-Swift Starscream的使用 WebSocket 是 HTML5 一种新的协议。它实...
    香橙柚子阅读 23,684评论 8 183
  • 陈小乔被那知客僧迎入寺庙之中,刘云帆和叶轻雪也跟着进去。 接着便是上香拜佛,陈小乔口中念念有词,感谢佛祖保祐。刘云...
    飄雲阅读 239评论 0 1
  • 石上硫从廊坊来 奥冬从邢台来 三分山从建设南路来 而我从青园街来。 四个人是四朵云 后来又飘来两朵 如解不解和小石...
    南北王阅读 250评论 0 4
  • 方步萍走进房间,房间坐着一位童颜鹤发的老道。 “你来了”。 “我来了”。 “你还是来了”。 “你知道我要来”。 “...
    toyman28阅读 300评论 1 1