有很多知名的项目,例如webpack,会把自己的文档托管在.js.org域名下面。作为前端开发者,如果拥有一个.js.org为后缀的域名网站,确实是一件很酷的事。那么,怎么才能拥有一个.js.org域名的网站呢?我在实践之后,把这个过程写下来给你,希望对你有用。
实际上,我们抛开他们的技术实现,它就是一个域名服务。和我们以前注册域名,并绑定到自己的主机上一模一样。
只是,它的操作过程比一般的域名服务(域名注册和解析)麻烦很多。
作为开发者,怎么能没有一个自己的主页呢?当然,你可以使用自己的服务器,搭建一个像我一样的wordpress个人网站,这当然可以。但是,服务器,每个月都需要一定的费用。而使用githubpages则不需要费用,它是免费的。github给每一个开发者提供了一个免费的github.io子域名,二级域名名称就是开发者的注册id,在你开通githubpages服务之后,就可以使用这个子域名了。
那么,如何创建自己的githubpages呢?按照如下步骤操作即可。
在github上创建一个新项目,作为要放pages的项目。很多个人博客就是这么干的,那些博主在自己的github上创建了一个名字叫xxx.github.io的项目,然后将自己的网站源码push到这个项目中。(这里需要注意,pages服务只接受静态资源,你如果需要进行数据存储,只能采用前后端分离的方式,将数据存放到另外一个地方去,gh-pages(githubpages)只支持静态资源服务。)
除了上面这种方式。假如你和我一样,想要给单个项目创建一个文档服务,那么,你可以有两种选择:1)在项目master分支根目录下方创建一个docs目录,用于存放文档;2)创建一个新分支gh-pages作为存放文档的独立分支。我选择了第一种,因为对于要访问我项目的其他人而言,他们可以点击docs目录,进去查看我写的文档,而无需切换分支。
这里相当于给了你3种选择。那么如何选择呢?一般而言:a.当你要创建一个个人/机构主页时,创建一个xxx.github.io的项目;b.当你在给一个项目创建主页时,使用该项目的gh-pages分支;c.当你在给一个项目创建主页时,使用master分支下的docs目录。
个人/机构主页和项目主页的区别是,个人/机构主页网址就是域名,而项目主页的网址是域名后面还根上了项目名。这也是为什么很多项目单独注册了一个机构,而非直接挂在作者自己的名字下。其中b和c看上去没啥差别,但差别还是有,如果你多出一个docs目录,可能影响你项目代码但纯净性,这种时候,使用一个独立分支单独存放项目主页代码,会使项目源码比较干净。
无论你选择了哪一种方式,你需要在每一种方式的根目录下,放一个index.html作为首页。(docs目录作为gh-pages时,把index.html放在docs目录下。因为只允许提供静态资源,所以,基本上,你只能靠js来完成编程了。
完成网站的制作后,把对应的内容push到仓库中。
你已经完成了前两步。接下来,我们开启pages服务。点击项目顶部导航中的Settings菜单,
往下拉,找到GitHubPages这个部分,
选择对应的Source选项。在最新版的github后台,点击其中一个选项之后,会自动刷新页面,并且提示你pages已经发布成功,你可以访问网页上出现的网址进行访问。
根据官方提示,只有在管理员的push才能触发pages网站的更新,因此要额外注意这一点。
现在,你可以使用yourname.github.io/yourproject访问你的pages主页了。
对于gh-pages服务,它本身和js.org服务没有半毛钱关系。你可以把gh-pages当作是你自己的博客,现在,你可以使用其他域名绑定到gh-pages的主页上。
在文档根目录创建一个名为CNAME的文件,在这个文件中,其内容必须只能是你要绑定的域名。例如我,就在CNAME文件中,只写入如下内容:
nautil.js.org然后将更新后的pages文件push到项目中。经过测试,你不需要自己创建这个CNAME文件,而是在执行下一步时自动帮你生成这个CNAME文件。
这个时候,当你再访问github给你默认配的域名地址时,你会发现,网址发生了跳转。
理论上,CNAME被push之后,github应该自动给我做域名绑定。但是实际上,并没有,CNAME文件似乎只是为了实现跳转。而要将我们自己的域名绑定到gh-pages服务上,还必须在刚才操作的设置页面,填写要绑定的域名(必须和CNAME中的一致)。
填写好,点击Save之后,在github所要做的事情就完成了。
如果你不是使用js.org域名,你需要到你的dns服务商处去修改对应的解析记录。这条解析记录应该是一个指向yourname.github.io的CNAME记录。
当然,如果你要使用js.org域名,请继续往下读。
将fork过来到仓库clone到本地,然后用编辑器打开,找到cnames_active.js文件,在里面看一下,大概知道怎么回事了吧。添加你想要到二级域名,以及CNAME到的网址。注意,大家的约定都是按字母顺序排序的。照葫芦画瓢改好代码。push回github。
回到你fork的仓库页面,找到一个叫PullRequest的按钮。点击它,提交。
如果你有兴趣,还可以继续看看ns_active.js,看完之后,你就能再次明白,js.org就是一个域名服务项目啊。
我们在项目中怎么写文档?当然是用markdown来写。如果你要发布一个网页来组织文档,怎么想都会很麻烦,比如直接用html写,不现实;比如用md写完之后,本地用一个工具转为html,例如gitbook做的,也不如意。而docsify直接通过解析md文档来实现渲染。你写文档就是写md文件,不用做任何修改。只是,在你的docs目录下,再加一个index.html即可。在这个index.html文档中,我们直接使用docsify的CDN文件,然后整个pages网站就渲染好了。