[HTML 공부하기 3] HTML 템플릿 수정하고 배포(deploy)하기, 웹 사이트 쉽게 만드는 법. (Free CSS, Start Bootstrap, Netlify)
오늘은 HTML 템플릿을 활용하는 방법을 알아볼게요!
누군가가 무료로 배포해놓은 템플릿을 활용해서 내가 원하는 문구만 변경하여 홈페이지를 만들 수도 있습니다.
저도 아직 어떤 사이트가 좋은지 잘 모르겠지만, 무료로 다운로드 받을 수 있는 사이트를 소개해드리겠습니다!
Free CSS
Download 3511 Free Website Templates - CSS & HTML | Free CSS
www.free-css.com
Free CSS라는 사이트인데요, 원하시는 템플릿을 선택해서 다운로드 버튼을 누르면 무료 다운로드가 됩니다.
Premium 템플릿은 별도 사이트로 이동되고 따로 구매해야 하는 것 같습니다.
Start Bootstrap
Start Bootstrap
startbootstrap.com
개인적으로는, 여기가 더 깔끔하고 세련된 템플릿이 많은 것 같아요.
여기도 마찬가지로 원하는 템플릿을 선택하고 Free Download 버튼을 누르면 다운로드가 됩니다.
HTML 템플릿 활용하기
파일을 다운로드하고 압축을 풀면, 이런 내용물들이 있는데요 index.html 파일이 메인파일이 되겠습니다.
visual studio에서 index.html이 들어있는 상위폴더를 열면(open folder), 관련 asset들과 index.html 파일이 추가된 걸 확인하실 수 있어요!
이 index.html 파일을 실행시키면, 이런 페이지가 열립니다. 이건 우리 로컬 컴퓨터에서 실행한 웹파일에 불과합니다. 저는 여기 Welcom To Our Studio! 부분을 조금 바꿔보고 싶어서, index.html 파일에서 관련된 부분을 찾아봤습니다.
드래그해서 표시해놓은 부분이 바로 웹 페이지 메인 화면에 표시되는 문장입니다.
저는 바로 이부분을 오른쪽과 같이 수정하고 파일을 다시 열었더니, 아래와 같이 변경된 걸 확인할 수 있었어요!
이런식으로 내가 좋아하는 템플릿을 고르고, 우리 입맛에 맞게 내용을 바꾸기만 하면 간단한게 웹 사이트를 만들 수 있어요!
배포(Deploy)
이제 우리가 만든(수정한) index.html 파일을 서버에 업로드해서 다른 사람들도 접근할 수 있도록 해보겠습니다.
저는 netlify라는 서버를 이용해보려고 합니다.
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
netlify가 관리, 운영하는 서버에 우리 html 파일을 업로드하면, 내 파일이 저장된 주소(url)가 생성됩니다. 그러면 이제 누구나 그 주소를 통해 제가 만든 홈페이지에 접속할 수 있게 됩니다.
Netlify 이용하기
Netlify에 회원가입을 하고 접속을 하면, 아래와 같은 화면이 뜹니다. 여기서 Sites라는 부분을 선택해줍니다.
그럼 이 화면이 나오는데, 저는 이미 생성해놓은 페이지가 있어서 표시가 되는 거고, 오른쪽 위에 있는 'Add new site' → 'Import an existing project' 를 차례로 선택합니다.
내가 만든 HTML 파일을 가지고 홈페이지를 만들고 싶다면, Try Netlify Drop을 선택해야 합니다.
그리고, 위 화면에서 직접 내 html 파일이 포함된 상위 폴더를 업로드하면 됩니다!
업로드가 제대로되면, 내 홈페이지에 대한 URL이 생성됩니다! 기본적으로 제공되는 도메인(URL)은 복잡하고 가독성도 떨어지는데요. 도메인 주소를 변경할 수도 있습니다.
Site configuration 메뉴에서, Domain 하위메뉴를 선택하면 오른쪽 'option'버튼을 통해 새로운 도메인으로 변경할 수 있습니다!
어쩔 수 없이 .netlify.app이 붙긴 하지만, 아까보다는 훨씬 깔끔하게 변경할 수 있습니다.
그게 아니라 .com이나 다른 도메인을 사용하려면 도메인을 구매해야 합니다.
도메인을 구매하고 netlify에 저장된 내 html의 도메인을 구매한 도메인으로 변경하는 방법은 다음에 공부해보겠습니다!