말랑말랑제리스타일
웹사이트 만들기부터 무료 배포까지 30분만에 뚝딱 본문
웹사이트 만들기 뭐부터 해야 될지 모르겠고 배포는 어떻게 할 지도 잘 모르겠고 설치를 하자니 번거롭죠. 아무것도 설치하지 않고 배포까지 30분 내외로 한번 끝내볼 수 있도록 해드리겠습니다.
이 프로젝트에서는 설치 없이 프로젝트를 생성하는 구름 IDE와 웹사이트 꾸미기를 위한 부트스트랩, 소스 코드 배포를 위한 깃허브와 무료로 호스팅 배포 서비스를 위한 Netlify를 이용할 겁니다.
뭐가 많아 보이지만 코딩을 잘 몰라도 웹 코딩을 안 해봤더라도 크게 어려울 건 없습니다.
구름 IDE에서 웹사이트 프로젝트 생성하기
구름 IDE 홈페이지로 들어가 줍시다.
구름 IDE를 쓰는 이유는 별도 설치가 전혀 필요 없고 Github 배포까지 상당히 간단하게 되기 때문이죠.
goormIDE - A Powerful Cloud IDE Service
goormIDE is a cloud IDE service to maximize productivity for developers and teams. Develop and deploy your service with powerful collaborative features, anytime and anywhere.
ide.goorm.io
구름 IDE 회원가입을 해줘야 하는데 간단하게 구글 로그인으로 회원가입만 해도 바로 사용이 가능합니다.
회원가입이 끝났으면 로그인을 하고 새 컨테이너를 눌러서 컨테이너를 생성해 줍니다.
컨테이너 생성하기에서 근사한 이름을 하나 지어줍시다. 설명은 입력하든 안 하든 선택사항이고, 지역은 서울로 잡아줄게요.
공개는 private으로 해도 충분하고 외부 프로젝트 일단 사용하지 않을 거니까 기본 템플릿으로 만들어줍시다.
배포는 일단 Not used로 놔두고 소프트웨어 스택은 HTML/CSS/JS를 선택해 줍니다.
선택하면 템플릿은 기본 프로젝트로 나올 거고 OS는 우분투로 나올 텐데 이건 구름 IDE 기본 세팅이라고 생각하시고 넘어갑니다.
추가 도구는 필요 없어요. 그러고 나서 생성하기 버튼을 눌러주세요.
여기까지 요약을 하면 구름 IDE 회원가입을 하고 새 컨테이너를 눌러서 컨테이너 이름과 소프트웨어 스택만 선택하고 만 생성하기를 눌러준 거죠.
그러면 컨테이너 준비 중이라는 문구가 나오면서 잠깐 기다려야 하죠? 기다려줍시다.
구름 IDE에서 장고 같은 무거운 프로젝트는 중간에 간식 한번 먹고 와야 하는데 HTML 웹사이트 프로젝트는 만드는데 얼마 안 걸려요
완료되면 컨테이너 실행하기 버튼이 보일 겁니다.
들어가 주세요.
그러면 우리가 만든 웹사이트 프로젝트의 제목이 보입니다.
자 이걸 한번 실행해 볼게요. index.html 파일을 클릭하면 미리 구름 IDE에서 생성해 준 코드가 있습니다.
Hello goorm이라고 돼있는데 이걸 "여기는 나의 근사한 홈페이지입니다. 예의를 갖추세요."라고 바꿔볼게요.
그러고 나서 우측 상단에 동그라미 쳐둔 index.html을 눌러보면 작업공간에서 미리 보기가 나옵니다.
이걸 눌러주세요.
그러면 방금 작성한 텍스트가 그대로 나오죠.
이게 우리의 웹사이트 화면입니다. 만들기라면 실제로는 끝이 났다고 봐도 무방한데요.
너무 허접해 보입니다.
메뉴랑 이래저래 뭘 좀 넣어볼게요.
Bootstrap을 이용해 웹사이트 꾸미기
Bootstrap이라는 사이트로 이동해 줍니다. 구글에서 Bootstrap이라고 검색해도 되는데 저는 5.0 버전 쓸거라 5.0 버전의 링크를 드릴게요. 부트스트랩이 뭔지 궁금하시다면 간단히 알려드리는 게 인지상정이죠.
저 같은 디자인에는 전혀 관련이 없는 개발자들을 위해 미리 만들어놓은 도구 모음이라고 생각하시면 됩니다.
거두절미하고 들어가 줍니다. 심지어 회원가입도 필요가 없습니다.
https://getbootstrap.com/docs/5.0/getting-started/introduction/
Introduction
Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.
getbootstrap.com
들어가면 뭐 알아보기 힘든 말이 많이 있습니다.
다른 거 필요 없고 조금만 내려보면 CSS라고 돼있는 게 보입니다.
이걸 복사해 주세요. Copy 버튼을 눌러만 주면 됩니다.
그리고 우리 웹페이지의 index.html로 돌아와서 </head> 바로 윗줄에 넣어줍니다.
그리고 </body> 바로 윗줄에는 JS Bundle이라고 되어있는 부분을 복사해서 넣어줍니다.
상단 캡처 화면에 다 나와있죠?
자 이제 부트스트랩 사용 세팅이 다 끝났습니다.
이제 부트스트랩 페이지로 다시 가서 좌상단 Search docs라고 검색하는 부분에 Navbar라고 하나 검색해 줍니다.
그러면 뭐가 많이 나오죠? 이 중에서 저는 비교적 간단해 보이는 NavBar를 하나 가져와볼게요.
자 이걸 복사해서 <body> 바로 밑에 붙여 넣어봅시다.
그리고 저장을 하면 아까 미리 보기 화면이 약간 바뀌었죠? 내비게이션 바가 잘 안 보인다면 화면을 좌측으로 살짝만 당겨주면 우리가 방금 부트스트랩 홈페이지 예시로 봤던 것과 똑같은 게 우리 웹사이트 안에 들어있습니다.
메뉴를 좀 바꿔볼까요?
물론 아직 버튼은 동작을 안 하지만 놔두고 나중에 여러분이 근사하게 꾸며주세요.
부트스트랩에서 카드나 이미지나 뭐 다양한걸 갖다 쓰시면 됩니다.
일단 배포까지 30분 만에 달려야 되니까 생략할게요.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">GreateJerryHouse</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="#">내 홈페이지</a>
<a class="nav-link" href="#">엄청난 것</a>
<a class="nav-link" href="#">또 다른 엄청난 것</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">이건 사용 안해</a>
</div>
</div>
</div>
</nav>
<div class="title">
여기는 나의 근사한 홈페이지입니다. 예의를 갖추세요
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>우리의 웹사이트 소스코드는 현재까지 이게 다입니다.
구름 IDE 웹사이트 프로젝트 깃허브에 연동하기.
자 구름 IDE 프로젝트 왼쪽을 보면 Git이라는 메뉴가 있어요.
지금부터 우리는 깃허브랑 연동해서 배포를 위한 준비를 마칠 겁니다.
별거 없으니 잘 따라와 주세요.
여기 표시한 깃 버튼을 눌러보면 저장소 연결하기라는 버튼이 우리를 기다리죠.
눌러줍시다. 그러면 깃허브 인증하기라는 버튼이 보입니다.
잠깐 Github 사이트로 가줍니다.
GitHub: Let’s build from here
GitHub is where over 100 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review code like a pro, track bugs and fea...
github.com
사이트에 들어가서 간단히 회원가입을 해주면 이제 대시보드가 나옵니다.
여기서 New 버튼을 눌러줍시다.
Owner는 본인 계정이 나올 거고 Repository name에는 근사한 이름을 하나 입력해 주면 됩니다.
물론 Description은 입력을 안 해도 됩니다.
공개 범위는 public으로 해주시고, 그대로 Create repository를 눌러 Repository 생성을 끝내줍니다.
뭐가 막 나오죠?
여기서 두 번째에 or create a new repository on the command line 내용을 복사해 줍니다.
그리고 윈도 cmd 창을 열어서 붙여 넣어주세요.
뭐가 막 나오죠? 기다리다가 그만 나온다 싶으면 엔터키를 한번 눌러주세요. 이게 바로 지금 가오가이거 합체 버튼 급으로 중요한 에터입니다.
로그인 인증을 하라고 나오는데 로그인하고 인증해 줍니다.
그리고 Github 화면을 새로고침 해주면 뭐가 바겼죠? Readme 파일도 나오고 그러는데 일단 무시하고 구름 IDE 컨테이너로 돌아갑니다.
Github 인증하기 버튼을 눌러서 Github 계정과 연동시켜 줍시다.
잠깐 기다려주면 Gibhub 연결됨이라고 나오면서 클론 할 저장소에 방금 만든 Repository가 보일 겁니다.
좀 전에 만든 Repository를 선택해 줍니다.
그리고 저장소 가져오기를 바로 누르면 이미 같은 이름의 폴더가 존재한다는 에러가 뜰 겁니다.
그러니까 선택하고 워크스페이스에 myhomepage를 입력해 줍니다.
자 그러고 나서 다시 가방 모양 프로젝트 아이콘을 눌러서 들어가면 myhomepage라는 폴더가 하나 생겼죠?
이 안으로 프로젝트에 있는 index.html 파일과 style.css 파일을 복사해서 넣어줍니다.
그리고 다시 깃으로 가주면 스테이지에서 제외된 파일로 방금 올려준 index.html이랑 style.css 파일이 보입니다.
스테이지에서 제외된 파일이라고 된 부분 오른쪽에 플러스 버튼을 눌러서 둘 다 추가해 주고 하단에 commit message를 적어준 뒤 main에 커밋하기 버튼을 눌러줍시다.
그리고 잠깐 기다렸다가 히스토리를 보면 방금 커밋한 히스토리가 나올 거예요.
그 위에 있는 Push 버튼을 눌러줍니다.
그리고 다시 깃허브 사이트로 가보면 우리가 방금 만든 index.html 파일이 올라온 것을 볼 수 있습니다.
Netlify 무료 호스팅 서비스로 웹사이트 배포하기
마지막으로 Netlify라는 무료 호스팅 서비스를 이용해서 지금 만든 웹사이트를 배포해 봅시다.
먼저 아래의 링크로 netlify 사이트로 접속해 주시고 우측 상단의 Sign up 버튼을 눌러 회원가입을 하고 로그인을 해줍니다.
Develop and deploy websites and apps in record time | Netlify
Accelerate the time to deploy your websites and apps. Bring your integrations and APIs together on one powerful serverless platform. Get started for free!
www.netlify.com
들어가면 무슨 대시보드가 나오는데 중간에 있는 Add new site 버튼을 눌러주세요.
그러면 선택지가 나오죠. 여기서 우리는 이미 프로젝트를 생성했기 때문에 Import an existing project를 선택할 겁니다.
들어와서 깃허브 선택해 주면 화면이 바뀌는데요.
일단 저는 프로젝트가 안 보이네요. 계정을 클릭해서 add another organization을 선택해 줍니다.
그럼 팝업이 하나 뜨는데 스크롤 쭉 내려서 Only select repositories가 클릭되어 있는 라디오버튼 밑에 Select repositories를 눌러 방금 만든 깃허브 Repository를 선택해 주세요. 그리고 저장하면 화면에 보일 겁니다.
그럼 또 뭐가 많이 나오고 뭔 소린지 모르겠죠?
그냥 Deploy site 버튼 눌러줍니다.
그러면 Your site is deployed라고 나오고 Custom Domain을 입력하라고 나옵니다.
여기에 다른 도메인을 구매하신 분들은 넣으시면 되는데 저는 이 사이트를 바로 부술 거라서 따로 안 넣을 거긴 한데 일단 화면 상단의 Domain Setting으로 가줍니다.
그리고 우측에 보이는 Options. 를 눌러보면 Edit Site name이라고 나오죠?
여기에 영어로 사이트 이름을 하나 잡아줍니다.
그리고 Save 버튼을 눌러줍니다.
그럼 좌측에 방금 넣은 사이트 이름. netlify.app이라는 주소가 하나 나오죠.
이걸 클릭하면 우리가 만든 사이트로 들어갈 수 있습니다.
배포가 잘 되었는지 확인하기 위해 모바일로도 접속해 보면 잘 되는 걸 확인할 수 있습니다.
참고로 이 웹사이트는 설명드리기 위해 만들어본 거라 바로 부술 거고 아래 사이트가 예전에 이런 방식으로 만든 사이트입니다. 잘 보시면 아시겠지만 카카오 광고도 붙여놓고 뭐 이것저것 붙여 넣어 만든 사이트입니다.
조코딩 영상 따라 만든 건데 실제로 이런 것도 해보면 별로 어렵지는 않습니다.
https://marvelheroface.netlify.app/
마블히어로
마블히어로닮은꼴
marvelheroface.netlify.app
혹시 30분 넘게 걸리셨는지 아니면 금방 끝냈는지 모르겠지만 이런 것도 반복 학습이라고 두세 번 하다 보면 그냥 새우깡 먹듯이 손이 갑니다.
그러니 포기하지 마시고 한번 연습한다는 생각으로 잘 따라 해보셨길 바랍니다.
'프로그래밍 > 웹코딩(html&JS)' 카테고리의 다른 글
| 리액트 5.0 이상 버전 사용시 "webpack < 5 used" 에러 조치 방법 (0) | 2023.10.05 |
|---|---|
| HTML 파일 소스 나누기 두가지 방법(부트스트랩) (0) | 2023.08.17 |
| 깃허브 코파일럿 자바스크립트 한 달 사용 후기 (0) | 2023.08.17 |
| 구름 IDE에서 React 프로젝트 생성하고 실행 (0) | 2023.06.23 |
| BootStrap 이용해서 Javascript 메뉴바 만들기 (0) | 2021.12.31 |
