코딩 독학하기2 : 내가 만든 사이트 인터넷에 공개하기(.COM 도메인, HTTPS 적용하기,HTML템플릿 수정하기) (조코딩 유튜브로 공부하기)

조코딩 유튜브를 통해 개인적으로 실습한 내용을 정리한 것입니다.

HTML 진짜 기초 밖에 모르지만,

도메인으로 구현되는 것을 보니 진짜 신기하네요!!

이 유튜버 분은 정말 쉽고, 코딩에 흥미를 가질 수 있게 가르쳐 주는 것 같아요.

 

이 내용을 보기 전에 HTML에 대해 전혀 모르신다면,

제 이전 블로그 글과 조코딩 유튜브 영상들을 확인해주세요!

 

---

 

내가 만든 사이트를 인터넷에 공개하는 방법 2가지

1. 내 컴퓨터를 서버로 만드는 법

2. 외부 서버를 이용하는 법 (웹호스팅)

 

 

💻내 컴퓨터를 서버로 만드는 법
인터넷에 내 IP주소를 알리는 방법

출처 : undraw

개인 컴퓨터를 공개하는 것이기에 보안 취약

사람들이 언제나 접속하게 하려면 24시간 내 컴퓨터 가동 필요

유지비용이 많이 들기 때문에 보통은 이런 방법으로 하진 않겠죠..?

 

💻외부 서버를 이용하는 방법

큰 기업이 운영하는 자체 서버실의

서버 일부를 빌려서 내 HTML 파일을 배포

출처 : Unsplash

이러한 외부 서버를 활용하는 방식을

웹 호스팅 or 클라우드 서버

라고 합니다.

 

간혹 아마존과 같은 큰 기업에서도 서버 관리에 문제가 생기기도 하는데,

그래도 개인 컴퓨터를 사용하는 것보다 훨씬 안전한 방식.

 

 

💻웹 호스팅 (클라우드 서버) 제공 업체

Amazon(클라우드 업계 1위이나 요금이 비싼 편)

Microsoft Azure, GoDaddy, Google Cloud, netlify 등

다양한 서비스가 있습니다.

 

이 중 코딩 공부를 위해 사용할 업체는

netlify입니다.

 

netlify는

일단 무료이고

편리하고 다양한 부가기능을 제공하며

초보에게도 쉬운 구성으로

이루어졌다고 합니다.

 

 

 

💻netflify 이용해 내 사이트 배포해보기

 

1) html free template 다운받기
2) html 코드 수정하기
3) netlify.com을 이용해 배포하기

순으로 진행하겠습니다.

 

먼저, 이 실습을 위해서는 HTML파일이 필요합니다.

지금은 만들어 둔 것이 없기 때문에,

HTML 템플릿을 다운 받아 연습해보겠습니다.

 

1) html free template 다운받기

구글 검색창에 'html free template' 검색

아무 사이트나 들어가셔서

원하는 템플릿을 다운 받아주시면 됩니다.

 

제가 연습용으로 파일을 다운 받은 사이트는

https://www.free-css.com/free-css-templates

이곳 입니다.

 

다운을 받아 압축을 풀면 파일들이 많이 있습니다.

이때, 무료로 변경 및 배포가 가능한 파일인지,

상업적 이용이 가능한지 등

저작권 관련 파일에 명시되어 있으니 꼭 확인해보세요!

 

 

2) HTML코드 수정하기

그리고,

'index.html' 파일을

VScode같은 코드 편집기로 열어줍니다. 

(그냥 클릭해서 열면 웹페이지 형태가 나옵니다)

 

자신의 콘텐츠로 내용을 수정하면 됩니다.

일단은 제목만 바꿔보겠습니다.

 

제목만 바꾸기 위해서는

HTML창에서 '제목' 태그가 어디있는지

바꾸고자 하는 요소가 HTML로 어떻게 쓰였는지 알아야합니다.

 

코딩 언어를 공부 많이 공부하면 자연스럽게 읽히겠지만, 처음에는 어렵겠죠?

이때, 개발자 도구를 이용해 쉽게 찾을 수 있습니다.

 

다운받은 템플릿의 index.html 파일을 열고,

F12 키나 오른쪽 마우스 클릭 후 '페이지 소스보기'를 눌러서

HTML 코드가 보여지는 개발자 도구를 엽니다.

 

위의 이미지에 표시한대로 바꾸고자 하는 (저는 제목 부분) 요소의

태그를 찾으시면 됩니다.

 

저는 VScode를 이용해 연 index.html 파일에서

저렇게 '템플릿으로 코딩 연습하기'로 제목을 바꿔주었습니다.

 

 

3) netlify.com을 이용해 배포하기

회원가입 후,

작업한 파일이 들어있는 폴더를 통째로 드래그합니다.

 

잠시 기다리면,

deploy이가 완료됩니다.

 

이제, 주소(도메인 네임)를 바꾸기 위해

Site settings를 클릭합니다.

 

Chanage site name을 클릭하고,

원하는 주소를 입력합니다.

 

이제 변경 된 주소로 누구나 접속할 수 있는

사이트가 생성되었습니다!

 

https://selfstudytest.netlify.app

저는 이렇게 해봤네요..ㅎㅎ

계속 연습하면서 수정해보도록 하겠습니다!

 

 

*링크의 유튜브 내용을 보고 독학하며 정리한 내용입니다.

자세한 내용과 영상을 보며 따라하고 싶으신 분들은 링크를 참조해주세요.

https://www.youtube.com/watch?v=LnGgndT308Q