[玩转 Github] — 白的不能再白的 Github Pages 部署教程

10,814 阅读6分钟

更多 《玩转 Github 系列》:

前言

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

有自己服务器的童鞋请绕行,此处适合矮矬穷且想小装一下B的同学观赏。o( ̄︶ ̄)o

Github Pages

你可以戳官网,去看看它的介绍,说实话,讲的已经很详细了,但是我知道还是有很多人不喜欢看英文网站之类的东西,所以为了帮助小小白们,我按照我的理解来告诉你一下Github Pages是啥玩意儿。

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

上面是官网原话,简单点来说,就是它为你的项目提供一个访问站点,并且直接指向你的仓库,你仓库更新,站点网站自动更新。
这里给大家贴一个我的Demo,看看效果:

周公子's Garden

优点不言而喻:

  • 免费的!!!免费的!!!免费的!!!
    当你用起来你就会发现,它免费给你提供了一个展示项目的站点,对于我们这些矮矬穷还没有服务器的单身狗来说,简直是福音好不好。
  • 方便!方便!方便! 你有没有过这种经历,github上用关键词找了一个仓库,然后clone下来,npm install,npm run dev。最后发现,WTF,这个根本不是我想要的东西,然后再把仓库删了;或者,你发布一个东西,README.md里详细的写着how to use,然后各种截图。有了Github Pages你就真的可以直接来一个
    Demo: https://yourname.github.io/your-project-name
    
    就是这么潇洒,你们自己看效果!

三种方式

官网是这么说的:

- 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文件夹,我们来一步一步试。

  • 新建一个仓库。
  • 本地编写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哈哈~,争取努力在业余时间每周写一篇文章吧。上一篇感觉还是对一些人有帮助的,也得到了反馈,再接再厉,谢谢米娜桑!!!