在github pages建立一个主页

jopen 9年前

之前在github上面建立了一个主页，分享一下经验。请看如下步骤：

1，安装nodejs（直接下载二进制安装、编译安装、或者使用nvm都可以），安装yo，请参考“ http://yeoman.io/learning/ ” ，命令：

npm install -g yo bower grunt-cli gulp

2，我们打算使用AngularJS，所以需要安装：

npm install -g generator-angular

3，创建自己的主页项目目录，然后在里面生成应用框架，比如我在一个叫“me”的目录里面建立：

mkdir me

cd me

yo angular

过程中会询问是否使用bootstrap，根据自己的需要，默认会使用。

4，完成后使用grunt serve可以看到，已经有简单的页面了，如果不想使用bootstrap，而是使用foundation框架可以这样安装：

bower install foundation –save

运行完后，可以对“app”目录里面默认生成的项目文件进行一些清理，删除自己不需要的代码或文件

5，使用grunt build生成项目，完成后可以去dist目录里面查看，如果需要本地预览，可以安装http-server:

npm install -g http-server

cd dist

http-server

默认使用了8080端口，可以使用 -p ???? 来指定新端口

6，发布到github（请自己申请github账号），根据自己的情况，如果是在普通项目仓库，则发布dist目录到gh-pages，而username.github.com仓库则发布dist目录到master分支，下面示范第二种情况：

先登陆github，创建仓库“username.github.com”（替换username为你自己的用户名，com可以为io），然后初始化git仓库 git init

git add .

git commit -m “init”

git remote add origin git@github.com:username/username.github.com

由于我们要发布dist目录到master分支，所以创建一个source分支来保存源码： git checkout -b sourcegit push origin source

远程master分支不需要了，删除以免下一步出错： git push origin –delete master

同时可以也删除本地master分支： git branch -d master

打开文件.gitignore，删除里面的/dist，然后添加dist目录到仓库中： git add dist && git commit -m “Initial dist subtree commit”

然后就可以将生成的网站发布到github master分支了： git subtree push –prefix dist origin master

以后每次改动，就重新执行grunt build，然后重新发布即可。可以程序化这个步骤，根据自己的习惯。

7，经过以上步骤，我们已经在github pages建立了自己的主页，如果需要绑定域名，则需在master分支根目录添加CNAME文件，参考 http://pages.github.com/ 说明文档，剩下的就是自己开发了。