쉬운 3단계로 CodePen에서 라이브 사이트로: EdgeOne Pages로 배포하기
Ethan Mercer
모든 개발자는 이런 느낌을 알고 있습니다: CodePen에서 놀라운 것을 만들었을 때—아마도 멋진 CSS 애니메이션, 인터랙티브한 JavaScript 위젯, 또는 아름다운 랜딩 페이지 프로토타입일 수도 있습니다. 이제 그것을 단지 Pen으로서가 아니라 실제 독립형 웹사이트로 세상과 공유하고 싶을 것입니다.
전통적인 배포는 종종 Git과의 씨름, 빌드 도구 구성 또는 복잡한 호스팅 플랫폼 탐색을 포함합니다. 그러나 EdgeOne Pages를 사용하면 CodePen에서 단 30초 만에 라이브 프로덕션급 사이트로 전환할 수 있습니다.
30초 미리보기
세부 사항에 들어가기 전에, 이 과정이 얼마나 간단한지 살펴보겠습니다. 전체 워크플로는 단 세 가지 작업으로 구성됩니다: 내보내기 → 끌어다 놓기 → 배포.
끝입니다. 터미널 명령어, 설정 파일, 계정 설정이 필요 없습니다. 이 글을 읽으실 때쯤이면 이미 완료하셨을 겁니다.
우리는 등록이 필요 없는 완전 무료 서비스를 제공하며, 사용량 제한에 빠르게 도달하는 걱정 없이 관대한 무료 티어 한도를 즐기면서 엔터프라이즈급 인프라가 지원하는 강력한 기능을 즉시 경험할 수 있습니다.
라이브로 가는 세 단계
1단계: CodePen 프로젝트 내보내기
먼저, CodePen 작품으로 이동합니다. 에디터 오른쪽 하단에서 "Export" 버튼을 찾을 수 있습니다. 클릭한 다음 드롭다운 메뉴에서 "Export .zip"을 선택하세요.
CodePen은 모든 것을 깔끔한 ZIP으로 묶습니다.
중요: 다운로드 후, 압축을 풀고 dist 폴더에 들어가, index.html이 루트 레벨에 있는지 확인하세요. EdgeOne Pages는 최상위 폴더에서 찾은 HTML 파일을 자동으로 제공하므로 적절한 파일 구조가 중요합니다.
2단계: 드래그 앤 드롭 마법
브라우저를 열고 Pages Drop으로 이동하세요. 큰 드롭 영역이 있는 깔끔하고 직관적인 인터페이스가 보일 것입니다.
간단히 "dist" 폴더를 드롭 영역에 끌어다 놓으세요. 플랫폼은 즉시:
- 파일을 스캔합니다
- 미리보기 썸네일을 생성합니다
- 프로젝트 구조를 검증합니다
- 배포를 준비합니다
시각적 피드백은 즉각적입니다—파일이 실시간으로 처리되는 것을 볼 수 있어 모든 것이 올바르게 작동하고 있다는 확신을 줍니다.
3단계: 원클릭 배포
여기서 마법이 일어납니다. 두 가지 옵션이 있습니다:
- 빠른 배포: 자동 생성된 URL을 위해 "Deploy" 버튼을 누르세요
- 사용자 정의 서브도메인: 배포하기 전에 "my-awesome-pen"과 같은 기억하기 쉬운 이름을 입력하세요
"Deploy"를 클릭하면 약 10초 내에 라이브 URL을 받게 됩니다:
https://my-awesome-pen.edgeone.app축하합니다! 이제 당신의 사이트는 인터넷에 라이브되었고, HTTPS로 보안되었으며, CDN을 통해 전 세계적으로 배포되어 누구와도 공유할 준비가 되었습니다.
결론
단 30초 만에 모든 CodePen 작품을 엔터프라이즈급 호스팅, 글로벌 CDN 배포, 자동 HTTPS를 갖춘 프로덕션급 웹사이트로 변환할 수 있습니다—모두 무료로요. 터미널 명령어, 구성 파일, 신용카드가 필요 없습니다. 당신이 원활한 배포 옵션을 찾는 노련한 개발자이든 CodePen을 넘어 첫 걸음을 떼는 초보자이든, EdgeOne Pages는 당신의 창의력과 세상 사이의 장벽을 제거합니다. 배포할 준비가 되셨나요? Pages Drop으로 이동하여 작업을 공유하는 것이 얼마나 쉬운지 직접 확인해보세요.