사이트 전체 복사, 무료로 웹사이트 호스팅 (Netlify)

 

✔ 만약 어떤 사이트의 구조를 참고하거나 특정한 목적으로 코드를 알고 싶다면

아래 방법으로 html 코드 전체를 복사할 수 있다. 

1단계: 복사하고 싶은 웹사이트를 엽니다.

2단계: 마우스 오른쪽 버튼을 클릭하고 검사를 선택합니다.

3단계: 그러면 HTML, CSS 및 사이트에서 사용된 언어로 된 요소에 대한 코드가 열립니다.

4단계: 코드 상단에서 html lang 부분에 마우스 오른쪽 버튼으로 클릭합니다.

5단계: 그러면 옵션 상자가 열립니다. copy > outerHTML copy를 선택하면 전체 복사 완료

6단계: VisualStudioCode 등 코드 편집기에서 열어서 사용합니다.

 

 

✔전체 구조와 리소스를 한꺼번에 저장하고 싶다면

브라우저에서 Ctrl + S(페이지를 다른 이름으로 저장)를 눌러 '웹 페이지, 전부' 옵션 선택!

 

 

** 만약 디자인을 그대로 배포한다면 저작권 문제가 발생할 수 있기 때문에, 참고용으로 사용하길 바란다.

 

---

 

무료 웹사이트 호스팅 2가지 방법

 

1. github pages

 

github repository > settings > Pages > Build and Deployment

에서 깃허브 프로젝트의 호스팅이 가능하다.

 

❗ 무료로 사용하려면 repository를 무조건 public으로 변경해야 하는 단점이 있었다..
학생인증을 하면 무료로 가능하긴 한데 이미 졸업했다..

 

2. Netlify

 

나는 리포지토리를 private로 유지하고 싶었기 때문에 Netlify라는 서비스를 이용하기로 했다.

Netlify에 Github으로 로그인 한 뒤에 리포지토리 권한 승인을 해주고,

원하는 리포지토리를 선택하면 된다.

이때 Deploy site 했을 때 Page Not Found라고 뜬다면, 폴더 경로 설정이 잘못 된 것이다.

Project configuration > Build & deploy 에서 올바른 경로로 설정해 주고 Trigger deploy를 하면 다시 배포가 된다.

 

설정
Base directory: 프로젝트 루트
Publish directory: docs (만든 웹사이트 폴더)
Build command: (비워둠, 정적 사이트이므로 빌드 명령 필요 없음)

 

 

⭐ 장점은 repo를 public으로 변경할 필요 없다는 것,

그리고 'Continuous Deployment' 다.

github에서 푸쉬만 하면 자동으로 업데이트해서 사이트를 배포하기 때문이다!

 

 

---

완성 사이트는 개인적인 용도라서 공개하지 않지만, 만드는 게 정말 어렵지 않았다!

좋은 세상이다...