2018-08-31に更新

AngularのプロジェクトをGithub Pagesに公開する

Crieit初投稿です。元記事はこちら

AngularのプロジェクトをGithub Pagesにデプロイしたときのメモ。

angular-cli-ghpagesというパッケージを使用することで簡単にデプロイ出来た。

インストール

コマンドの利用するには、次の条件を満たしておく必要がある。

  • Node.js: 4.x以上
  • Git: 1.7.6以上
  • (オプション)angular-cliで作成されたプロジェクト

今回実行した環境は次の通り。

  • MacBook Air (Early 2015)
  • macOS High Sierra (10.13.5)
  • angular-cli: 6.0.7
  • Node.js: 8.11.2
  • Git: 2.17.1

使い方

angular-cli v6だと、ビルド時のディレクトリ構成がdist/REPOSITORY_NAMEとなっている。

そのため、ng buildもしくはangular-cli-ghpagesでディレクトリを指定する必要がある。

今回はangular-cli-ghpagesのオプションを使用した。

ng build --prod --base-href "https://USERNAME.github.io/REPOSITORY_NAME/"
angular-cli-ghpages --dir="dist/REPOSITORY_NAME"

もしくは、

ng build --prod --base-href "/REPOSITORY_NAME/"
angular-cli-ghpages --dir="dist/REPOSITORY_NAME"

もしくは、

# <base href="">となる
ng build --prod
angular-cli-ghpages --dir="dist/REPOSITORY_NAME"

を実行すると、リモートへプッシュが行われる。

angular-cli-ghpagesの代わりにnghでも実行可能。

オプション

コマンド実行時にいくつかオプション設定が可能。

使用したものだけ記載しているので、他のオプションについてはREADME.mdを参照してください。

--message

  • コミット時のメッセージを設定。デフォルトはAuto-generated commit
  • e.g. ngh --message="New message"

--dir

  • デプロイするディレクトリを設定。デフォルトはdist
  • angular-cli v6だと"outputPath": "dist/REPOSITORY_NAME"となっているので注意
  • e.g. ngh --dir="dist/REPOSITORY_NAME"

--branch

  • プッシュ先のブランチ名を設定。デフォルトはgh-pages
  • e.g. ngh --branch=other-branch

Gihub Pagesの設定

nghでプッシュされたのが確認出来れば以下を設定する。

  1. GithubのリポジトリのSettingsタブをクリック。
  2. Github Pagesの項目までスクロールし、Sourceからプッシュしたブランチを設定。
  3. URLにアクセスしてページが表示されれば完了!

参考URL

Originally published at chocol4t.hatenablog.com

choco14t
Crieitはαバージョンで開発中です。進捗は公式Twitterアカウントをフォローして確認してください。 興味がある方は是非記事の投稿もお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

コメント