有自己伺服器的童鞋請繞行，此處適合矮矬窮且想小裝一下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,看看效果：
優點不言而喻：
- 免費的！！！免費的！！！免費的！！！
當你用起來你就會發現，它免費給你提供了一個展示專案的站點，對於我們這些矮矬窮還沒有伺服器的單身狗來說，簡直是福音好不好。 - 方便！方便！方便！
你有沒有過這種經歷，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
我們可以看出來，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的問題。
此處參考文章點這裡檢視
釋出類似h5靜態頁到github pages
這個採用上面提到的第三種方式，也就是master分支裡面包含一個docs資料夾，我們來一步一步試。
- 新建一個倉庫。
- 本地編寫html檔案。
- push到master分支檢視效果
- 我們新建一個docs資料夾然後把index.html放到裡面，然後再push上去。
給你自己做一個首頁
標題是啥意思呢，其實很簡單，一般的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哈哈~，爭取努力在業餘時間每週寫一篇文章吧。上一篇感覺還是對一些人有幫助的，也得到了反饋，再接再厲，謝謝米娜桑！！！