github pagesにNuxt.jsで作ったサイトを公開するまでの手順です。
ずっとgithub.ioでポートフォリオ作りたかった。
- 〇〇(ユーザー名).github.ioっていうリポジトリ名にしなくても良かった。
- TravisClっていうツール使った。
環境
Mojave 10.14.3（18D109）
node.js v10.11.0
yarn 1.10.1
手順
1. nuxtプロジェクト作る
$ yarn create nuxt-app portfolio
$ cd portfolio
$ yarn generate
2. プロジェクトの設定変更
nuxt.config.js
// 追記
const routerBase = process.env.DEPLOY_ENV === 'GH_PAGES' ? {
router: {
base: '/tetsufe-github-pages/'
}
} : {}
module.exports = {
// 省略 だいたいheadの下くらい
routerBase,
// 省略
}
package.json
"scripts": {
...追記
"build:gh-pages": "DEPLOY_ENV=GH_PAGES nuxt build",
"generate:gh-pages": "DEPLOY_ENV=GH_PAGES nuxt generate"
},
3. githubにpush
githubに予めリポジトリを作っておきます。
$ git add -A
$ git commit -m 'first commit'
$ git remote add origin ◯◯(リポジトリのURL)
$ git push -u origin master
# これ以降のpushコマンドは git push だけでOK
4. Travis CIの設定
1. ルートディレクトリに.travis.ymlを置く。
.travis.yml
language: node_js
node_js:
- "8"
cache:
directories:
- "node_modules"
branches:
only:
- master
install:
- yarn install
- yarn generate
script:
- echo "Skipping tests"
deploy:
provider: pages
skip-cleanup: true
github-token: $GITHUB_ACCESS_TOKEN # セキュアとマークされたアクセストークンを travis-ci.org のダッシュボードに設定してください。https://docs.travis-ci.com/user/deployment/pages/#Setting-the-GitHub-token
target-branch: gh-pages
local-dir: dist
on:
branch: master
2. githubでアクセストークンを取得する。
取得したトークンはあとから使うのでメモしておく。
3. Travis CIにリポジトリを登録する。
アカウントを持っていなければgithubのアカウントでサインアップする。
https://travis-ci.com/
リポジトリを登録したら、ダッシュボードにそのリポジトリが表示されるので、「≡」→「setting」と進み、「Environment Variables(環境変数)」で
- Name: GITHUB_ACCESS_TOKEN
- value: 取得したアクセストークン
で「Add」する。
5. githubへ再度pushするとデプロイされる
$ git add -A
$ git commit -m "Adding travis deploy configuration"
$ git push
デプロイが完了すれば、
https://◯◯(ユーザ名).github.io/△△(リポジトリ名)/
で公開されていると思います！
参考
あとがき
先輩いわく、
◯◯(ユーザ名).github.io
のURLでも設定できるらしいです。
しかもgh-pagesのブランチも作らず、privateリポジトリでもいける。。。だと。。。
こちらが参考になるとのこと。