蹭熱點：白的不能再白的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哈哈~，爭取努力在業餘時間每週寫一篇文章吧。上一篇感受仍是對一些人有幫助的，也獲得了反饋，再接再礪，謝謝米娜桑！！！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。