蹭热点：白的不能再白的Github Pages部署教程

时间 2019-11-07

标签热点白的能再 github pages 部署教程栏目 Git 繁體版

原文原文链接

最近最热点的新闻无疑是微软收购 世界上最大的同性交友网站——Github了。做为一个程序单身狗，我也来蹭蹭热点，正好花了半天时间学了一下怎么构建Github Pages，没看错，我也是现学的，而后才发现原来Github还有这么NB好用的功能，哎，发现本身真的越学越以为真的很差意思给本身定位成程序员啊！O(∩_∩)O哈哈~

有本身服务器的童鞋请绕行，此处适合矮矬穷且想小装一下B的同窗观赏。o(￣︶￣)o

Github Pages

你能够戳官网，去看看它的介绍，说实话，讲的已经很详细了，可是我知道仍是有不少人不喜欢看英文网站之类的东西，因此为了帮助小小白们，我按照个人理解来告诉你一下Github Pages是啥玩意儿。javascript

Websites for you and your projects. Hosted directly from your GitHub repository. Just edit, push, and your changes are live.html

上面是官网原话，简单点来讲，就是它为你的项目提供一个访问站点，而且直接指向你的仓库，你仓库更新，站点网站自动更新。
这里给你们贴一个个人Demo,看看效果：vue

周公子's Gardenjava

优势不言而喻：react

免费的！！！免费的！！！免费的！！！
当你用起来你就会发现，它免费给你提供了一个展现项目的站点，对于咱们这些矮矬穷尚未服务器的单身狗来讲，简直是福音好很差。
方便！方便！方便！你有没有过这种经历，github上用关键词找了一个仓库，而后clone下来，npm install,npm run dev。最后发现，WTF，这个根本不是我想要的东西，而后再把仓库删了；或者，你发布一个东西，README.md里详细的写着how to use,而后各类截图。有了Github Pages你就真的能够直接来一个
```
Demo: https://yourname.github.io/your-project-name
复制代码
```
就是这么潇洒，大家本身看效果！

三种方式

官网是这么说的：git

- 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

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分支。npm

注意：最好在本地建一个同名分支gh-pages运行deploy，不要在master分支上运行！！！json

注意：必定要有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文件夹，咱们来一步一步试。

新建一个仓库。
本地编写html文件。

push到master分支查看效果

咱们须要在仓库的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哈哈~，争取努力在业余时间每周写一篇文章吧。上一篇感受仍是对一些人有帮助的，也获得了反馈，再接再砺，谢谢米娜桑！！！