Nuxt.js を GitHub Pages で使う

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/