在github pages建立一个主页

jopen 4年前

之前在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/ 说明文档,剩下的就是自己开发了。

备注: 如果遇到npm安装过慢的现象,可以使用淘宝的NPM镜像,链接: http://npm.taobao.org/