最近最热点的新闻无疑是微软收购
世界上最大的同性交友网站 ——Github了。作为一个程序单身狗，我也来蹭蹭热点，正好花了半天时间学了一下怎么构建Github Pages，没看错，我也是现学的，然后才发现原来Github还有这么NB好用的功能，哎，发现自己真的越学越觉得真的不好意思给自己定位成程序员啊！O(∩_∩)O哈哈~
有自己服务器的童鞋请绕行，此处适合矮矬穷且想小装一下B的同学观赏。o(￣︶￣ )o
你可以戳官网，去看看它的介绍，说实话，讲的已经很详细了，但是我知道还是有很多人不喜欢看英文网站之类的东西，所以为了帮助小小白们，我按照我的理解来告诉你一下Github Pages是啥玩意儿。
Websites for you and your projects. Hosted directly from your GitHub repository. Just edit, push, and your changes are live.
上面是官网原话，简单点来说，就是它为你的项目提供一个访问站点，并且直接指向你的仓库，你仓库更新，站点网站自动更新。
周公子's Garden
优点不言而喻：
三种方式
官网是这么说的：
- The master branch
- The gh-pages branch
- A folder named "docs" located on the master branch
复制代码 有三种方式可以帮助我们将项目部署到github pages上，我通过半天时间的研究，来给大家总结一下怎么使用这三种方式！
把react/vue项目发布到github pages
ok，把这种方式放在第一个是因为，确实三大框架的崛起，很少有人只写HTML5页面了，大部分都是单页应用，所以先来个单页应用的栗子试试水。这里用create-react-app构建一个最简单的react应用来说明：
github新建一个仓库，就叫first-github-pages吧 使用create-react-app构建一个最基础的项目，如下图：
新建本地分支gh-pages,安装gh-pages包，并修改package.json文件，增加homepage // package.json
{
"name" : "demo" ,
"version" : "0.1.0" ,
"private" : true ,
"dependencies" : {
"gh-pages" : "^1.2.0" , // yarn add gh-pages
"react" : "^16.4.0" ,
"react-dom" : "^16.4.0" ,
"react-scripts" : "1.1.4"
},
"scripts" : {
"predeploy" : "yarn build" , // 新增predeploy
"deploy" : "gh-pages -d build" , // 新增deploy
"start" : "react-scripts start" ,
"build" : "react-scripts build" ,
"test" : "react-scripts test --env=jsdom" ,
"eject" : "react-scripts eject"
},
"homepage" : "https://luffyzh.github.io/first-github-pages"
}
复制代码
通过gh-pages发布需要增加两条命令，第一条preldeploy会运行你项目里的build，把你的项目打包，第二条命令则是把打包后的文件推送到远程gh-pages分支。
注意：最好在本地建一个同名分支gh-pages运行deploy，不要在master分支上运行！！！
注意：一定要有homepage属性，否则gh-pages发布的时候找不到某些文件的位置
使用yarn deploy命令发布到github pages
到这里就发布成功了应该，我们去仓库setting里github pages去看一看：
我们可以看出来，gh-pages的方式更加智能，哈哈。推送上去自动部署到github pages，剩下的我们直接访问对应url就可以了。 luffyzh.github.io/first-githu…
[注意] ：因为是静态站点，所以完全是客户端部分，那么在使用路由的时候如果不在意美观，尽可能地使用Hash路由，这样跳转会没有任何问题。因为browserRouter依赖于服务端支持，使用它的话访问会出现404 not Found.
Hack的一些办法
如果你有强迫症，就必须要用browserRouter，也没啥问题，大神们就是大神们，他们为我们提供了一些奇思妙想的解决办法：
在create-react-app的public目录下新增一个404.html。 // 404.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" >
<title>404 Not Found</title>
<script type ="text/javascript" >
var segmentCount = 0;
var l = window.location;
l.replace(l.protocol + '//' + l.hostname + (l.port ? ':' + l.port : '' ) + l.pathname.split('/' ).slice(0, 1 + segmentCount).join('/' ) + '/?p=/' + l.pathname.slice(1).split('/' ).slice(segmentCount).join('/' ).replace(/&/g, '~and~' ) + (l.search ? '&q=' + l.search.slice(1).replace(/&/g, '~and~' ) : '' ) + l.hash);
</script>
</head>
<body>
</body>
</html>
复制代码 在index.html页面的head里增加如下代码 <script type ="text/javascript" >
(function (l) {
if (l.search) {
var q = {};
l.search.slice(1).split('&' ).forEach(function (v) {
var a = v.split('=' );
q[a[0]] = a.slice(1).join('=' ).replace(/~and~/g, '&' ); });
if (q.p !== undefined) {
window.history
.replaceState(null, null, l.pathname.slice(0, -1) + (q.p || '' ) + (q.q ? ('?' + q.q) : '' ) + l.hash );
}
}
}(window.location));
</script>
复制代码 这样，就解决了browserRouter的问题。
create-react-app 关于这些内容的文档
此处参考文章 点这里查看
发布类似h5静态页到github pages
这个采用上面提到的第三种方式，也就是master分支里面包含一个docs文件夹，我们来一步一步试。
我们需要在仓库的setting里启用github pages
好吧。如上图所示，那个master branch/docs folder这个选项是不可选择的，因为我们没有docs文件夹嘛。
我们新建一个docs文件夹然后把index.html放到里面，然后再push上去。
push完后我们再去setting里，发现那个选项可以被选择，我们选择它然后点击save，就会出现我们的github pages的url，如下图所示：
我们点击url，就会发现是我们写的那个巨丑无比的html文件，也就是发布成功了。
给你自己做一个首页
标题是啥意思呢，其实很简单，一般的github pages都是以 https://[username].github.io/project-name的形式发布的，那么也就是每一个页面都是针对某个项目的，但是我就想发布一个个人的github主页，上面有我在github上面的一些项目。怎么办呢？
使用且必须使用第一种方式 —— master branch
// 官网是这么说的
The source files for User and Organization Pages sites live on the master branch in a dedicated repository named with the GitHub account name:
To create a User Pages site, name the repository using the naming scheme <username>.github.io .
To create an Organization Pages site, name the repository using the naming scheme <orgname>.github.io .
复制代码 意思就是说，你如果想通过.github.io的形式直接访问你的站点，你必须通过master branch的方式来发布。为什么最后讲这个呢？因为除了必须在master branch以外，其他的跟第一和第二种基本没区别，你如果是一个框架项目，那么就用第一种发布，你如果是H5页面，就用第二种发布，只不过需要做一点小小的修改。 因为我就写了个H5页面，所以就用的第二种方式：
// 第二种修改
就是把docs文件夹下面的内容全部复制到master分支下面，就可以了！so easy.
复制代码
注意：这里官方明确说了，想要以这种形式访问，仓库名称必须是[username].github.io
重申
有服务器的童鞋和大拿们就一笑而过就好了，哈哈，毕竟还是有穷人存在的！有服务器随随便便部署上去就可以了，这个我觉得只是用来展示一些静态内容小demo还是挺方便的！
最后总结
最近觉得自己还挺适合写文章的，臭不要脸的认为自己逻辑挺清晰的！O(∩_∩)O哈哈~，争取努力在业余时间每周写一篇文章吧。上一篇感觉还是对一些人有帮助的，也得到了反馈，再接再厉，谢谢米娜桑！！！
