Crieit初投稿です。元記事はこちら
AngularのプロジェクトをGithub Pagesにデプロイしたときのメモ。
angular-cli-ghpagesというパッケージを使用することで簡単にデプロイ出来た。
コマンドの利用するには、次の条件を満たしておく必要がある。
今回実行した環境は次の通り。
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を参照してください。
Auto-generated commit
ngh --message="New message"
dist
"outputPath": "dist/REPOSITORY_NAME"
となっているので注意ngh --dir="dist/REPOSITORY_NAME"
gh-pages
ngh --branch=other-branch
ngh
でプッシュされたのが確認出来れば以下を設定する。
Settings
タブをクリック。Github Pages
の項目までスクロールし、Source
からプッシュしたブランチを設定。Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。
また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!
こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?
コメント