Gitgub에서 html 띄우기 (with 템플릿 bootstrap) - 작업한 로컬 html을 외부로 배포 공유하기

| 템플릿bootstrap 다운 

startbootstrap.com/landing-pagesstartbootstrap.com/

Free Bootstrap Themes, Templates, Snippets, and Guides

여기서 free한 BOOTSTRAP 템플릿을 다운받는다.

다운받은 zip 압축 파일을 푼다.

 

(+추가) 여기서 템플릿 수정 방법 간단히  

푼 폴더 안에 index.html을 메모장으로 열어본다.

ctrl+a 로 복사후 아래 사이트에 붙여넣기하면 html 틀이 눈에 잘 들어오게 포맷해준다.

webformatter.com/html

또는 minifycode.com/html-beautifier/

다운받은 템플릿 폴더 안의 index.html를 인터넷 창에 띄우고 어느 구역의 텍스트 부분을 수정할지 보고 위 html 포맷 사이트에서 수정하고 -> 다시 index.html 메모장에 수정한 걸 붙여넣기 해주면,

인터넷 창에 새로고침하면 수정되어 있는 것을 볼 수 있다.

 

 

| 부트스트랩 또는 로컬 html를 Github에 올려서 외부 html로 보내기

1. github에 로그인한다.

2. 상단 메뉴바에 Repositories 탭으로 들어간다. -> 'New' 클릭

3. 저장소이름을 "gspace1957(각자 내 아이디).github.io" 로 작성

   Public용으로 체크

   add README 체크

   Create Repository 클릭

4. gspace1957.github.io라는 이름의 저장소에 템플릿 폴더 안의 모든 파일들을 드로그 앤 드랍 해준다. 폴더 자체 하나를 옮기는게 아니라 그 안의 각 파일들을 옮겨줄 것.

5. 녹색버튼 Commit changes 클릭 

6. 업데이트 동안 녹색 체크문양이 뜰 때까지 기다린다...

7. 이제 이 링크주소gspace1957(각자 내 아이디).github.io로 가면 템플릿 창이 뜬다~!!

 

 

 

[링크 바로가기 만들기]

8. 오른쪽 About 설정 아이콘 버튼 클릭.

 9. 아래 녹색 Save changes 버튼 클릭하면 About 링크에 'gspace1957.github.io'로 '바로가기'가 생성된다. 이렇게 해 놓으면 편리하다.

 

 

 

[수정 방법]

10. 템플릿 html수정은 main으로 되어 있는 index.html파일을 클릭하고 들어가서 연필모양 아이콘을 클릭하고 손 봐주면 된다. 그리고 다시 녹색버튼 Commit changes 클릭 

 

 

[개인의 독립적인 로컬 html를  부트스트랩index.html에 추가]

 

한 부트스트랩 안에 여러 html widget을 띄우고 싶을땐,

 

(1) 하이퍼링크로 띄우고 싶은 1-word-series-type-green.html를 (내가 R 에서 시각화 작업한 결과로 로컬에 저장해두었던 html widget 이다.) gspace1957.github.io라고 생성한 이 repository에 아까처럼 드래그앤드랍으로 옮겨놓으면 된다. 

 

(2) 그리고 index.html에서 링크주소를 <a href="1-word-series-type-green.html">01 지원 키워드 시계열 추이</a>

처럼 수정하면 된다. 

 

 

 

지금까지 부트스트랩이나, 개인 로컬html파일을 Github에 배포해서 공유할 수 있는 방법을 알아봤다.

 

 

 

github에 사이트를 배포하는 방법으로써, 더 자세한 정보는 이곳에 

online.codingapple.com/unit/react-build-deploy-github-pages/

만든 리액트 사이트 build & Github Pages로 배포해보기 – 코딩애플 온라인 강좌