Github+Netlify로 간편한 정적 파일 공개

4632 단어 초보자NetlifyGitHub

하고 싶은 일


  • 만든 html, css를 사용하여 모든 사람이 웹에서 볼 수있게하고 싶습니다.
  • 프런트의 코딩을 자신 이외의 사람에게 부탁하고 있다든가, 프리뷰 사이트를 간편하게 만들고 싶다

    • 절차



    코딩을 위한 리포지토리 생성





    적절하게 html 파일 만들기


    $ git clone git@github.com:yomasaa/sample-netlify.git
$ vi index.html
test
$ git add index.html
$ git commit -m "Add 'index.html'"
$ git push

    이제 매우 적당한 HTML을 만들고 github에 push되었습니다 ...!



    netlify로 새 프로젝트 만들기



    ※ 계정 미작성의 사람은 미리 작성해 둔다

  • htps : // 아 p. 네 tぃfy. 코m/ 방문 ...!
  • "New site from Git"


  • Github


  • 이번에 작성한 리포지토리를 지정 ...!


  • 배포 설정
  • 배포할 브랜치 지정(이번에는 master )
  • 빌드 스크립트 지정 npm run build 라든지 ...
  • 공개 할 디렉토리의 지정 dist/ 라든지 ...
  • 빌드시에 필요한 환경 변수가 있으면 설정 가능



  • "Deploy site"...!
  • ... 잠시 기다리면



  • htps : // 네 tぃfy. 코m/에 작성한 HTML이 표시됩니다.



    [참고 1] 전개되면 slack에게 통지하고 싶다


  • [Site settings] > Build & deploy > Add notification


  • 알림 타이밍 설정 ...! (이번에는 index.html)
  • Webhook URL에는 slack로 취득한 Incoming WebHooks의 URL (channel 지정이 있으면 맞추어 지정)


  • 이 상태에서 적절하게 파일을 수정해, push...!

    • - 배포 된 slack에 왔습니다 ...!





    [참고 2] 수정하여 풀 요청 작성으로 새롭게 미리보기 페이지를 작성하고 싶다


  • Deploy succeeded 브랜치에서 새 브랜치 만들기
  • 적당히 파일을 수정하고 push + 풀 요청 작성 ...!
  • 배포 된 것이 slack에 왔다 ...! (2 번째)


  • Create pr의 링크를 누르면 풀릭으로 만든 상태의 소스에서 미리보기를 확인할 수 있습니다 ...!

    • [참고 3] 미리보기 상태의 사이트에 인증을 하고 싶다


  • Site settings] > "Access control"


  • master 그렇지 않으면 할 수없는 것 같습니다 ...?
    • Angular를, 고기능 호스팅 서비스 「Netlify」로 사용해 고속화/Lighthouse 고득점 취하기 위한 빌드 파일을 공개했습니다
    【Netlify】드래그＆드롭으로 WEB 사이트를 공개한다

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage