Github Pages로 무료로 웹사이트 만들기 — Angular

이전 게시물에서는 포트폴리오 웹 사이트와 같은 정보를 엿볼 수 있도록 몇 가지 조사를 수행하는 방법을 보여줍니다. 오늘은 샘플 Angular 사이트를 만들고 Github 페이지에서 호스팅하는 방법을 알게 될 것입니다.

Github는 프로젝트를 저장하고 공유하는 데 적합합니다. 모르는 경우 Github에서 웹사이트를 호스팅할 수도 있습니다. 일부 제한 사항은 있지만 무료입니다. 그렇기 때문에 온라인 비즈니스 또는 전자 상거래 사이트를 운영하는 데 사용해서는 안됩니다.

GitHub Pages 소스 리포지토리의 권장 제한은 1GB입니다.

게시된 GitHub 페이지 사이트는 1GB보다 클 수 없습니다.

GitHub Pages 사이트에는 매월 100GB의 소프트 대역폭 제한이 있습니다.

GitHub Pages 사이트에는 시간당 빌드 10개의 소프트 제한이 있습니다.

HTML, CSS & JavaScript로 정적 웹사이트를 구축하는 플랫폼이므로 이 간단한 글부터 개인 웹사이트(Angular, Firebase, Github 페이지)를 만들어 보겠습니다.

새 저장소 만들기

그런 다음 간단한 index.html을 마스터 브랜치로 푸시할 수 있습니다.

git clone https://github.com/username/username.github.io
cd username.github.io 
echo "Hello World!!!" > index.html
// Push your file to github
git add --all 
git commit -m "Initial commit" 
git push -u origin master

프로젝트 설정 확인

지금 양식을 작성하면 웹사이트에 액세스할 수 있습니다. 매력적인가요!!!



이 순간 이후에는 전적으로 당신의 상상력과 기술에 달려 있습니다. index.html 파일을 수정하고 다시 마스터로 푸시 → 완료합니다.

Angular 프로젝트로 Github 페이지 구축

이제 Angular를 활용하여 Github 페이지에 웹 사이트를 구축할 것입니다. Github에 배포하려면 angular-cli-ghpages가 필요합니다.

npm install -g angular-cli-ghpages

웹 사이트는 마스터에 있으므로 개발 프로세스를 위한 dev 브랜치를 생성해야 합니다.

git checkout -b dev

새 Angular 프로젝트를 만들고 프로젝트가 git의 루트 폴더에 있는지 확인합니다.

ng new username-github-io

빌드가 dist/app가 아닌 dist 폴더 아래에 있도록 angular.json 파일을 편집해야 합니다.

배포 준비

ng build --prod --base-href 'https://username.github.io/'
Deploy project to master
 ✔  ngh --message="Commit message"
 ✔  ngh —branch=master
 ✔  ngh --dry-run
 ✔  ngh
> [email protected] deploy
🚀 Successfully published via angular-cli-ghpages! Have a nice day!

예, 내 각도 프로젝트가 Github 페이지에 배포되고 있습니다!!!



이것이 마지막 단계입니다. 마스터 분기에 프로덕션 파일이 있으므로 기본 분기를 dev로 업데이트해야 합니다. Dev 분기는 프로젝트에 대한 더 나은 이해를 제공합니다.

제 Github을 살펴보실 수 있습니다 — 실제 프로젝트는 아직 업데이트되지 않았을 수 있습니다 :)