github版本库使用详细图文教程(命令行及图形界面版)
转载 & & 投稿：mdxy-dxy
今天我们就来学习github的使用，我们将用它来管理我们的代码，你会发现它的好处的，当然是要在本系列教程全部完成之后，所以请紧跟站长的步伐，今天是第一天，我们来学习如何在git上建立自己的版本仓库，并将代码上传到仓库中
是一个分布式的版本控制系统，作为开源代码库以及版本控制系统，目前拥有140多万开发者用户。随着越来越多的应用程序转移到了云上，已经成为了管理软件开发以及发现已有代码的首选方法。
& Git是一个分布式的版本控制系统，最初由Linus Torvalds编写，用作Linux内核代码的管理。在推出后，Git在其它项目中也取得了很大成功，尤其是在Ruby社区中。目前，包括 Rubinius和Merb在内的很多知名项目都使用了Git。Git同样可以被诸如Capistrano和Vlad the Deployer这样的部署工具所使用。
如前所述，作为一个分布式的版本控制系统，在Git中并不存在主库这样的概念，每一份出的库都可以独立使用，任何两个库之间的不一致之处都可以进行合并。
GitHub可以托管各种库，并提供一个web界面，但与其它像 或这 样的服务不同，GitHub的独特卖点在于从另外一个项目进行分支的简易性。为一个项目贡献代码非常简单：首先点击项目站点的“fork”的按钮，然后将 代码检出并将修改加入到刚才分出的代码库中，最后通过内建的“pull request”机制向项目负责人申请代码合并。已经有人将GitHub称为代码玩家的MySpace。
今天我们就来学习github的使用，我们将用它来管理我们的代码，你会发现它的好处的，当然是要在本系列教程全部完成之后，所以请紧跟站长的步伐，今天是第一天，我们来学习如何在git上建立自己的版本仓库，并将代码上传到仓库中。
### 教程【一】
一、注册一个免费git帐号，可以无限建立访问权限为公共的版本仓库，注册地址：
二、依次填写，用户名【昵称】、邮箱地址【用来登录】、密码，点击“creat an account”进行注册
三、点击右上方的”sign in”使用注册邮箱登录到git
四、点击右上方，你的用户名之后的图标，新建一个版本仓库
五、在“Repository name”一栏里填写版本仓库的名称，我们假设为”test”,Description栏是描述，可填可不填。
默认访问权限为公共，我们点击”Creating Repository”按钮，创建我们的第一个版本仓库。
接下来，我们需要在本地安装git客户端。
六、以windows为例，下载客户端：，安装完成后，会在桌面上出现两个图标，Git Shell和GitHub。
七、那两个图标分别是命令行工具和图形界面，我们先来学习使用shell。
八、双击打开Git Shell,【win7用户使用管理员权限打开】
九、输入git config --global user.name "d1php",这里的d1php是站长注册的用户名，你得改成你自己的
十、输入git config --global user.email "",这里的邮箱也是是站长注册的邮箱，你得改成你自己的
十一、上面两步在客户端配置你的git帐户，下面我们在本地建立自己的版本仓库，站长把版本仓库建立在D盘。输入cd d:，切换到D盘目录。
十二、输入mkdir test，建立一个test目录，注意本地仓库名要和git中建立的仓库名一样
十三、输入cd test，进入test目录
十四、输入git init,初始化版本仓库
十五、输入touch README,建立一个README文件
十六、用文本编辑器打开README文件，随便输入一点文件，比如：this is a test!
十七、输入git add README,将文件添加到上传队列
十八、输入git commit -m 'test commit'，缓存提交，引号中的是对本次提交的描述，必须填写，不能为空
十九、输入git remote add origin https://github.com/_d1php_/test.git,注意url格式，d1php是你注册时的昵称，test是你刚才建立的版本仓库
二十、输入git push origin master，将README文件上传到版本库。这一步会一次让你填写你的git注册邮箱和密码，注意不要填错了
好了，到这一步，我们就完成了在线上和线下建立git版本库并上传文件的全部步骤。下节课我们来学习GitHub的使用，图形界面大家肯定更容易接受。
教程【二】
上一节课我们学习了，今天我们来学习github的图形界面。
一、双击桌面上的GitHub图标
二、在打开的界面中，点击Log In,图下图所示：
三、在界面中输入用户名和密码，如下图所示：
四、点击LOG IN，进入下图所示界面：
五、点击'continue'，进入下图所示界面：
六、提示我们没有找到本地版本仓库，这是因为git客户端默认是在C盘的git目录中查找版本库，而我们在上节课中建立的版本仓库在D盘，所以才找不到，没关系我们自己来查找，点击SKIP,进入下图所示界面：
七、点击'tools',在下拉菜单中选择'options'，进入下图所示界面：
八、定位到D盘目录，然后点击SCAN FOR REPOSITORIE，扫描本地仓库,如下图所示：
九、很快就找到了我们上节课建立的版本仓库，test，点击左下方的add，再点击update,进入下图所示界面：
十、进入D:/test目录，新建一个名为hello的txt文件，在其中输入hello world!,然后点击上图中的箭头打开版本库，进入下图所示界面：
十一、左边栏会列出最新有改动的文件，右边第一栏填写对本次提交的描述，我们填'hello world';第二栏是详细描述，可以不填。填完后点击'commit'提交,进入下图所示界面：
十二、在右边我们可以看见刚才新建的提交:hello world,点击publish，将我们的改动上传到线上的git仓库中。
十三、稍等片刻，即可完成上传，如下图所示：
上传成功后，我们可以在左边看见刚才完成的提交。然后我们访问线上的仓库，检查一下：
是的，线上的test仓库又多了2个文件。
好了，到这里我们就已经使用GitHub图形界面完成了一次文件上传，下节课我们将回到gitshell的学习。我们将使用gitshell下载线上的版本仓库到本地，如果对本教程有疑惑可以联系站长哦。
教程【三】
今天我们来学习如何使用gitshell将线上的版本仓库下载到本地。我们为什么要把线上的仓库下载到本地，通常情况下是我们想要参与别人的项目。
github上面有一个项目：，点击访问它。
现在我们想要参与这个项目，需要进行以下步骤：
一、访问上面的链接，点击fork按钮，
二、现在spoon-knife项目已经添加到你的线上版本仓库中了，我们要下载它。打开gitshell，输入https://github.com/d1php/Spoon-Knife.git，注意这里的d1php应该是你注册时的昵称，在此使用了站长的帐号。
三、前两节我们把版本仓库建立在了D盘根目录，因此这里默认是在D盘目录只想的shell，进入D盘，会发现多了一个spoon-knife目录，线上的源码已经下载下来了。
四、输入cd spoon-knife
五、输入git remote add upstream https://github.com/octocat/Spoon-Knife.git，这里我们使用的是原项目的地址，确保我们可以随时跟踪到原项目
六、输入git fetch upstream，获取原项目最新的与你本地版本库不同的修改，但是不修改你的本地文件
好了，如何将线上仓库下载到本地就学习到这里，下节课我们学习如何建立版本分支。
教程【四】
学习，贵在持之以恒！欢迎大家跟站长继续学习github的使用，今天我们将学习如何使用 gitshell建立版本分支。如果你想要在原项目的基础上尝试一些新的思路或者开发新功能、修改等等，你可以建立原项目的一个分支，这样当进行修改时原 来的代码是不会受到影响的。我们前几节课建立一个test版本库，今天我们来为它建立 一个分支。
一、打开gitshell，输入 cd test，进入本地的test版本库
二、输入git branch testbranch
三、输入git checkout testbranch，将testbranch分支设置为当前工作分支
四、输入git add ./，将test目录的所有文件添加至上传队列
五、输入git commit -m 'newbranch'，缓存提交
六、输入git remote add origin https://github.com/d1php/test.git，配置上传目标仓库
七、输入git push -u origin testbranch，将文件上传到分支
然后访问：，会发现多出了一个分支testbranch！
怎么样，今天的学习很轻松吧。明天我们将学习如何使用github图像界面将线上仓库中有改动的文件下载到本地，或者称之为“版本同步”。
教程【五】
今天我们学习如何使用github图形界面来让我们本地的版本仓库和线上的仓库保持一致，或者说如何把线上仓库中有改动的文件下载到本地。
一、首先，我们访问。还记得我们在第一节课建立的hello.txt文件吗？如下图所示：
二、双击该文件，来到下图所示的界面：
三、点击edit按钮，并对文本进行一些修改，如下图所示:
四、编辑完之后，点击页面最下方的commit changes按钮：
五、打开github,如下图所示：
六、点击右边的箭头，打开本地仓库，如下图所示：
七、github会自动读出最新的修改，并且上端会出现一个蓝色sync【sync是同步的意思】按钮。如果你没有看见蓝色的图标，可以点击F5刷新界面。现在我们点击sync按钮，这样github会将线上有改动的文件下载到本地，如下图所示：
下载玩之后，蓝色的sync会变成灰色的in sync，这说明最新的文件已经下载到本地的仓库了，去检查一下吧！怎么样，没错吧。
感谢大家跟着站长进行了5天的学习，明天我们将继续学习github图形界面的使用，我们将学习如何使用github图形界面来建立一个版本库的分支。
教程【六】
学习，有时候就是一个漫长而枯燥的过程，但是当你走到终点时，回过头来再看看这段路，则会露出满不在乎的表情！今天我们学习如何使用gitgui来建立版本分支。
一、打开github图形界面,点击蓝色箭头打开我们之前建立的test仓库，如下图所示：
二、在打开的界面中，点击master按钮，如下图所示：
三、在弹出的窗口中，点击manage按钮，如下图所示：
四、进入分支界面，把鼠标移动到master分支上，并点击加号，如下图所示：
这会以master分支的文件为蓝本建立一个新的分支。
五、点击加号后，会弹出输入框，输入新分支的名称，并点击BRANCH按钮创建分支，如下图所示：
站长输入是testbranch2，因为之前用gitshell建立一个testbranch分支。
六、创建完之后，会在当前页面显示新分支，如下图所示：
点击publish按钮，将新分支发布到线上的git仓库中。发布完之后，publish按钮会变成unpublish，说明分支已经上传到线上的仓库中了。
七、访问，查看分支情况，如下图所示：
我们会发现，尽管显示有3个分支，但是在页面上只呈现了2个，新建立的没有出现，这是因为默认是读取master分支以及没有与master整合的 分支，而我们刚才创建的testbranch2分支是以master为蓝本，因此它们之间没有任何不同，所以才没有显示。我们点击branch下拉按钮， 可以看见我们刚才建立的testbranch2分支。
八、点击上图中的testbranch2按钮，进入下图所示界面：
现在，我们可以在线上的版本仓库中看见我们刚才建立的分支了。
九、现在我们回到第六步的github图形界面，把鼠标移动到新建分支testbranch2上面，如下图所示：
上图中第一个红圈包围的图标是用来删除分支的，它将同时删除本地和线上仓库的分支；第二个红圈仅仅删除线上仓库中的分支，本地分支会被保留。现在我们，点击第一个红圈包围的图标，将本地分支和线上分支同时删除。
十、访问，我们会发现刚才建立的testbranch2分支已经被删除了，gitgui中也不再显示该分支了。
ok，到此我们就学会了如何使用github图形界面创建、发布、删除分支，下节课我们将学习如何使用github图形界面对分支版本进行操作。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具GitHub 上的 12 个骚操作5 months ago#9 GitHub 上的 project board我总是用 Jira 做大项目，独立项目用 Trello，这两者我都很喜欢。后来我知道，GitHub 也有类似的 project board：我个人为了方便把它们都添加为 note。board 极为方便的帮助你做仓库管理。你可以点击右上角 Add Cards 来添加东西。这里有些特殊语法方便搜索，比如： is:pr is:open，你就可以把任何公开的 PR 拖到 board 上。更多语法可以参考
。你也可以把现存的 note 转化为 issue。你也可以选择 issue 直接添加到 projects 。这些意味着，从现在开始，你可以明确责任制度，每一行代码的分配都可以在 GitHub 上的 Project board 上完成而不用去 Jira 或者 Trello 上。不过它也有些缺点，比如功能比较少。你也可以试试 ZenHub，它有效的扩展 GitHub。更多关于 board 的问题可以访问：.#10 GitHub WiKiGitHub WiKi 能够帮助我们处理非结构化的页面集合，就像维基百科那样。我自己 NodeJS docs 就被我弄成 wiki 的样子。几个页面，然后自定义侧边栏。具体方法网上很多，我的页面可以供你一下。建议：如果你有个特别长的单页面 README.md 文件，并且想和其他人有所区别，你可以试试这种形式。#11 GitHub Pages（JekyII）你可能已经知道了能使用 GitHub Pages 来托管静态网站。那本条就特别介绍一下如何使用 JekyII 来构建站点。以最简单的方式，GitHub Pages + JekyII 将以最漂亮的主题来呈现你的 README.md，例如，你可以看一下
的自述文件。在 GitHub 的 my site 中，点击 setting，打开 GitHub Pages，选择一个 JekyII 主题就会得到一个
：它的优点是：轻量级网站，响应速度快网站更安全，无数据库，无动态数据无需通入过多精力维护注意，他需要 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() {
&div dangerouslySetInnerHTML={{__html: marked(this.state.markdown)}} /&
（ 这个文件夹是储存我的 markdown）下面这段代码是上面组件的示例：const Page = () =& (
&div className="page"&
&div className="about-us"&
&Markdown url="about-us.md" /&
&div className="disclaimer"&
&p&A very important disclaimer:&/p&
&Markdown url="disclaimers/home-page-disclaimer.md" /&
所以现在 GitHub 也是你的 CMS，无论你想要样大小的文字都可以。推荐一个 GitHub 工具 它可以让你在看任何仓库时，获得一个左边的树状图。以上。希望能够对你有所帮助，have a nice day！原文：日报延伸阅读：欢迎关注专栏「」，每天导读三篇英文，价值、思考、共鸣。316收藏分享举报文章被以下专栏收录每天为 Makers 导读三篇优质英文文章{&debug&:false,&apiRoot&:&&,&paySDK&:&https:\u002F\u002Fpay.zhihu.com\u002Fapi\u002Fjs&,&wechatConfigAPI&:&\u002Fapi\u002Fwechat\u002Fjssdkconfig&,&name&:&production&,&instance&:&column&,&tokens&:{&X-XSRF-TOKEN&:null,&X-UDID&:null,&Authorization&:&oauth c3cef7c66aa9e6a1e3160e20&}}{&database&:{&Post&:{&&:{&isPending&:false,&contributes&:[{&sourceColumn&:{&lastUpdated&:,&description&:&简介：每日导读（或翻译）三篇优质英文文章，内容 80% 涉及硅谷\u002F编程\u002F科技\u002F，期待共同成长。&,&permission&:&COLUMN_PUBLIC&,&memberId&:70710,&contributePermission&:&COLUMN_PUBLIC&,&translatedCommentPermission&:&all&,&canManage&:true,&intro&:&每天为 Makers 导读三篇优质英文文章&,&urlToken&:&jiguang-daily&,&id&:18268,&imagePath&:&4ccdd.jpeg&,&slug&:&jiguang-daily&,&applyReason&:&0&,&name&:&极光日报&,&title&:&极光日报&,&url&:&https:\u002F\u002Fzhuanlan.zhihu.com\u002Fjiguang-daily&,&commentPermission&:&COLUMN_ALL_CAN_COMMENT&,&canPost&:true,&created&:,&state&:&COLUMN_NORMAL&,&followers&:31820,&avatar&:{&id&:&4ccdd&,&template&:&https:\u002F\u002Fpic1.zhimg.com\u002F{id}_{size}.jpg&},&activateAuthorRequested&:false,&following&:false,&imageUrl&:&https:\u002F\u002Fpic1.zhimg.com\u002F4ccdd_l.jpg&,&articlesCount&:1302},&state&:&accepted&,&targetPost&:{&titleImage&:&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-e2bb1bfa1b6_r.jpg&,&lastUpdated&:,&imagePath&:&v2-e2bb1bfa1b6.jpg&,&permission&:&ARTICLE_PUBLIC&,&topics&:[5],&summary&:&简评：解放生产力的，GitHub 使用指南。#1 在 Github 上编辑代码我要先说一个很多人都知道的事儿。当你使用 GitHub，看一些文件（任何的文本文件或者仓库），能看到一个顶部右侧有一个小铅笔图标。点击即可编辑文档。完成后，按照提示点击「\u003Cb\u003EPropose file ch…\u003C\u002Fb\u003E&,&copyPermission&:&ARTICLE_COPYABLE&,&translatedCommentPermission&:&all&,&likes&:0,&origAuthorId&:0,&publishedTime&:&T20:53:23+08:00&,&sourceUrl&:&&,&urlToken&:,&id&:3898023,&withContent&:false,&slug&:,&bigTitleImage&:false,&title&:&GitHub 上的 12 个骚操作&,&url&:&\u002Fp\u002F&,&commentPermission&:&ARTICLE_ALL_CAN_COMMENT&,&snapshotUrl&:&&,&created&:,&comments&:0,&columnId&:0,&content&:&&,&parentId&:0,&state&:&ARTICLE_PUBLISHED&,&imageUrl&:&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-e2bb1bfa1b6_r.jpg&,&author&:{&bio&:&搬运工&,&isFollowing&:false,&hash&:&fd2c36fe6bfd4ed032b3ee&,&uid&:804200,&isOrg&:false,&slug&:&McDoge&,&isFollowed&:false,&description&:&弱小和无知不是生存的障碍，傲慢才是。| 别做梦了，做事儿。 | 某非知名大号被封后的第N个小号 | 我已委托“维权骑士”（http:\u002F\u002Frightknights.com）为我的文章进行维权行动&,&name&:&园长&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002FMcDoge&,&avatar&:{&id&:&v2-e735dbd7f2cb14d1dc91614ad3fba367&,&template&:&https:\u002F\u002Fpic1.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},&memberId&:,&excerptTitle&:&&,&voteType&:&ARTICLE_VOTE_CLEAR&},&id&:814684}],&title&:&GitHub 上的 12 个骚操作&,&author&:&McDoge&,&content&:&\u003Cblockquote\u003E简评：解放生产力的，GitHub 使用指南。\u003C\u002Fblockquote\u003E\u003Ch2\u003E#1 在 Github 上编辑代码\u003C\u002Fh2\u003E\u003Cp\u003E我要先说一个很多人都知道的事儿。\u003C\u002Fp\u003E\u003Cp\u003E当你使用 GitHub，看一些文件（任何的文本文件或者仓库），能看到一个顶部右侧有一个小铅笔图标。点击即可编辑文档。完成后，按照提示点击「\u003Cb\u003EPropose file change\u003C\u002Fb\u003E」，GitHub 会为你 fork 这个仓库并创建一个 pull request。\u003C\u002Fp\u003E\u003Cp\u003E很帅吧，GitHub 为你创建了一个分支。\u003C\u002Fp\u003E\u003Cp\u003E不需要 fork \u002F pull \u002F 改变 locally \u002F push \u002F 创建 PR，只需点击一下，就可以创建分支。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-af0cdb12c04e156_b.jpg\& data-rawwidth=\&800\& data-rawheight=\&811\& class=\&origin_image zh-lightbox-thumb\& width=\&800\& data-original=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-af0cdb12c04e156_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='800'%20height='811'&&\u002Fsvg&\& data-rawwidth=\&800\& data-rawheight=\&811\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&800\& data-original=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-af0cdb12c04e156_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-af0cdb12c04e156_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E这对于改一些排版错误或者防恶意篡改是很有帮助的。\u003C\u002Fp\u003E\u003Ch2\u003E＃2 粘贴图像\u003C\u002Fh2\u003E\u003Cp\u003E对于 issue 和 comment，你还可以直接粘贴图片，当你粘贴时图片会被上传至云端，然后以 MarkDown 格式显示。\u003C\u002Fp\u003E\u003Cp\u003E非常简洁。\u003C\u002Fp\u003E\u003Ch2\u003E＃3 格式化代码\u003C\u002Fh2\u003E\u003Cp\u003E如果你想写一个 code block，你可以在开始处写三个反引号，然后 GitHub 会试图猜出你在写什么语言。\u003C\u002Fp\u003E\u003Cp\u003E但是如果你发布如 Vue、Typescript、JSX 这样的语言，你可以明确写出来，以获取正确的高亮。\u003C\u002Fp\u003E\u003Cp\u003E下图第一行使用了 \u003Cu\u003E```jsx\u003C\u002Fu\u003E：\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-c67b7cde8c29f98bd2b8_b.jpg\& data-rawwidth=\&402\& data-rawheight=\&272\& class=\&content_image\& width=\&402\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='402'%20height='272'&&\u002Fsvg&\& data-rawwidth=\&402\& data-rawheight=\&272\& class=\&content_image lazy\& width=\&402\& data-actualsrc=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-c67b7cde8c29f98bd2b8_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E片段呈现：\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-16739ccfe6d98b74bd4e7ddd0c68886d_b.jpg\& data-rawwidth=\&431\& data-rawheight=\&232\& class=\&origin_image zh-lightbox-thumb\& width=\&431\& data-original=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-16739ccfe6d98b74bd4e7ddd0c68886d_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='431'%20height='232'&&\u002Fsvg&\& data-rawwidth=\&431\& data-rawheight=\&232\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&431\& data-original=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-16739ccfe6d98b74bd4e7ddd0c68886d_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-16739ccfe6d98b74bd4e7ddd0c68886d_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E（这可以扩展到 gist，顺便一提，如果你给了 gist 定义成 .jsx 扩展名，那么你会得到 JSX 的高亮）\u003C\u002Fp\u003E\u003Cp\u003EGithub \u003Ca href=\&https:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fgithub.com\u002Fgithub\u002Flinguist\u002Fblob\u002Ffc1404985abb95d5bc33a0ebac3c252e\u002Fvendor\u002FREADME.md\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E支持语言列表\u003C\u002Fa\u003E\u003C\u002Fp\u003E\u003Ch2\u003E#4 使用魔术词在 PR 中关闭 issue\u003C\u002Fh2\u003E\u003Cp\u003E比如你在创建一个 pull request 去修复 issue #234。那你可在 PR 输入「fixes #234」，就可以自动合并 PR 并关闭这个 issue，是不是很酷。\u003C\u002Fp\u003E\u003Cp\u003E（提交信息里可以使用 fix\u002Ffixes\u002Ffixed , close\u002Fcloses\u002Fclosed 或者 resolve\u002Fresolves\u002Fresolved等关键词，更多请查看 \u003Ca href=\&https:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fhelp.github.com\u002Farticles\u002Fclosing-issues-using-keywords\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Ehelp\u003C\u002Fa\u003E）\u003C\u002Fp\u003E\u003Ch2\u003E#5 链接到 comment\u003C\u002Fh2\u003E\u003Cp\u003E你甚至想链接到一个特定的评论，但无法做到？我在这里告诉你，点击名字旁边的日期\u002F时间就万事大吉。\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-ad2ab85bebad4fb0d901a_b.jpg\& data-rawwidth=\&468\& data-rawheight=\&143\& class=\&origin_image zh-lightbox-thumb\& width=\&468\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-ad2ab85bebad4fb0d901a_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='468'%20height='143'&&\u002Fsvg&\& data-rawwidth=\&468\& data-rawheight=\&143\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&468\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-ad2ab85bebad4fb0d901a_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-ad2ab85bebad4fb0d901a_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Ch2\u003E#6 链接到代码\u003C\u002Fh2\u003E\u003Cp\u003E既然能链接到 comment，那你想问能不能链接到代码上？可以的。\u003C\u002Fp\u003E\u003Cp\u003E试试这个操作：在查看文件时，点击代码边上的行数。\u003C\u002Fp\u003E\u003Cp\u003E哇喔，你看到了么？URL 随之更新。如果你按住 Shift 并单击另一个行号，URL 会再次更新，并且高亮这两个行数之间的所有代码段。\u003C\u002Fp\u003E\u003Cp\u003E你现在可以分享这个 URL 了，但等等，这些还是当前分支，如果文件变化了呢？你需要一个永久链接。\u003C\u002Fp\u003E\u003Cp\u003E我比较懒，但是下面这一个截图已经能够表达如何获取永久链接了（Copy Permalink）：\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-3bc2c2e0c16aba73e3a7ee_b.jpg\& data-rawwidth=\&800\& data-rawheight=\&366\& class=\&origin_image zh-lightbox-thumb\& width=\&800\& data-original=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-3bc2c2e0c16aba73e3a7ee_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='800'%20height='366'&&\u002Fsvg&\& data-rawwidth=\&800\& data-rawheight=\&366\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&800\& data-original=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-3bc2c2e0c16aba73e3a7ee_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-3bc2c2e0c16aba73e3a7ee_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Ch2\u003E##7 像使用命令行一样使用 GitHub URL\u003C\u002Fh2\u003E\u003Cp\u003E既然说到了 URL，那么久接着聊一下。使用 UI 浏览 GitHub 很方面也很好，不过很多时候最快的方式是使用 URL 来浏览。举个例子，如果我想跳转到正在处理的分支上，并想查看分支和 master 的差异，我可以在我的仓库名后面输入 \u002Fcompare\u002Fbranch-name。\u003C\u002Fp\u003E\u003Cp\u003E下简单说，查看 master 和分支的区别，如下图：\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-4f076efd1ca5b02106ae_b.jpg\& data-rawwidth=\&951\& data-rawheight=\&703\& class=\&origin_image zh-lightbox-thumb\& width=\&951\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-4f076efd1ca5b02106ae_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='951'%20height='703'&&\u002Fsvg&\& data-rawwidth=\&951\& data-rawheight=\&703\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&951\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-4f076efd1ca5b02106ae_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-4f076efd1ca5b02106ae_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E可以在名字后面再加上...XXX（分支名）比如我写的 mkdocs...pre-release，如下图：\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-fea963b80ac6_b.jpg\& data-rawwidth=\&1007\& data-rawheight=\&732\& class=\&origin_image zh-lightbox-thumb\& width=\&1007\& data-original=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-fea963b80ac6_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='1007'%20height='732'&&\u002Fsvg&\& data-rawwidth=\&1007\& data-rawheight=\&732\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&1007\& data-original=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-fea963b80ac6_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-fea963b80ac6_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E这一步你可以配合键盘快捷键，Ctrl + L 或者 cmd + L，可以让光标直接移动到 URL 中（最起码 chrome 是这样）。这些加一起能提高生产力。\u003C\u002Fp\u003E\u003Cp\u003E专业提示：用键盘移动 chrome URL 上的某一条网页记录，使用 Shift+Delete 或 Shift+fn+Delete 来删除某一条记录。（比如合并了分支之后就可以删除了）\u003C\u002Fp\u003E\u003Ch2\u003E#8 在 issue 中创建 list\u003C\u002Fh2\u003E\u003Cp\u003E你想在你的 issue中看到可多选的 list 么？\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-e5dacaf4cf_b.jpg\& data-rawwidth=\&511\& data-rawheight=\&316\& class=\&origin_image zh-lightbox-thumb\& width=\&511\& data-original=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-e5dacaf4cf_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='511'%20height='316'&&\u002Fsvg&\& data-rawwidth=\&511\& data-rawheight=\&316\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&511\& data-original=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-e5dacaf4cf_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-e5dacaf4cf_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E当你查看问题时，你想不想让它变成 2 of 5 这样的形式。\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-d3a59d129c6e6ac75adbe95abe38ef37_b.jpg\& data-rawwidth=\&491\& data-rawheight=\&235\& class=\&origin_image zh-lightbox-thumb\& width=\&491\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-d3a59d129c6e6ac75adbe95abe38ef37_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='491'%20height='235'&&\u002Fsvg&\& data-rawwidth=\&491\& data-rawheight=\&235\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&491\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-d3a59d129c6e6ac75adbe95abe38ef37_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-d3a59d129c6e6ac75adbe95abe38ef37_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E如果想，你可以在 issue 中使用以下句法：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E- [ ] Screen width (integer)\n - [x] Service worker support\n - [x] Fetch support\n - [ ] CSS flexbox support\n - [ ] Custom elements\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Ch2\u003E#9 GitHub 上的 project board\u003C\u002Fh2\u003E\u003Cp\u003E我总是用 Jira 做大项目，独立项目用 Trello，这两者我都很喜欢。\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-d826b30affee35_b.jpg\& data-rawwidth=\&1000\& data-rawheight=\&569\& class=\&origin_image zh-lightbox-thumb\& width=\&1000\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-d826b30affee35_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='1000'%20height='569'&&\u002Fsvg&\& data-rawwidth=\&1000\& data-rawheight=\&569\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&1000\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-d826b30affee35_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-d826b30affee35_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E后来我知道，GitHub 也有类似的 project board：\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-6df9ece95a6a289baff2d8_b.jpg\& data-rawwidth=\&1000\& data-rawheight=\&562\& class=\&origin_image zh-lightbox-thumb\& width=\&1000\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-6df9ece95a6a289baff2d8_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='1000'%20height='562'&&\u002Fsvg&\& data-rawwidth=\&1000\& data-rawheight=\&562\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&1000\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-6df9ece95a6a289baff2d8_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-6df9ece95a6a289baff2d8_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E我个人为了方便把它们都添加为 note。board 极为方便的帮助你做仓库管理。\u003C\u002Fp\u003E\u003Cp\u003E你可以点击右上角 Add Cards 来添加东西。这里有些特殊语法方便搜索，比如： is:pr is:open，你就可以把任何公开的 PR 拖到 board 上。\u003C\u002Fp\u003E\u003Cp\u003E更多语法可以参考 \u003Ca href=\&https:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fhelp.github.com\u002Farticles\u002Fsearching-issues-and-pull-requests\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Esearch syntax\u003C\u002Fa\u003E 。\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-a9c3e2bd7f568cdb7f2a3_b.jpg\& data-rawwidth=\&1000\& data-rawheight=\&296\& class=\&origin_image zh-lightbox-thumb\& width=\&1000\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-a9c3e2bd7f568cdb7f2a3_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='1000'%20height='296'&&\u002Fsvg&\& data-rawwidth=\&1000\& data-rawheight=\&296\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&1000\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-a9c3e2bd7f568cdb7f2a3_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-a9c3e2bd7f568cdb7f2a3_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E你也可以把现存的 note 转化为 issue。\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-a539bb7c72_b.jpg\& data-rawwidth=\&332\& data-rawheight=\&325\& class=\&content_image\& width=\&332\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='332'%20height='325'&&\u002Fsvg&\& data-rawwidth=\&332\& data-rawheight=\&325\& class=\&content_image lazy\& width=\&332\& data-actualsrc=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-a539bb7c72_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E你也可以选择 issue 直接添加到 projects 。\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-9764923dbc48eef496281_b.jpg\& data-rawwidth=\&2134\& data-rawheight=\&1310\& class=\&origin_image zh-lightbox-thumb\& width=\&2134\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-9764923dbc48eef496281_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='2134'%20height='1310'&&\u002Fsvg&\& data-rawwidth=\&2134\& data-rawheight=\&1310\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&2134\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-9764923dbc48eef496281_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-9764923dbc48eef496281_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E这些意味着，从现在开始，你可以明确责任制度，每一行代码的分配都可以在 GitHub 上的 Project board 上完成而不用去 Jira 或者 Trello 上。\u003C\u002Fp\u003E\u003Cp\u003E不过它也有些缺点，比如功能比较少。你也可以试试 ZenHub，它有效的扩展 GitHub。\u003C\u002Fp\u003E\u003Cp\u003E更多关于 board 的问题可以访问：\u003Ca href=\&https:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fhelp.github.com\u002Farticles\u002Ftracking-the-progress-of-your-work-with-project-boards\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EGitHub help on Projects\u003C\u002Fa\u003E.\u003C\u002Fp\u003E\u003Ch2\u003E#10 GitHub WiKi\u003C\u002Fh2\u003E\u003Cp\u003EGitHub WiKi 能够帮助我们处理非结构化的页面集合，就像维基百科那样。我自己 NodeJS docs 就被我弄成 wiki 的样子。几个页面，然后自定义侧边栏。具体方法网上很多，我的页面可以供你\u003Ca href=\&https:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fgithub.com\u002Fdavidgilbertson\u002Fabout-github\u002Fwiki\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E参考\u003C\u002Fa\u003E一下。\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-10d954db3d5e6b52f89cc_b.jpg\& data-rawwidth=\&800\& data-rawheight=\&393\& class=\&origin_image zh-lightbox-thumb\& width=\&800\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-10d954db3d5e6b52f89cc_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='800'%20height='393'&&\u002Fsvg&\& data-rawwidth=\&800\& data-rawheight=\&393\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&800\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-10d954db3d5e6b52f89cc_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-10d954db3d5e6b52f89cc_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E建议：如果你有个特别长的单页面 README.md 文件，并且想和其他人有所区别，你可以试试这种形式。\u003C\u002Fp\u003E\u003Ch2\u003E#11 GitHub Pages（JekyII）\u003C\u002Fh2\u003E\u003Cp\u003E你可能已经知道了能使用 GitHub Pages 来托管静态网站。那本条就特别介绍一下如何使用 JekyII 来构建站点。\u003C\u002Fp\u003E\u003Cp\u003E以最简单的方式，GitHub Pages + JekyII 将以最漂亮的主题来呈现你的 README.md，例如，你可以看一下 \u003Ca href=\&https:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fgithub.com\u002Fdavidgilbertson\u002Fabout-github\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Eabout-github\u003C\u002Fa\u003E 的自述文件。\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic7.zhimg.com\u002Fv2-c835fdbaa39ffee1c75d736_b.jpg\& data-rawwidth=\&1000\& data-rawheight=\&630\& class=\&origin_image zh-lightbox-thumb\& width=\&1000\& data-original=\&https:\u002F\u002Fpic7.zhimg.com\u002Fv2-c835fdbaa39ffee1c75d736_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='1000'%20height='630'&&\u002Fsvg&\& data-rawwidth=\&1000\& data-rawheight=\&630\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&1000\& data-original=\&https:\u002F\u002Fpic7.zhimg.com\u002Fv2-c835fdbaa39ffee1c75d736_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic7.zhimg.com\u002Fv2-c835fdbaa39ffee1c75d736_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E在 GitHub 的 my site 中，点击 setting，打开 GitHub Pages，选择一个 JekyII 主题\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-b53f404bbb4d7c48db01c4f79a4ce077_b.jpg\& data-rawwidth=\&759\& data-rawheight=\&408\& class=\&origin_image zh-lightbox-thumb\& width=\&759\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-b53f404bbb4d7c48db01c4f79a4ce077_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='759'%20height='408'&&\u002Fsvg&\& data-rawwidth=\&759\& data-rawheight=\&408\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&759\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-b53f404bbb4d7c48db01c4f79a4ce077_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-b53f404bbb4d7c48db01c4f79a4ce077_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E就会得到一个 \u003Ca href=\&https:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fdavidgilbertson.github.io\u002Fabout-github\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EJekyll\u003C\u002Fa\u003E \u003Ca href=\&https:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fdavidgilbertson.github.io\u002Fabout-github\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E主题页面\u003C\u002Fa\u003E：\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-e92b90fbebddeb01b235_b.jpg\& data-rawwidth=\&1000\& data-rawheight=\&630\& class=\&origin_image zh-lightbox-thumb\& width=\&1000\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-e92b90fbebddeb01b235_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='1000'%20height='630'&&\u002Fsvg&\& data-rawwidth=\&1000\& data-rawheight=\&630\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&1000\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-e92b90fbebddeb01b235_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-e92b90fbebddeb01b235_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E它的优点是：\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003E轻量级网站，响应速度快\u003C\u002Fli\u003E\u003Cli\u003E网站更安全，无数据库，无动态数据\u003C\u002Fli\u003E\u003Cli\u003E无需通入过多精力维护\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Cp\u003E注意，他需要 Ruby 在本地运行，Mac 自带，Windows 用户自行安装。\u003C\u002Fp\u003E\u003Ch2\u003E#12 把 GitHub 当 CMS 用\u003C\u002Fh2\u003E\u003Cp\u003E你的网站需要显示一些文字，但是你还不想直接放在 HTML 里面，那你可以把 GitHub 作为你储存内容的一个地方。这样，就可以让任何一个非程序员通过修改 Markdown 来修改 HTML 网页的内容。\u003C\u002Fp\u003E\u003Cp\u003E我的方法是：在你的 GitHub 仓库中使用 markdown 文件来保存文本。在你网站的前端用一个组件来抓取这些文本并呈现在网页上。\u003C\u002Fp\u003E\u003Cp\u003E我是玩 React 的，这里有个&Markdown&组件，用以抓取，解析并呈现到 HTML 上。\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-js\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&kr\&\u003Eclass\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EMarkdown\u003C\u002Fspan\u003E \u003Cspan class=\&kr\&\u003Eextends\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EReact\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EComponent\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n \u003Cspan class=\&nx\&\u003Econstructor\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eprops\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n \u003Cspan class=\&kr\&\u003Esuper\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eprops\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E);\u003C\u002Fspan\u003E\u003Cspan class=\&kr\&\u003Eclass\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EMarkdown\u003C\u002Fspan\u003E \u003Cspan class=\&kr\&\u003Eextends\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EReact\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EComponent\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Econstructor\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eprops\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&kr\&\u003Esuper\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eprops\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E);\u003C\u002Fspan\u003E\n
\u003Cspan class=\&c1\&\u003E\u002F\u002F replace with your URL, obviously\u003C\u002Fspan\u003E\n
\u003Cspan class=\&k\&\u003Ethis\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EbaseUrl\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&s1\&\u003E'https:\u002F\u002Fraw.githubusercontent.com\u002Fdavidgilbertson\u002Fabout-github\u002Fmaster\u002Ftext-snippets'\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E;\u003C\u002Fspan\u003E\n
\u003Cspan class=\&k\&\u003Ethis\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Estate\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Emarkdown\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&s1\&\u003E''\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E};\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n\n
\u003Cspan class=\&nx\&\u003EcomponentDidMount\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E()\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Efetch\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&sb\&\u003E`\u003C\u002Fspan\u003E\u003Cspan class=\&si\&\u003E${\u003C\u002Fspan\u003E\u003Cspan class=\&k\&\u003Ethis\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EbaseUrl\u003C\u002Fspan\u003E\u003Cspan class=\&si\&\u003E}\u003C\u002Fspan\u003E\u003Cspan class=\&sb\&\u003E\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&si\&\u003E${\u003C\u002Fspan\u003E\u003Cspan class=\&k\&\u003Ethis\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eprops\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eurl\u003C\u002Fspan\u003E\u003Cspan class=\&si\&\u003E}\u003C\u002Fspan\u003E\u003Cspan class=\&sb\&\u003E`\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Ethen\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eresponse\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=&\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Eresponse\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Etext\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E())\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Ethen\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E((\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Emarkdown\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=&\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&k\&\u003Ethis\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EsetState\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E({\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Emarkdown\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E});\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E});\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n\n
\u003Cspan class=\&nx\&\u003Erender\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E()\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&k\&\u003Ereturn\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\n
\u003Cspan class=\&o\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Ediv\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EdangerouslySetInnerHTML\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E{{\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003E__html\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Emarked\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&k\&\u003Ethis\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Estate\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Emarkdown\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)}}\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E\u002F&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E);\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E（\u003Cu\u003E\u003Ca href=\&https:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fgithub.com\u002Fdavidgilbertson\u002Fabout-github\u002Ftree\u002Fmaster\u002Ftext-snippets\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E\u002Ftext-snippets\u003C\u002Fa\u003E\u003C\u002Fu\u003E 这个文件夹是储存我的 markdown）\u003C\u002Fp\u003E\u003Cp\u003E下面这段代码是上面组件的示例：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-js\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&kr\&\u003Econst\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EPage\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E()\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=&\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\n
\u003Cspan class=\&o\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Ediv\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EclassName\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&page\&\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&o\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Ediv\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EclassName\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&about-us\&\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&o\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EMarkdown\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Eurl\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&about-us.md\&\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E\u002F&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&o\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&err\&\u003E\u002Fdiv&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&o\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Ediv\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EclassName\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&disclaimer\&\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&o\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Ep\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EA\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Every\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Eimportant\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Edisclaimer\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:&\u003C\u002Fspan\u003E\u003Cspan class=\&err\&\u003E\u002Fp&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&o\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EMarkdown\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Eurl\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&disclaimers\u002Fhome-page-disclaimer.md\&\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E\u002F&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&o\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&err\&\u003E\u002Fdiv&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&o\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&err\&\u003E\u002Fdiv&\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E);\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E所以现在 GitHub 也是你的 CMS，无论你想要样大小的文字都可以。\u003C\u002Fp\u003E\u003Ch2\u003E推荐一个 GitHub 工具\u003C\u002Fh2\u003E\u003Cp\u003E\u003Ca href=\&https:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Foctotree\u002Fbkhaagjahfmjljalopjnoealnfndnagc%3Fhl%3Den-US\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EOctotree Chrome extension\u003C\u002Fa\u003E \u003C\u002Fp\u003E\u003Cp\u003E它可以让你在看任何仓库时，获得一个左边的树状图。\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-c3e6fa6d695fb633dc95d1abd9965100_b.jpg\& data-rawwidth=\&1000\& data-rawheight=\&646\& class=\&origin_image zh-lightbox-thumb\& width=\&1000\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-c3e6fa6d695fb633dc95d1abd9965100_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='1000'%20height='646'&&\u002Fsvg&\& data-rawwidth=\&1000\& data-rawheight=\&646\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&1000\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-c3e6fa6d695fb633dc95d1abd9965100_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-c3e6fa6d695fb633dc95d1abd9965100_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E以上。\u003C\u002Fp\u003E\u003Cp\u003E希望能够对你有所帮助，have a nice day！\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E原文：\u003Ca href=\&https:\u002F\u002Flink.zhihu.com\u002F?target=https%3A\u002F\u002Fhackernoon.com\u002F12-cool-things-you-can-do-with-github-f3e\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E12 cool things you can do with GitHub\u003C\u002Fa\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E日报延伸阅读：\u003Ca href=\&https:\u002F\u002Fzhuanlan.zhihu.com\u002Fp\u002F\& class=\&internal\&\u003EGithub | 程序员七大生产力工具\u003C\u002Fa\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E欢迎关注专栏「\u003Ca href=\&https:\u002F\u002Fzhuanlan.zhihu.com\u002Fjiguang-daily\& class=\&internal\&\u003E极光日报\u003C\u002Fa\u003E」，每天导读三篇英文，价值、思考、共鸣。\u003C\u002Fp\u003E\u003Cp\u003E\u003C\u002Fp\u003E&,&updated&:new Date(&T12:53:23.000Z&),&canComment&:false,&commentPermission&:&anyone&,&commentCount&:5,&collapsedCount&:0,&likeCount&:316,&state&:&published&,&isLiked&:false,&slug&:&&,&isTitleImageFullScreen&:false,&rating&:&none&,&titleImage&:&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-e2bb1bfa1b6_r.jpg&,&links&:{&comments&:&\u002Fapi\u002Fposts\u002F2Fcomments&},&reviewers&:[],&topics&:[{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&GitHub&},{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&编程&},{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&前端开发&}],&adminClosedComment&:false,&titleImageSize&:{&width&:1280,&height&:720},&href&:&\u002Fapi\u002Fposts\u002F&,&excerptTitle&:&&,&tipjarState&:&inactivated&,&annotationAction&:[],&sourceUrl&:&&,&pageCommentsCount&:5,&hasPublishingDraft&:false,&snapshotUrl&:&&,&publishedTime&:&T20:53:23+08:00&,&url&:&\u002Fp\u002F&,&lastestLikers&:[{&bio&:&专注Android开发&,&isFollowing&:false,&hash&:&42eff1cc9d&,&uid&:153900,&isOrg&:false,&slug&:&isanwenyu&,&isFollowed&:false,&description&:&&,&name&:&三文鱼&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fisanwenyu&,&avatar&:{&id&:&dfa28d0adda&,&template&:&https:\u002F\u002Fpic3.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&单纯的程序员&,&isFollowing&:false,&hash&:&b304e25932dad506109ceba24e698234&,&uid&:28,&isOrg&:false,&slug&:&avwu&,&isFollowed&:false,&description&:&https:\u002F\u002Fgithub.com\u002Favwo&,&name&:&aven wu&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Favwu&,&avatar&:{&id&:&v2-067ae0ee82d6a0be08a1a7903483ecbe&,&template&:&https:\u002F\u002Fpic2.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&学生&,&isFollowing&:false,&hash&:&69fdc70afdba6b3ee4666026&,&uid&:898600,&isOrg&:false,&slug&:&sleepwalker-53-74&,&isFollowed&:false,&description&:&&,&name&:&Sleepwalker&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fsleepwalker-53-74&,&avatar&:{&id&:&v2-12cd738ffba24dbb552ee1dc36fbef0f&,&template&:&https:\u002F\u002Fpic4.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&学而知之者&,&isFollowing&:false,&hash&:&d01b0cf8a53c55e0b3c097&,&uid&:08,&isOrg&:false,&slug&:&manloff&,&isFollowed&:false,&description&:&性非雅人，春花秋月，于我何有；身自俗子，夏风冬雪，非君所专。&,&name&:&进击的小白&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fmanloff&,&avatar&:{&id&:&v2-2b0b4ae2323af86cae6d7b2d8c6b1d8e&,&template&:&https:\u002F\u002Fpic1.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:null,&isFollowing&:false,&hash&:&b4caaa092e8cfaa9d99a8&,&uid&:44,&isOrg&:false,&slug&:&hugh-li&,&isFollowed&:false,&description&:&&,&name&:&hugh li&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fhugh-li&,&avatar&:{&id&:&da8e974dc&,&template&:&https:\u002F\u002Fpic4.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false}],&summary&:&\u003Cimg src=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-af0cdb12c04e156_200x112.jpg\& data-rawwidth=\&800\& data-rawheight=\&811\& class=\&origin_image inline-img zh-lightbox-thumb\& data-original=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-af0cdb12c04e156_r.jpg\&\u003E简评：解放生产力的，GitHub 使用指南。#1 在 Github 上编辑代码我要先说一个很多人都知道的事儿。当你使用 GitHub，看一些文件（任何的文本文件或者仓库），能看到一个顶部右侧有一个小铅笔图标。点击即可编辑文档。完成后，按照提示点击「\u003Cb\u003EPropose file ch…\u003C\u002Fb\u003E&,&reviewingCommentsCount&:0,&meta&:{&previous&:null,&next&:null},&annotationDetail&:null,&commentsCount&:5,&likesCount&:316,&FULLINFO&:true}},&User&:{&McDoge&:{&isFollowed&:false,&name&:&园长&,&headline&:&弱小和无知不是生存的障碍，傲慢才是。| 别做梦了，做事儿。 | 某非知名大号被封后的第N个小号 | 我已委托“维权骑士”（http:\u002F\u002Frightknights.com）为我的文章进行维权行动&,&avatarUrl&:&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-e735dbd7f2cb14d1dc91614ad3fba367_s.jpg&,&isFollowing&:false,&type&:&people&,&slug&:&McDoge&,&bio&:&搬运工&,&hash&:&fd2c36fe6bfd4ed032b3ee&,&uid&:804200,&isOrg&:false,&description&:&弱小和无知不是生存的障碍，傲慢才是。| 别做梦了，做事儿。 | 某非知名大号被封后的第N个小号 | 我已委托“维权骑士”（http:\u002F\u002Frightknights.com）为我的文章进行维权行动&,&badge&:{&identity&:null,&bestAnswerer&:null},&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002FMcDoge&,&avatar&:{&id&:&v2-e735dbd7f2cb14d1dc91614ad3fba367&,&template&:&https:\u002F\u002Fpic1.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false}},&Comment&:{},&favlists&:{}},&me&:{},&global&:{&experimentFeatures&:{&ge3&:&ge3_9&,&ge2&:&ge2_1&,&androidPassThroughPush&:&all&,&sEI&:&c&,&nwebQAGrowth&:&experiment&,&qawebRelatedReadingsContentControl&:&close&,&liveStore&:&ls_a2_b2_c1_f2&,&nwebSearch&:&nweb_search_heifetz&,&rt&:&y&,&isOffice&:&false&,&enableTtsPlay&:&post&,&newLiveFeedMediacard&:&new&,&newMobileAppHeader&:&true&,&hybridZhmoreVideo&:&yes&,&nwebGrowthPeople&:&default&,&nwebSearchSuggest&:&default&,&qrcodeLogin&:&qrcode&,&enableVoteDownReasonMenu&:&enable&,&isShowUnicomFreeEntry&:&unicom_free_entry_off&,&newMobileColumnAppheader&:&new_header&,&androidDbRecommendAction&:&open&,&biu&:&1&,&androidDbFeedHashTagStyle&:&button&,&appStoreRateDialog&:&close&,&default&:&None&,&isNewNotiPanel&:&no&,&zcmLighting&:&zcm&,&adR&:&b&,&wechatShareModal&:&wechat_share_modal_show&,&growthBanner&:&default&,&androidProfilePanel&:&panel_b&}},&columns&:{&next&:{}},&columnPosts&:{},&columnSettings&:{&colomnAuthor&:[],&uploadAvatarDetails&:&&,&contributeRequests&:[],&contributeRequestsTotalCount&:0,&inviteAuthor&:&&},&postComments&:{},&postReviewComments&:{&comments&:[],&newComments&:[],&hasMore&:true},&favlistsByUser&:{},&favlistRelations&:{},&promotions&:{},&switches&:{&couldSetPoster&:false},&draft&:{&titleImage&:&&,&titleImageSize&:{},&isTitleImageFullScreen&:false,&canTitleImageFullScreen&:false,&title&:&&,&titleImageUploading&:false,&error&:&&,&content&:&&,&draftLoading&:false,&globalLoading&:false,&pendingVideo&:{&resource&:null,&error&:null}},&drafts&:{&draftsList&:[],&next&:{}},&config&:{&userNotBindPhoneTipString&:{}},&recommendPosts&:{&articleRecommendations&:[],&columnRecommendations&:[]},&env&:{&edition&:{&baidu&:false,&yidianzixun&:false,&qqnews&:false},&isAppView&:false,&appViewConfig&:{&content_padding_top&:128,&content_padding_bottom&:56,&content_padding_left&:16,&content_padding_right&:16,&title_font_size&:22,&body_font_size&:16,&is_dark_theme&:false,&can_auto_load_image&:true,&app_info&:&OS=iOS&},&isApp&:false,&userAgent&:{&ua&:&Mozilla\u002F5.0 (compatible, MSIE 11, Windows NT 6.3; Trident\u002F7.0; rv:11.0) like Gecko&,&browser&:{&name&:&IE&,&version&:&11&,&major&:&11&},&engine&:{&version&:&7.0&,&name&:&Trident&},&os&:{&name&:&Windows&,&version&:&8.1&},&device&:{},&cpu&:{}}},&message&:{&newCount&:0},&pushNotification&:{&newCount&:0}}