【無料】AngularプロジェクトをWebに公開しよう！【GitHubPages】

みなさんこんにちは、現役エンジニアのサメハックです

未経験からWebエンジニアに転職し、
現在正社員として5年働いたのちフリーランスとして独立しました。

Angularの解説シリーズです。

今回は無料でGitHubPagesにAngularプロジェクトを公開する方法について学んでいきましょう！

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！

無料でGitHubPagesにAngularプロジェクトを公開しよう！

【Git】最速でGitHubとローカル環境を連携させよう！

samehack.com

リポジトリの作成

リポジトリ名

ユーザ名.github.io

GitHubと連携するディレクトリの作成

作成したディレクトリにクローン

git clone https://github.com/same-hack/same-hack.github.io.git

Angular Cliのインストール

npm install -g @angular/cli

クローンしたディレクトリにAngularプロジェクトを作成

cd クローンしたリポジトリ名
ng new プロジェクト名 --directory ./

angular.jsonの編集

build.options.outputPath:"dist/アプリ名"

↓

build.options.outputPath:"docs"

ビルド

npm run build

GitHubにアップロード

git add .
git commit -m "コミットメッセージ"
git push

GitHubPagesに公開

GitHubPagesに公開するソースを
/(root) →　/docs
に変更してSave。

これでAngularのアプリが公開されました！

実行環境

まとめ

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

twitter
instagram