# 레플릿 + 깃허브 연동하고, 공짜로 서비스 배포하기, 레플릿 꿀팁 2탄 | Replit, Github, CloudFlare

[](https://www.youtube.com/watch?v=NAYDjh_94D4) 

이 영상은 **레플릿(replit)과 깃허브(github)를 연동하여 서비스를 무료로 배포하는 방법**을 다룹니다. 특히, 레플릿에서 개발한 코드를 깃허브로 푸시하고, **클라우드플레어(cloudflare) 또는 넷틀리파이(netlify)와 같은 서비스를 활용하여 저렴하게 배포하는 과정**을 상세히 설명하며, 실시간 업데이트 기능까지 시연합니다.

## 1. 레플릿과 깃허브 연동의 필요성 및 장점

- 레플릿에서 개발한 코드를 깃허브와 연동하면, 코드 보관과 협업이 쉬워짐  깃허브는 개발자들이 코드를 저장하고 협업할 수 있는 공간임

- 깃허브에 연동된 코드는 커서, VS 코드 등 다양한 개발 툴과도 쉽게 연결 가능

- 배포를 레플릿에서만 하는 것이 아니라, 깃허브에 저장된 코드를 다른 서비스(예: 클라우드플레어, 넷틀리파이)로 연동해 배포할 수 있음  레플릿에서는 코드 수정 및 개발만 하고, 배포는 깃허브를 거쳐 외부 서비스에서 진행 가능  예시: 클라우드플레어, 넷틀리파이 등에서 깃허브 코드를 연동해 배포

- 클라우드플레어나 넷틀리파이에서 배포하면 비용이 저렴해 많은 사용자가 서비스를 이용해도 부담이 적음

- **핵심:**레플릿-깃허브-외부 서비스(클라우드플레어 등) 연동으로 개발, 협업, 배포까지 효율적으로 진행 가능

## 2. 링크트리 클론 서비스 제작 및 레플릿에서 코드 준비

- 예시로 링크트리 클론 서비스를 제작함  레플릿에 링크트리 서비스 설명 프롬프트 입력 및 실행  결과물에 대해 직접 수정(버튼, 프로필 사진, 링크 등)

- 제작 과정은 빠르게 넘어감

## 3. 레플릿과 깃허브 연동 방법

- 레플릿 왼쪽 메뉴에서 '올툴즈' 클릭 후 '기술' 클릭

- 세팅 안내문구가 나오면 클릭

- '깃허브와 연동' 클릭 시 깃허브 로그인 페이지로 이동  로그인 후 권한 승인하면 연동 완료

- 레플릿으로 돌아와 새로고침 후 안내문구 클릭

- 레포지토리 이름과 설명 입력 후 생성  깃허브에서 프로젝트 폴더가 생성됨

- 깃허브에서 레포지토리 생성 확인 가능

- 레플릿에서 '푸시브랜치' 버튼 클릭  레플릿에서 만든 코드가 깃허브레포지토리에 모두 푸시됨

- 이로써 레플릿과 깃허브연동 완료

## 4. 깃허브와 클라우드플레어 연동 및 배포 방법

- 클라우드플레어 로그인 후, 왼쪽 메뉴에서 '워커스 앤 페이지' → '페이지스' → '깃허브연동' 클릭

- 깃허브와 연동하면, 원하는 레포지토리 선택 후 다음 단계로 진행

- 개발 언어나 프레임워크에 따라 명령어가 다르므로, 레플릿 어시스턴트에게 문의 권장  예시: HTML로만 만들었을 경우 별도 입력 없이 진행 가능

- 설정이 끝나면 배포 완료, 제공된 링크에서 서비스 확인 가능

- 레플릿에서 코드 수정 후, 깃허브푸시 버튼을 누르면 클라우드플레어에서 자동으로 실시간 배포됨

## 5. 마무리 및 참고사항

- 레플릿, 깃허브, 클라우드플레어연동을 통해 서비스 배포까지 진행 가능함을 시연

- 깃허브와 연동하면 다양한 외부 서비스와 연결 가능하므로 참고할 것

- 궁금한 점은 댓글이나 오픈 톡방에서 질문 가능

- 구독과 좋아요 요청 및 마무리 인사

![Image](https://upload.cafenono.com/image/slashpagePost/20250708/233713_r25QxMixI3AY303Zsw?q=80&s=1280x180&t=outside&f=webp)

![Image](https://upload.cafenono.com/image/slashpagePost/20250708/233332_GeqOg9iUBVqisnst1P?q=80&s=1280x180&t=outside&f=webp)

![Image](https://upload.cafenono.com/image/slashpagePost/20250708/231343_XL3iLh0qAn2LbDppmW?q=80&s=1280x180&t=outside&f=webp)

For the site tree, see the [root Markdown](https://slashpage.com/timetomake.md).