GitHub PagesのユーザーページをNuxt.jsを使って公開したいと思ったのですが、ちょっと苦労したので、やったことまとめておきます。
自分で調べた感じだとCIツール使うのが良さそうだったけど、実はもっと簡単にできるよってことだったら教えてください。
やりたいこと
- GitHub PagesをNuxt.jsを使って公開したい
- ドメインをスマートに、
https://<account名>.github.ioにしたい - よって、プロジェクトページではなく、ユーザーページで作成したい（プロジェクトページで作ると、
https://<account名>.github.io/<repository名>にホストされてしまう）
（メインページのドメインにパスを含むのちょっとダサい。だからと言って、HTML・CSSだけのプアなページにしたくもない）
（ドメインとれよっていうツッコミはなしで。デフォルトのドメインなら無料で公開できる。github.io ドメインちょっとかっこいいし）
背景
GitHub Pagesとは
公式ページのタイトルにあるように、GitHubが静的サイトをホストしてくれるサービス。GitHubでソース管理して、それをそのままウェブサイトとしてホストできるので、便利。
GitHub Pages | Websites for you and your projects, hosted directly from your GitHub repository. Just edit, push, and your changes are live.
https://pages.github.com/
ユーザーページ / プロジェクトページとは
GitHub Pagesの使い方にはリポジトリの作り方によって2種類の方法がある。
https://help.github.com/en/articles/what-is-github-pages
https://help.github.com/en/articles/user-organization-and-project-pages
1. ユーザーページ
リポジトリ名を<account名>.github.io にすると、自動的にhttps://<account名>.github.ioでサイトが見れるようになる。
2. プロジェクトページ
任意のリポジトリに、gh-pagesブランチを作成すると、そのブランチの中身がhttps://<account名>.github.io/<リポジトリ名>で見れるようになる。
今回は、自分のポートフォリオサイト的な位置付けにしたいと思い、ユーザーページを作成したかった。
Nuxt.jsとは
一言で言えば、フロントエンド開発のためのJavaScriptフレームワークです。
Vue.jsを使ったアプリケーションを静的に生成することができるので、GitHub Pagesのような静的ページのホスティングサービスを使って公開しつつ、ページをリッチにしたい場合に便利だと思います。
公式ページ
https://ja.nuxtjs.org/guide/
Nuxt.js は Vue アプリケーションを作成するフレームワークです。ユニバーサルアプリケーション、静的に生成されるアプリケーション、シングルページアプリケーションの中から作成するアプリケーションを選ぶことができます。
つまづきポイント
- GitHub Pagesのユーザーページの場合、
masterブランチのルートしかホストできない。 - Nuxtでは、静的ページは
/distに生成される。
→ルートディレクトリ以下を開発用として管理しつつ、/distディレクトリ以下のみをデプロイするのに一工夫必要。
※公式ページに情報が色々情報載っていたり、他のサイトでも色々載せてますが、ほとんどがプロジェクトページ用の情報で、ユーザーページ公開についてピンポイントで教えてくれる記事は見つからなかった。
解決策
CIツールを使う。
面倒だし、CIツール使いたくないと思っていたけど、意外と簡単にできた。
手順
- GitHubにRepository作成
- Nuxt.jsでアプリ作成
- Travis CIを登録
- リリース
1. GitHubにRepository作成
ユーザーページを作成するために、<account名>.github.ioと名付けたリポジトリを作成する。
次に、ローカルに作業リポジトリを作成します。
$ git clone git@github.com:<account名>/<account名>.github.io.git
次にブランチを切ります。
ここがポイントなのですが、masterブランチは生成された静的ファイルだけを置くために使うので、開発用のブランチは別に作ります。今回はgh-pagesとします。
$ git branch gh-pages
$ git checkout gh-pages
これで開発が進められます。
2. Nuxt.jsでアプリ作成
Nuxt.jsのドキュメントを見ながら作成。Nuxt.jsはドキュメントが結構親切なので、手順に沿っていけば作れると思います。試すだけなら、pages/index.vueに簡単なテンプレートだけ作っておいて問題ないと思います。
インストール - Nuxt.js
https://ja.nuxtjs.org/guide/installation
また、この時、baseディレクトリのパスを設定するようにしましょう。
3. Travis CI登録
CIツールに登録し、以下の設定をします。
ほとんどドキュメントに手順が書いてあるので、それに沿って作成してください。
ポイントは、.travis.ymlの中身です。
language: node_js
node_js:
- "10"
cache:
directories:
- "node_modules"
branches:
only:
- gh-pages // 対象ブランチ
install:
- npm install
- npm run generate
script:
- echo "Skipping tests"
deploy:
provider: pages
skip-cleanup: true
github-token: $GITHUB_ACCESS_TOKEN // Travis CIのウェブページで設定した変数
target-branch: master // デプロイ先ブランチ
local-dir: dist // 対象ディレクトリ
on:
branch: gh-pages // 対象ブランチ
- 動作ブランチを開発用の
gh-pagesに設定 - プッシュ時に
nuxt generate -
distディレクトリをデプロイ対象に設定 - デプロイ先は
masterブランチに設定
の三つのことをしています。
4. リリース
ここまで設定できたら、開発ブランチをpushしましょう。
$ git push origin gh-pages
自動デプロイされ、http://<account名>.github.ioで公開されます。
以上こんな感じです。
駆け足でわかりにくいところもあると思いますが、そのへんは時間あるときに直すかもしれないです。
あと、もっと他にやり方あるよって場合は教えてください。