[技术]善用 Github 的免费网页服务 -- 使用者等级

楼主: neversay (子不语)   2014-07-26 15:12:00
图文step by step版:
http://neversaycoding.tumblr.com/post/92879698627/github
PS:放在github上的档案基本上是完全公开的,所以如果有老板要你赶出来的网页
或者不想被人看光的东西,请不要放上去!
最近为了找个网络服务器来放自己的展示网页,搜寻了一些商业网页网站方案,才
赫然发现原来Github就有提供免费的简单网页服务器!
虽然他只能使用纯粹的HTML网页,不能使用PHP/RoR/Nodejs等真正的网页服务器,
但是拿来放展示概念的概念网页已经很够用了,更何况它本身整合了git,所以还可
以享受到无痕整合版本管理的功能。实在是很方便!
Github提供两种形态的网页服务,第一种是以使用者或组织等级的网页,第二种是
专案等级的网页空间,我们先来认识怎么设定使用者等级的网页空间。
1.一开始你必须登入Github。在Github的主页面,按下"+New repository"进入创
造专案页面。
2.在创造专案的页面,输入专案名称"使用者帐号.github.io",如果是组织帐号则换
成组织帐号。
例如我的帐号是test1234,那我要创造的专案名称就是test1234.github.io。
这点老实说有点违反直觉,因为取专案名称时,几乎没有人会使用点”.”这个符号,
第一次看到还真的有点看不懂。
创造专案时请将它选成公开专案(public),否则其他人无法看到页面。最后按下
"Create repository"完成创造步骤。
3.专案刚创造完之后,专案页面应该是干干净净啥都没有的状态如下图:[图]
这时候请把新专案用git clone复制到自己的电脑,然后在里面建立一个index.html
页面,之后将它用git add .;git ci上传到新建的master分支。在我的Linux上指令
大概像这样:
[ ~] $ git clone git@github.com:neversay/neversay.github.io.git
Cloning into 'neversay.github.io'...
warning: You appear to have cloned an empty repository.
[ ~] $ cd neversay.github.io/
[ ~/neversay.github.io] (master) $ echo "Hello world!" > index.html
[ ~/neversay.github.io] (master) $ git add .
[ ~/neversay.github.io] (master) $ git ci
[master (root-commit) 3747b23] Hello world!
1 file changed, 7 insertions(+)
create mode 100644 index.html
[ ~/neversay.github.io] (master) $ git push origin master
Counting objects: 3, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (2/2), done.
Writing objects: 100% (3/3), 264 bytes, done.
Total 3 (delta 0), reused 0 (delta 0)
To git@github.com:neversay/neversay.github.io.git
* [new branch] master -> master
[ ~/neversay.github.io] (master) $
因为master这个分支在新建专案根本还不存在,所以在使用git push把程式推
到上游时要用git push origin master指明是推到master这个分支,这样git会
帮你在Github上自动建立master分支。之后就不用这么麻烦了。
4.index.html页面上传后,在Github的专案页面就能看到它了,例如我的专案页
面在这里:https://github.com/neversay/neversay.github.io
5.根据Github的说明,新的页面需要五分钟才能更新完成,所以请耐心等待再打
开页面。这里是我的展示页面:http://neversay.github.io/
6.而事实上,我们也可以在这个专案之内创造资料夹,然后在资料夹内放入页面,
例如我就开了一个叫做dirdemo的资料夹,放了另一个index.html:
http://neversay.github.io/dirdemo/,这样就能分门别类把不同专案的展示页
面分开储存了。
7.除此之外,你也能把各种档案放上去,图档/JS/CSS都可以正常取用,例如这张
展示图档:http://neversay.github.io/dirdemo/image.jpg。
简而言之,Github给了众多前端开发者一个免钱方便的途径存放我们的展示作品。
除了再也不怕硬盘坏掉作品救不回来,也因为有了版本管理,也不怕不小心把展示
作品改爆了。
作者: pkmilk   2014-07-26 20:43:00
作者: jyunwei (jyunwei)   2014-07-26 22:25:00
作者: jaceka (3247 三等长 >)))   2014-07-26 23:37:00
作者: happyqaz (( ))   2014-07-26 23:40:00
推!
作者: SmallDruid (小d)   2014-07-26 23:47:00
刚好有机会研究git了
作者: SansWord (是妳)   2014-07-27 04:36:00
推,dropbox 的public 也有这个功能,但github 速度快很多! 搭配一些 js framework 真的很好用!
作者: andreli (小狗跟正妹是我的死穴)   2014-07-27 11:46:00
我七月初也刚好讲过类似的东西 http://goo.gl/VFQugw搭配 parse.com, 就前后端都通了。
作者: leochen0818 (Leo)   2014-07-28 11:25:00
第三个步骤看不懂@@" github给的那串指令是要打在哪里
楼主: neversay (子不语)   2014-07-29 12:55:00
第三点在终端机里面,没有终端机的话可以用下一篇不需要终端机的方法
作者: jmarr (生锈的吉他弦)   2014-07-29 14:15:00
推 不知道还有这样的用法

Links booklink

Contact Us: admin [ a t ] ucptt.com