# 部屬 github-page 顯示你的 vue 成品

###### tags : `w3HexSchool` . `github`

> 當我們辛苦完成了我們的作品(~~曠世巨作~~) , 我們都會希望將這作品分享給他人 , 讓別人能看到 , 這時我們可以使用 [github-page](https://pages.github.com/) 分享我們的作品

## 前置準備

- 你的成品
- [gh-pages](https://www.npmjs.com/package/gh-pages)

## 設定 gh-pages

#### 下載 gh-pages 到 devDependencieQs 中

npm install gh-pages --save-dev

#### 找出專案的 `repo`

> 以下的 repo 為 https://github.com/andrew781026/F2E_Card.git


#### 建立 `ghpages.js`
> 別忘了修改 `repo` 成剛剛查到的

// place at : deploy/ghpages.js
// you can see more info at https://github.com/tschaub/gh-pages
const path = require('path');
const ghpages = require('gh-pages');

const options = {
    branch: 'gh-pages',
    repo: 'https://github.com/andrew781026/F2E_Card.git' // project github repo
};

const callback = err => {

    if (err) console.error(err);
    else console.log('publish success');
};

/**
 * This task pushes to the `master` branch of the configured `repo`.
 */
ghpages.publish(path.resolve(__dirname, '../dist'), options, callback);

#### 追加 deployee script

"deploy": "npm run build && node ./deploy/ghpages.js"


## 修改 vue 的根目錄
> 由於 github-pages 並非在網頁根目錄顯示成果 , 所以需要增加 `vue.config.js` 調整網頁根目錄

// place it with same level of package.json 
// vue.config.js 設定指南 : https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE
module.exports = {
    // publicPath 為 project-name，根目錄地址為上傳的網域
    publicPath: '/F2E_Card/',
};

## 一鍵部屬

> 上面設定完成後 , 執行下方一行指令 , 就可以執行我們的部屬了 !

npm run deploy


## 成果展示
> github : https://github.com/andrew781026/F2E_Card
> gh-page : https://andrew781026.github.io/F2E_Card


## 參考資料

- [卡斯柏 : 一個指令快速部署 Vue Cli 到 GitHub Pages](https://hsiangfeng.github.io/vue/20200214/1055437216/)
- [gh-pages 官網](https://github.com/tschaub/gh-pages)