拥有个人网站
2015年11月22日

拥有一个域名,跑一个个人网站,是每个人的梦想。要是梦想能免费实现,那就更好了对不对? 这集介绍如何新建 Github 上的项目仓库,浏览改版历史,拥有公网上的个人网站。

创建 repo

仓库( repository )可以简称 repo 。为啥不叫 Project 呢?因为一个 repo 确实不同于一个 project 。因为 repo 中除了保留有项目的所有最新代码,还有项目的整个改版历史(这个稍后就会看到)。

Github 首页 点右上角的 Sign In (登录)按钮,用我自己的常用账号 happypeter 登录进来。

进来之后,点击页面最左上角的小猫图标,可以重新来到 http://github.com (也就是网站首页),但是这时候看到的就不再是一些介绍内容了,而是用户执行各种操作的界面,术语叫“操作盘”( dashboard )。其他内容我们先不管,点一下页面上最醒目的“添加新项目”的大绿按钮( +New Repository )。这样就进入了下面的新建 repo 的界面了:

翻译一下重点的英文内容:

A repository contains all the files for your project, including the revision history.

一个 repo 中包含你项目的所有文件,还包含项目改版历史。

Anyone can see this repository. You choose who can commit.

任何人都可以看到这个仓库,但是只有你指定的人可以修改。

initialize this repository with a README

项目初始化的时候,自动创建一个 README 文件。(注意,这样做得目的就是让项目变得不再是空的,这个对后续操作是有影响的,咱们这里需要勾选)

好,上面界面中咱们要做的就是填写“仓库名”( Repository name ),“项目描述”( Description ),然后勾选上 README 那一项。这样就可以点击 Create Repository 按钮了。

添加分支和文件

仓库创建好之后,就自动跳转到下面的”项目主页“了:

内容挺多,后面慢慢都会用到,所以都不用管。咱们就做咱们想做的事情就行了:搭建自己的网站。这个用到的是 Github Pages 这个服务。功能不少,但是最基本的操作其实超级简单啦。基本就是一步,来新建一个”分支“就行了。“分支”( Branch )是 Git 的一个重要概念,默认项目创建好之后,就有一个 master 分支(主分支),可以看到上面图中的 Branch: matster 代表我们当前正在这个分支之上。但是很可惜,如果我们把 html 页面放到主分支之上,那么页面是不能变成网站的(有例外情况,就是仓库名为 yourusername.github.io ),需要来新建一个分支。

如上图所示,点一下 Branch: matster ,弹出框中输入要新建的分支名 gh-pages ( GitHub Pages 的简写)。敲回车,就可以创建这个分支了。

接下来在这个 gh-pages 分支上存放的任何页面,都可以在 http://happypeter.github.io/kiss 这个网站上显示出来了。

注意,切换页面的时候,当前分支会自动切换为 master 分支,如何解决这个问题呢?到 Settings (设置)这一个标签下,把 Default Branch 这一项,改为 gh-pages 就可以了。如下图:

上传图片的问题

到这一步,大家奇怪的是,为什么 repo 中没有办法添加图片。是这样?正常情况下操作 Github 还需要安装本地的客户端,这样就能进行添加图片(或者是批量上传文件)了。客户端安装和使用,参考我在 imooc 网站上的 Github 入门教程 中有介绍。客户端下载

顺便提一下,项目实践中通常是这样,只有一些图标或者是一些小图片会跟源码放在一起。通常的做法是,把图片托管到专门的图床网站(这种网站通常带有 CDN 加速)上。我自己最常用的图床是 七牛

版本控制简介

Github 上的有“版本控制功能”,基本就是这个意思,第一次项目仓库里面我上传几个文件,这样项目就有了第一个版本,后面对项目内容修改了,这就形成了第二个版本。这样继续下去项目就会形成很多不同版本,“版本控制”就是对多个版本进行各种操作。比如最简单的,可以在 Github 上浏览到项目的修改历史。点击下图 5 commits ( commit 在这里等价于版本),就可以看到修改历史了。

结语

好,这一集就到这里了。