tmp: December 2017

Nuxt.js は Vue.js の Framework で Webpack, Babel 等の設定や、ルーティング、SPA、サーバサイドレンダリングの実装をシンプルなものにしてくれます。  
Nuxt.js には静的なページを生成する機能もあるので今回はこれを利用して、GitHub Pages を作成します。  
  
`nuxt-sumple` というリポジトリ名で作成しました。  
今回使用したコード、作成したページは以下になります。  
https://github.com/fiahfy/nuxt-sample  
https://fiahfy.github.io/nuxt-sample/

###Install requirements
yarn, vue-cli を使用します。  
インストールしていない場合はインストールします。
```bash
$ npm i -g yarn vue-cli
```

###Create Project
テンプレートからプロジェクトを作成します。
```bash
$ vue init nuxt-community/starter-template nuxt-sample
```

プロジェクトルートに移動して
```bash
$ cd nuxt-sample
```

依存パッケージをインストールし
```bash
$ yarn
```

サーバを起動します
```bash
$ yarn dev
```
ブラウザで http://localhost:3000 にアクセスするとページが確認できます。  
以降はこのページで開発をしていきます。

###Update Config
GitHub Pages で公開するために、設定ファイル(`nuxt.config.js`)を修正します。  
公開するURLは https://fiahfy.github.io/nuxt-sample/ となるので、ベースパスを考慮します。

`favicon.ico` のパスが変わるので修正します。
```js
      { rel: 'icon', type: 'image/x-icon', href: '/nuxt-sample/favicon.ico' }
```
ベースパスを設定するため `router.base` を追加します。
```js
  build: {
    ...
  },
  router: {
    base: '/nuxt-sample/'
  }
}
```
ベースパスを変更したので確認時のURLも http://localhost:3000/nuxt-sample/ となります。

###Publish to GitHub Pages
ページが完成したら、`nuxt generate` で静的ページを生成します。
```bash
$ yarn generate
```
`dist` ディレクトリに静的ページが生成されます。  
`dist` を公開用のディレクトリにコピーします。
```bash
$ cp -r dist/ gh-pages
```
`package.json` の `generate` スクリプトを以下の様にしておくと便利です。
```js
    "generate": "nuxt generate && rm -rf gh-pages/* && cp -r dist/ gh-pages/",
```
公開用ディレクトリを `gh-pages` ブランチとしてpushします。
```bash
$ cd gh-pages
$ git remote add origin git@github.com:fiahfy/nuxt-sample.git
$ git checkout -b gh-pages
$ git add .
$ git commit -m "Initial commit"
$ git push -u origin gh-pages
```
公開されたページを確認します。  
https://fiahfy.github.io/nuxt-sample/

Nuxt.js で簡単に GitHub Pages が作成できました。  
もちろん、動的ページにもすぐに切り替えられるので、とりあえず GitHub Pages で公開して、後々自サーバで公開といった感じでも使えます。  
Nuxt.js は他にも便利で、柔軟な機能があるので、Vue.js に興味のある方は GitHub Pages から使用してみてはいかがでしょうか？

##参考
* https://ja.nuxtjs.org/

tmp

Saturday, December 9, 2017

Nuxt.js を GitHub Pages で使う

Monday, December 4, 2017

Azure CLI 2.0 commands