생활코딩 WEB1 - HTML & Internet 18강 정리

2021-12-12 23:37:56

 

WEB1-18강. 웹호스팅 : github page

인터넷이 연결되어 있는 컴퓨터 한 대, 한 대 = host

웹 서버를 운영하기 위한 컴퓨터, host를 빌려주는 회사 = 웹 호스팅 업체

깃허브 서비스 중 하나가 홈페이지 운영할 수 있는 웹 서버를 무료로 제공

---

깃허브 사용하기

1. Sign up(회원가입)

2. Sign in(로그인)

3. New repository

(*Repository = 저장하는 공간, 저장소,

깃허브는 작성한 코드 소스를 보관, 프로그래머 전용 파일 보관이라고 보면 됨)

4. Create a new repository에서 Repository name(프로젝트 이름)넣고 public

5. initialize this repository with a README

생활코딩에서는 꼭 체크하라고 했지만 README 체크하고 생활코딩 동영상 그대로 하려고

Add gitignore:None, Add a license:None 되어있는 그대로 했지만 Create버튼이 안눌러지게 되어서

그냥 README체크 안하고 생성, 혹시 몰라 README에 대해 찾아보니 프로젝트에 대한 설명을 적어놓는 파일임)

6. Create repository(저장소생성하기)

7. Upload files - 업로드 파일 드래그 앤 드롭하거나 파일 선택 - 파일 선택 후 open(업로드)

  - Add files via upload (어떤 내용 담고 있는지 적기 ex.first version)- Commit Changes

8. 파일 수정되면 또 업로드, 변경사항 있을 때마다 저장 (=버전관리)

---

HTML파일 웹사이트로 열 수 있게 하기

Settings 들어가서 쭈욱 내려가면 GitHub Pages가 나오는데

Source 밑에 None을 master branch - save

생활코딩에서는 이렇게 하라고 했지만 현재 2021년에는 바뀌어 있었음, 그래서 이렇게 했음

Settings - GitHub Pages에 Check it out here!클릭

Source 밑에 None을 Branch:main으로 변경하면 옆에 폴더아이콘모양/(root)▼가 나옴

save

이렇게 하면 주소가 나오고 주소를 누르면

우리가 만든 웹 페이지를 볼 수 있음

 

*접속했는데 안될 수가 있을 때는 생활코딩에서는 주소 뒤에 index.html을 붙이라고 함

그러나 저는 그렇게 해도 되지 않아서 검색해서 이 방법 저 방법 다 사용했다가

혼자 코딩 독학 하시는 어떤 분의 블로그에서 알려준 방법으로 했더니 웹페이지가 나왔습니다.

 

저의 문제점은 주소를 눌렀을 때 404에러가 계속 떴습니다.

해결방안은 홈페이지를 만들기 위해 사용했던 에디터에서 저장할 때

이름을 index.html로 저장하기! -이것만 바꿨는데 페이지가 떴습니다.

이렇게 해도 안되는 분들은 2번째 방법도 있기 때문에

제가 참고한 '나 혼자 블로그' 링크 걸어 놓겠습니다.

---

18강 정리

내 컴퓨터에 index.html 파일이 있고 다른 사람이 접속할 수 있게 하고 싶다,

but, 내 컴퓨터에는 웹 서버가 설치되어 있지 않고 

내 컴퓨터에 외부 접속 허용하게 설정해야 하는데 안되어 있고

하려면 배워야 하고 복잡하다. 그래서 그걸 대신 해주는 회사한테 맡김

깃허브를 예로 들면, 깃허브에 우리가 index.html 파일 업로드하고

이 저장소를 웹 서버로도 쓰고싶다고 설정하면 웹서버 활성화, 깃허브가 주소를 줌.

주소로 들어오면 파일을 가져갈 수 있음, 방문자에게 주소를 알려주면 주소창 입력,

웹 서버가 index.html 파일을 읽어서 방문객에게 전달,

방문객은 웹브라우저에 파일이 열리면서 볼 수 있게 됨.

 

*호스팅 사업의 목적이 웹이라면, 웹 서버라면 웹 호스팅이라고 부름

html 파일만을 서비스 할 때는 'static web hosting' (무료도 많고 가격 저렴)

나중에 php, 파이썬, Ruby on Rails 이런 것들 배우면 'dynamic web hosting' 필요

 

'free static web hosting' 무료서비스 검색

---

생활코딩 추천 서비스

https://www.bitballoon.com 

https://neocitoes.org/ 

Amazon S3

Google Cloud Storage

Azure Blob