这两天搭建了一个个人主页，地址是zhangzeyang66.github.io/aboutme，主页中有按钮链接直达我的博客，在我博客的主页中也增加了个人主页的链接。下面分步骤介绍一下我的这个个人主页的搭建方法（基于Bootstrap，Windows环境）。在文末还有一段视频来介绍我的步骤。

请注意：我在之前已经搭建了域名为zhangzeyang66.github.io的这个博客，这次是在它的子目录页面搭建个人主页。我也已经在使用一个原来的SSH Key，这次需要增加一个Key用来搭建个人主页，并进行相应设置。这些都与第一次在GitHub搭建GitHub Pages不同，读者若是第一次搭建，所用步骤在很多方面应该与我的不同。

注册GitHub并安装Git环境

这些操作我在之前就已经做过了。关于这方面，网上有很多教程，操作起来也并不难，在这里略过这一部分。

新建一个repository

登录到GitHub后，点击首页右上角的 + ，再点击New repository即可开始添加新的工程。我的GitHub账号是zhangzeyang66。由于我已经使用了zhangzeyang66.github.io作为我的博客地址，所以我想把个人主页建在zhangzeyang66.github.io/aboutme。这里我定义Repository name为aboutme（而不是新手常用的USERNAME.github.io或USERNAME.github.com）就可以达到效果。其他设置如下图所示。点击Create repository就成功建立了。

有些教程要求在建立repository之后使用automatic page generator自动创建一个GitHub Page，其实这不是必须的，因为我们之后要部署自己制作的页面。经过实践，只要将自己的网页部署到gh-pages分支，就可以在相应的地址上生成这个页面了。

添加并配置SSH Key

在Git Bash中使用下面的语句添加一个SSH Key：

1	$ ssh-keygen -t rsa -C "zhangzeyang66@github.com"

我之前已经使用zhangzeyang66@126.com获取了一个SSH Key（用于我的博客），文件名称为id_rsa，所以这次在需要输入Key的文件名时，不能使用默认设置，我将它设置为了git_rsa。
这样，在系统的.ssh目录下就会新增一个git_rsa文件（无后缀名）和一个git_rsa.pub文件。将git_rsa.pub文件的所有内容复制，并在repository的Settings -> Deploy keys中点击Add deploy key，将git_rsa.pub的内容粘贴到Key里，起一个Title，并勾选Allow write access，最后点击Add key。如下图所示：

现在电脑里有两个SSH Key，为了防止冲突，需要在.ssh目录下新建一个config文件（无后缀名），内容如下：

Host github.com  
    HostName github.com  
    PreferredAuthentications publickey  
    IdentityFile ~/.ssh/id_rsa  
Host my.github.com  
    HostName github.com  
    PreferredAuthentications publickey  
    IdentityFile ~/.ssh/git_rsa

这样，关于个人主页的配置就可以使用my.github.com这个Host。

部署初始站点

在需要存储网页文件的文件目录中打开Git Bash，输入以下命令部署一个Jekyll-Bootstrap站点：

$ git clone https://github.com/plusjade/jekyll-bootstrap.git aboutme  
$ cd aboutme  
$ git remote set-url origin git@my.github.com:zhangzeyang66/aboutme.git  
$ git pull origin master  
$ git push origin master

注意我用的是my.github.com，因为前面已经设置过Host，这样可以使用正确的SSH Key。
至此，我们就把一个Jekyll默认站点的有关文件上传到了GitHub上，像是这样：

建立并使用gh-pages分支

现在在浏览器输入主页地址还不能看到任何内容，是因为这个Page必须使用gh-pages分支。在本地的文件目录（对于我是aboutme目录）中打开Git Bash，输入以下命令建立并使用gh-pages分支：

1
2
3

$ git branch gh-pages  #创建分支
$ git checkout gh-pages  #切换分支
$ git push origin gh-pages #把分支推到远程分支

这样就把文件上传到了gh-pages分支，并可以在浏览器输入地址看到页面内容。
同时把repository中的Settings->Branches->Default branch改为gh-pages，这样就可以默认看到gh-pages分支的内容了。

使用模板并完善内容

完成上述步骤后生成的页面非常丑，只有一些排版很差的文字，如下图：

这时候就是模板发挥作用的时候啦！
可以在网上搜索Bootstrap或Jekyll模板，找一个自己觉得好看的，把文件下载下来，替换掉原来的文件，然后一点点地修改、增加内容，一个漂亮的个人主页就建成了。
这里需要注意，每次将本地仓库中的文件进行修改后，需要在Git Bash中执行以下3个命令，才能将远端的网站页面刷新：

1
2
3

$ git add .
$ git commit -m "statement"   #此处statement填写此次提交修改的内容，作为日后查阅
$ git push origin gh-pages

Bootstrap模板一般都支持移动终端的响应式适配，大家更新页面之后可以用手机或平板访问一下来看一看移动端的效果。
至于如何把网页更改成想要的样子，那就是仔细翻看各种文件，弄清它们的包含关系和与具体页面的对应关系。一般是要修改各种html文件，关键是找到与页面某处文字对应的代码部分，之后就好办了。
在更改网页文件时，为了提高访问速度，记得把来自Google的字库、访问FaceBook的模块等改掉或删掉，这样对于访问速度的提高是非常明显的。

（可选）安装Jekyll本地编译环境

每次更改过文件后都需要执行3个命令，再加上网站会有延时，看起来要好大功夫才能看到网页修改后的效果。要进行比较实时的网页预览，就需要Jekyll的本地编译环境。
1.安装Ruby，安装时一定要勾选添加到环境变量PATH。
2.安装RubyGems，注意下载ZIP格式的文件，解压到任意目录，并打开cmd命令提示符进入这个目录，输入以下命令：

1	ruby setup.rb

3.安装Jekyll：在cmd终端中输入：

1	gem install jekyll

4.安装jekyll-paginate：在终端中输入：

1	gem install jekyll-paginate

5.开启本地实时预览：在终端中输入：

1 2	cd {local repository} #{local repository}替换成你的本地仓库的目录 jekyll serve

开启实时预览后，在地址栏输入http://localhost:4000/回车就可以看到你的网页的模样，而且一旦本地文件有任何更新，网页刷新后都可以立刻看到效果，Amazing！
在后面的视频中我展示了这种实时更新的效果。实际上在后来的使用过程中，网页更新的速度比演示的要快好多。

操作视频

以下是介绍我的基本操作的视频，前面的文字看不太懂的话可以看看视频的操作。
如果出现显示错误（一般是因为使用了HTTPS访问本页而被浏览器阻止了）可以点击这里。