一秒钟把Github项目变成前端网站

GitHub Pages大家可能都知道,常用的做法,是建立一个gh-pages的分支,通过setting里的设置的GitHub Pages模块可以自动创建该项目的网站。

这里经常遇到的痛点是,master遇到变更,经常需要去sync到gh-pages,特别是纯web前端项目,这样的痛点是非常地痛。

Github官方可能嗅觉到了该痛点,出了个master当作网站是选项,太有用了。

选择完master branch之后,master自动变成了网站。master所有的提交会自动更新到网站。

精准分享关键代码

比如你有一个文件里的某一行代码写得非常酷炫或者关键,想分享一下。

可以在url后面加上

#L行号

比如,点击下面这个url:

https://github.com/AlloyTeam/AlloyTouch/blob/master/alloy_touch.js#L240

你便会跳到alloy_touch.js的第240行。

那么问题来了?如果我是一段代码,即多行代码想分享呢?也很简单:url后面加上

#L开始行号-L结束行号

比如,AlloyTouch的运动缓动和逆向缓动函数如下面代码段所示:

https://github.com/AlloyTeam/AlloyTouch/blob/master/alloy_touch.js#L39-L45

其实也不用记忆你直接在网址后面操作,github自动会帮你生成url。比如你点击39行,url变成了

https://github.com/AlloyTeam/AlloyTouch/blob/master/alloy_touch.js#L39

再按住shift点击45行,url变成了

https://github.com/AlloyTeam/AlloyTouch/blob/master/alloy_touch.js#L39-L45

然后你这个url就可以复制分享出去了,点击这个url的人自动会跳到39行,并且39-45行高亮。

通过提交的msg自动关闭issues

比如有人提交了个issues https://github.com/AlloyTeam/AlloyTouch/issues/6

然后你去主干上改代码,改完之后提交填msg的时候,填入:

fix  https://github.com/AlloyTeam/AlloyTouch/issues/6

这个issues会自动被关闭。当然不仅仅是fix这个关键字。下面这些关键字也可以:

  • close
  • closes
  • closed
  • fixes
  • fixed
  • resolve
  • resolves
  • resolved

通过HTML方式嵌入Github

如下面所示,user和repo改成你想要展示的便可以

 <iframe src="//ghbtns.com/github-btn.html?user=alloyteam&repo=alloytouch&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>

插入之后你便可以看到这样的展示:

gitattributes设置项目语言

如上图所示,github会根据相关文件代码的数量来自动识别你这个项目是HTML项目还是Javascript项目。

这就带来了一个问题,比如AlloyTouch最开始被识别成HTML项目。

因为HTML例子比JS文件多。怎么办呢?gitattributes来帮助你搞定。在项目的根目录下添加如下.gitattributes文件便可,

https://github.com/AlloyTeam/AlloyTouch/blob/master/.gitattributes

里面的:

*.html linguist-language=JavaScript

主要意思是把所有html文件后缀的代码识别成js文件。

查看自己项目的访问数据

在自己的项目下,点击Graphs,然后再点击Traffic如下所示:

里面有Referring sites和Popular content的详细数据和排名。如:Referring sites

其中Referring sites代表大家都是从什么网站来到你的项目的,Popular content代表大家经常看你项目的哪些文件。

trending排行榜

上面教大家设置语言了,下面可以看看怎么查看某类型语言的每日排行榜。比如js每日排行榜:

https://github.com/trending/javascript?since=daily

https://github.com/trending/html?since=daily

https://github.com/trending/css?since=daily

Github推荐:https://github.com/explore

其他

  • issue中输入冒号 : 添加表情
  • 任意界面,shift + ?显示快捷键
  • issue中选中文字,R键快速引用

最后

好了,我就会这么多,也是我经常使用的技巧。欢迎补充实用的技巧~~我会持续更新上去...

我们团队的Github: http://alloyteam.github.io/

你必须收藏的Github技巧的更多相关文章

  1. 【转载】【收藏】Github上免费的编程教程【作者Victor Felder】

    原链接:https://github.com/EbookFoundation/free-programming-books/blob/master/free-programming-books-zh. ...

  2. 21个值得收藏的Javascript技巧

    1  Javascript数组转换为CSV格式 首先考虑如下的应用场景,有一个Javscript的字符型(或者数值型)数组,现在需要转换为以逗号分割的CSV格式文件.则我们可以使用如下的小技巧,代码如 ...

  3. Intellij IDEA神器值得收藏的小技巧

    概述 Intellij IDEA真是越用越觉得它强大,它总是在我们写代码的时候,不时给我们来个小惊喜.出于对Intellij IDEA的喜爱,我决定写一个与其相关的专栏或者系列,把一些好用的Intel ...

  4. 收藏CSS经典技巧

    一. CSS字体属性简写规则 一般用CSS设定字体属性是这样做的: font-weight: bold; font- style: italic; font-varient: small-caps;  ...

  5. 【github技巧2】下载包加速

    打开代下网站:https://g.widora.cn 直接输入     https开头的github地址 或需下载包地址的链接 获取链接 下载压缩包 备注:压缩包格式为tar,需要解压

  6. 良许Linux | Linux学习方法及学习资料汇总

    很多人想学习Linux,却不知道怎么着手,甚至不知道Linux有哪些方向,非常迷茫.基于此,我特地写了篇文章介绍Linux方向性问题,没想到一不小心成了爆款: 到什么程度才叫精通 Linux?​ 看完 ...

  7. web开发资源导航

    实用工具 前端在线工具 兼容性速查 html5兼容性查询 node-es6支持度 es6兼容性表查询 设备es6支持度 游览器H5支持度 浏览器内核检测工具 手机设备信息检测 浏览器市场份额 文档手册 ...

  8. GitHub 基础搜索技巧

    一.GitHub基本信息栏 1.项目名称 2.项目简介 3.项目的README.md文档 ​ 项目的详细介绍 4.项目的最后更新时间 ​ 是否还有人维护等等... 二.搜索方式列举 1. 在name\ ...

  9. 【前端学习】搬进Github

    学习参考 萌码 一.Github简介和基本操作 Github 上操作基本上围绕一个个项目展开.项目就是一个文件夹,在github中成为“仓库”(repository),里面放着所有的项目文件,可以是代 ...

随机推荐

  1. Mono 3.2.3 TCP吞吐性能测试报告

    在前几天简单地测试了一下Mono 3.2.3 TCP处理的稳定性,有同学问Mono 3.2.3的TCP处理性有怎样,以下是针对Mono 3.2.3TCP在吞吐方面的性能测试.主要测试分两种场分别是连接 ...

  2. ASP.NET 5 Beta 7 版本

    在 VS2015 发布的同时,微软也发布了 ASP.NET 5 的路线图(详见ASP.NET 5 Schedule and Roadmap : https://github.com/aspnet/ho ...

  3. 检验你的前端基础——Sit the test

    前端小学生向大家推荐一个网站:Sit the test.如果你是一名前端工程师或者立志于此,不妨试试此网站上面的测验题. 发现 十几天前,我在奇舞周刊的一篇文章中,发现了一个国外的技能测试网站:Sit ...

  4. 2000条你应知的WPF小姿势 基础篇<22-27 WPF生命周期, 基础类等>

    端午长假在家陪着女朋友, 幸福感满满,生活对于一只饱经忧患的程序猿来说也是非常重要的,也就暂时没有更新博客.休假结束,回归奋斗的日子了,开始继续更新WPF系列. 在正文开始之前需要介绍一个人:Sean ...

  5. Android-Eclipse-INSTALL_FAILED_UPDATE_INCOMPATIBLE错误

    电脑重装了系统,环境问题一大堆,唉,搞死人,这不,今天就出现了这样的一个奇怪的问题. INSTALL_FAILED_UPDATE_INCOMPATIBLE 最后搜了一遍,发现是因为已经安装了这个包,包 ...

  6. Fiddler--一、HTTP协议简介

    在学习Fiddler之前,最好先学习一下HTTP协议. HTTP协议简介 什么是HTTP协议 超文本传输协议(HTTP)是一种通信协议,它允许将超文本标记语言(HTML)文档从Web服务器传送到客户端 ...

  7. Unicode和UTF-8的关系

    Unicode和UTF-8都是表示编码,这个我一直都知道,但是这两个实际上是干什么用的,到底是怎么编码的,为什么有了Unicode还要UTF-8,它们之间有什么联系又有什么区别呢?这个问题一直困扰着我 ...

  8. 解析大型.NET ERP系统 多国语言实现

    实现多国语言有许多种实现方案,无外乎是一种字符串替换技术,将界面控件的文本标签替换成相应语言的文字..NET Windows Forms实现多国语言的方法有以下几种: 1 .NET的方案,使用资源文件 ...

  9. 【.NET深呼吸】如何反序列化动态JSON

    .net本身除了支持SOAP.XML.二进制等序列化和反序列化,后来也加入了对JSON的序列化的支持.然而,在实际开发中,常常会遇到结构不确定的JSON对象,这些对象可能是其他代码动态生成的,你事先无 ...

  10. Webpack从入门到上线

    webpack是目前一个很热门的前端打包工具,官网说得很清楚,webpack的出现就是要把requirejs干掉.同时它还提供了十分便利的本地开发的环境.网上并不容易找到一个讲解得比较详细完整的教程, ...