什么是GitHub Pages?

Github Pages是GitHub推出的一个新的服务
可以用来为你的GitHub账户和你的每一个托管在GitHub的项目建立一个web站点,show you and show your projects

两种站点服务

GitHub提供两种类型的站点服务:

  • User or organization Site – 个人或组织站点
  • Project Site – 项目站点

每一个GitHub用户只可以创建一个个人站点,同时,你可以建立多个项目站点

好处不言而喻

建立个人或组织站点,让更多的人更好的认识你或你的组织
建立项目站点,你可以可视化的展示你的每一个项目,而不是让你的partner(或者更多喜欢这个项目的人)看着一堆源代码而手足无措

你可以很轻松建立一个网站(尽管它是static),有专门的主机托管,还可以通过git进行版本控制,那不是很酷吗?

好了,该做出你的选择了…

建站开始


User or organization Site


创建一个仓库

GitHub开始,创建一个名为username.github.io的仓库
其中,仓库名的第一部分username是你在GitHub上的用户名(或组织名)
假如username和你的用户名不匹配,站点将不能工作,因此,请确保它正确
在GirHub上新建一个仓库

选择你正在使用的git客户端

这里讲述三种客户端:

  • Terimal – 这种经常用在Unix或类Unix系统下(Linux,mac当然也可以)
  • GitHub for Windows – 一看就知道,这是windows下的客户端
  • GitHub for Mac – 这个是Mac下的客户端

好了,开始咯

Terimal(终端)
克隆刚创建的仓库

在terimal下转到你想存放你项目的地方,然后clone这个新的仓库

$ git clone https://github.com/username/username.github.io  
Hello World

进入项目目录,新建一个index.html,如下

$ cd username.github.io
$ echo "Hello World" > index.html  
push你的项目到github

添加,提交,推送你对项目做出的改变

$ git add --all
$ git commit -m "Initial commit"
$ git push

GitHub for Windows or Mac
Clone仓库

点击绿色的”Set up in Desktop”按钮
当GitHub桌面app打开,保存这个项目
从GitHub上启动桌面app
假如app没有启动,那么双击的桌面app启动它,并且在app里克隆你的项目

Create一个index.html文件

使用你最喜欢的编辑器,新建index.html,内容如下

<!DOCTYPE html>
<html>
<body>
<h1>Hello World</h1>
<p>I'm hosted with GitHub Pages.</p>
</body>
</html>

然后,添加到你的项目

commit && Sync

进入你的仓库(app里),commit你的变化,然后按下sync(同步)按钮
假如你在Windows下:
windows提交并同步变化到项目
假如你在Mac下:
Mac提交并同步变化到项目

未知区域

假如你不知道你的平台,额,我无能为力了

浏览你的网站吧

启动你的浏览器,输入http://username.github.io,然后,回车,接着,404,哈哈
等一下吧,新生成一个网站需要一段时间滴
时间也不是很长,大概10分钟吧
未来可能会做的更好,期待吧


project Site

创建项目站点,有两种办法

  1. Generate a Site
  2. Start from scratch

实际上两者创建了分支gh-pages,只是第一种办法是在当前项目的主分支的当前状态开辟新的分支;第二种则是开辟一个没有父节点的分支
说的简单点,第一种的gh-pages分支有当前项目的主分支的内容,所以被称为半路出家;而第二种则没有当前项目主分支的内容,完全像一个新的仓库,所以被称为白手起家(Start from scratch)

半路出家(Generate a Site)

Repository Settings

访问GirHub,com,创建一个新的仓库或者进入一个已存在的仓库
然后点击右手边的Settings,进入项目设置页面
Repository settings

使用Automatic Generator

滑动settings页面到GitHub Pages模块
按下Automatic Page Generator按钮
Automatic Pages Generator

添加内容

使用内置编辑器添加内容给你的网站
假如你已经有了README.md在你的项目,你可以点击右手边Load README.md进行导入
当你做完这些,点击Continue to Layouts
add content to your project site

选择一个主题

在顶部的提供主题里,选择一个你喜欢的主题
当你完成,点击右手边的Publish page按钮
choose a theme

半路出家搞定


白手起家(Start from scratch)

创建一个ph-pages分支

在你的项目页面,点击左手边分支下拉菜单,输入gh-pages,然后按下enter进行创建
create gh-pages branch
这个分支用于发布你的项目站点,你可以随时添加项目的进度等

使其成为默认分支

假如你已经为你的项目创建了新分支gh-pages
进入仓库设置界面
在顶部的模块,改变默认分支为gh-pages
change default branch
这一步并不是必须的,因为此步的意义只是让其看起来更像一个web site project

创建一个index.html

返回仓库总览界面,点击紧邻仓库名旁边的plus图标创建一个名为index.html的文件
create file

Hello World

为这个index.html文件添加内容Hello world
hello-world

commit文件

滑动到页面底部,写上提交信息,提交这个新文件
commit-web
呼,打完收工

对咯,这种办法创建项目站点完全可以在Terimal,GitHub for Windows,还有GitHub for Mac下进行,请自行探索吧

查看你的项目站点

领年终奖了
启动你的浏览器,输入http://username.github.io/repository
Repository是你的项目仓库名
然后,回车,接着,404,额,又被坑了
等10分钟吧,这么简单创建一个web站点,也不差这点时间对吧?



blog comments powered by Disqus