蹭熱點：白的不能再白的Github Pages部署教程

luffyZhou發表於2018-06-04
Github

蹭熱點：白的不能再白的Github Pages部署教程
最近最熱點的新聞無疑是微軟收購世界上最大的同性交友網站——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 Pages部署教程

優點不言而喻：

  • 免費的！！！免費的！！！免費的！！！
    當你用起來你就會發現，它免費給你提供了一個展示專案的站點，對於我們這些矮矬窮還沒有伺服器的單身狗來說，簡直是福音好不好。
  • 方便！方便！方便！ 你有沒有過這種經歷，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構建一個最基礎的專案，如下圖：

蹭熱點：白的不能再白的Github Pages部署教程

  • 新建本地分支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

蹭熱點：白的不能再白的Github Pages部署教程
到這裡就釋出成功了應該，我們去倉庫setting裡github pages去看一看：

蹭熱點：白的不能再白的Github Pages部署教程

我們可以看出來，gh-pages的方式更加智慧，哈哈。推送上去自動部署到github pages，剩下的我們直接訪問對應url就可以了。 luffyzh.github.io/first-githu…

蹭熱點：白的不能再白的Github Pages部署教程

[注意]：因為是靜態站點，所以完全是客戶端部分，那麼在使用路由的時候如果不在意美觀，儘可能地使用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資料夾，我們來一步一步試。

  • 新建一個倉庫。
    蹭熱點：白的不能再白的Github Pages部署教程
  • 本地編寫html檔案。

蹭熱點：白的不能再白的Github Pages部署教程

  • push到master分支檢視效果

蹭熱點：白的不能再白的Github Pages部署教程
我們需要在倉庫的setting裡啟用github pages

蹭熱點：白的不能再白的Github Pages部署教程
好吧。如上圖所示，那個master branch/docs folder這個選項是不可選擇的，因為我們沒有docs資料夾嘛。

  • 我們新建一個docs資料夾然後把index.html放到裡面，然後再push上去。
    蹭熱點：白的不能再白的Github Pages部署教程
    push完後我們再去setting裡，發現那個選項可以被選擇，我們選擇它然後點選save，就會出現我們的github pages的url，如下圖所示：
    蹭熱點：白的不能再白的Github Pages部署教程
    我們點選url，就會發現是我們寫的那個巨醜無比的html檔案，也就是釋出成功了。

蹭熱點：白的不能再白的Github Pages部署教程

給你自己做一個首頁

標題是啥意思呢，其實很簡單，一般的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哈哈~，爭取努力在業餘時間每週寫一篇文章吧。上一篇感覺還是對一些人有幫助的，也得到了反饋，再接再厲，謝謝米娜桑！！！

相關文章