GitHub PagesにサクッとSPAをデプロイする

# GitHub Pagesとは

## 概要

[GitHub Pages](https://pages.github.com/)
GitHubのリポジトリを静的WEBページとして簡単に公開できるサービス。

## 公開方法

* ユーザー毎に作成可能なページ(例: `https://[youraccount].github.io`)
* リポジトリ毎のページ(例: `https://[youraccount].github.io/[yourRepository]`)

本記事では、**リポジトリ毎のページ**としてデプロイしてみる。

# 本記事の構成

## アジェンダ

* GitHubリポジトリ作成
* 簡単なSPA実装
* GitHub Pagesへのデプロイ

## 使用する言語・ツール

* みんな大好き[Vue.js](https://jp.vuejs.org/v2/guide/)
* [vue-router](https://router.vuejs.org/ja/) (ルーティング)
* [webpack](https://webpack.js.org/) (モジュールバンドラ)
* Yarn ([インストーラ](https://yarnpkg.com/ja/docs/install))

# GitHubリポジトリ作成

お手持ちのアカウントでリポジトリを作成。

<img width="792" alt="スクリーンショット 2018-09-02 19.30.29.png" src="https://qiita-image-store.s3.amazonaws.com/0/241738/6a6c9b36-a464-d332-ff22-1319d42ccd17.png">

ローカルへクローンする。

```bash:command-line
$ git clone git@github.com:[youraccount]/gh-pages-sample.git
$ cd gh-pages-sample
```

# 簡単なSPAを実装

## ディレクトリ構成

```
root/
  ┣ dist/
  ┃   ┣ bundle.js
  ┃   ┗ index.html
  ┣ src/
  ┃   ┣ pages/
  ┃   ┃   ┣ About.vue
  ┃   ┃   ┗ Home.vue 
  ┃   ┣ router/
  ┃   ┃   ┗ index.js
  ┃   ┣ App.vue
  ┃   ┗ index.js
  ┣ .gitignore
  ┣ package.json
  ┣ webpack.config.js
  ┗ yarn.lock
```

```:.gitignore
/node_modules
*.log
```

## 必要なパッケージをインストール

まずルートディレクトリに`package.json`を作成する。

```js:package.json
{
  "name": "gh-pages-sample",
  "description": "Github Pages Sample.",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  }
}
```

`Yarn`を使って必要なパッケージをインストールする。

```bash:gh-pages-sample/
$ yarn add vue && yarn add -D webpack webpack-cli vue-loader vue-router vue-template-compiler
```

## `webpack`設定

```javascript:webpack.config.js
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = [
  {
    mode: 'development',
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.join(__dirname, './dist/'),
    },
    module: {
      rules: [
        {
          test: /\.vue$/,
          loader: 'vue-loader',
        }
      ]
    },
    plugins: [
      new VueLoaderPlugin(),
    ],
  },
];
```


## 各モジュールの実装

ものすごくシンプルなページを実装(Homeページ、Aboutページ)

```javascript:src/index.js
import Vue from 'vue'
import App from './App.vue'
import router from './router/index.js'

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})
```

```vuejs:src/App.vue
<template>
  <div>
    <h1>GitHub Pages Sample.</h1>
    <router-view></router-view>
  </div>
</template>

<script>
export default {}
</script>

```

```vuejs:src/pages/Home.vue
<template>
  <div>
    <p>This is Home Page.</p>
    <router-link to="/about">Go to About page.</router-link>
  </div>
</template>

<script>
export default {}
</script>
```

```vuejs:src/pages/About.vue
<template>
  <div>
    <p>This is About Page.</p>
    <router-link to="/">Go to Home page.</router-link>
  </div>
</template>

<script>
export default {}
</script>
```

## ルーティング

```javascript:src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'

import Home from '../pages/Home.vue'
import About from '../pages/About.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    {
      name: 'home',
      path: '/',
      component: Home
    },
    {
      name: 'about',
      path: '/about',
      component: About
    },
  ]
})

export default router
```

```html:dist/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>GitHub Pages Sample</title>
</head>
<body>
  <div id="app"></div>
  <script src="./bundle.js"></script>
</body>
</html>
```

## webpackでビルド

```bash:gh-pages-sample/
$ yarn build
```

ビルド後、ブラウザで`index.html`を開いてみる。

<img width="975" alt="スクリーンショット 2018-09-02 20.34.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/241738/c1cae125-93fa-d659-4e90-385e26bac7e4.png">

# GitHub Pagesへのデプロイ

## `gh-pages`パッケージをインストール

[gh-pages](https://github.com/tschaub/gh-pages)

コードやコマンドラインからGitHub Pagesへのデプロイが可能なパッケージ。

```bash:gh-pages-sample/
$ yarn add gh-pages
```

## `package.json`へスクリプト追加

公式READMEを参考に、以下のスクリプトを登録。
[Command Line Utility](https://github.com/tschaub/gh-pages#command-line-utility)

```javascript:package.json
{
  "name": "gh-pages-sample",
  "description": "Github Pages Sample.",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "deploy": "gh-pages -d dist"
  },
  "dependencies": {
    "gh-pages": "^1.2.0",
    "vue": "^2.5.17"
  },
  "devDependencies": {
    "vue-loader": "^15.4.1",
    "vue-router": "^3.0.1",
    "vue-template-compiler": "^2.5.17",
    "webpack": "^4.17.1",
    "webpack-cli": "^3.1.0"
  }
}
```

Let's　デプロイ！(初回は時間がかかる)

```bash:gh-pages-sample/
$ yarn deploy
gh-pages -d dist
Published
✨  Done in 19.63s.
```

## デプロイされているか確認

Congratulation✨
<img width="975" alt="スクリーンショット 2018-09-02 20.43.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/241738/34adabaf-bdb0-863a-9831-bd5088f71146.png">

# まとめ

* GitHub PagesというよりもVue.jsでのSPA導入みたいになってしまった...。
* 静的なサイトであれば自前でサーバーを準備しなくてもいいのですごく楽。
* テンプレみたいなものを準備しておけばサクっとデプロイできるのでオススメ。
* 完全なソースコードはこちら→ https://github.com/teinen/gh-pages-sample