깃허브(Git hub)를 통해서 포트폴리오를 만들려고 했는데 내가 원하는 대로 커스터마이징하지 못하는 것이 아쉬웠다.
내가 원하는 것은 블로그가 아니라 resume를 한 페이지에 볼 수 있는 정도만 원하기도 하고. 모양은 안나오더라도 원하는대로 주물주물 하고 싶었다.
Clone을 통해서 쉽게 만들려면 아래 사이트처럼 하는 것이 안깨지고 좋은듯.
miryang.dev/2019/03/20/make-githubpages/
간단하게 깃허브블로그(Github Pages) 생성하기 - MIRYANG.DEV
GitHub.io 깃허브블로그로 부르는 Github Pages는 특히 개발자들이 포트폴리오용으로 많이 사용합니다. 저도 Tistory(티스토리)와 깃허브블로그 중 고민을 많이 했으나, 커스터마이징하기 쉽고 디자인��
miryang.dev
아래는 css 적용안될 때 참고한 사이트
dreamgonfly.github.io/blog/jekyll-remote-theme/
쉽고 빠르게 수준 급의 GitHub 블로그 만들기 - jekyll remote theme으로 | Dreamgonfly's blog
.github.io라는 url로 익숙한 GitHub Pages는 개인 블로그, 특히 개발 블로그 용으로 인기가 높습니다. 이 글에서는 가장 간단하게 수준 급의 GitHub Pages로 static 페이지를 호스팅하는 방법을 소개해 보겠�
dreamgonfly.github.io
그래서 그냥 웹페이지 하나 만들었다.
1. 나의 깃허브 repositories에서 우측 상단에 있는 new 버튼을 눌러서 하나 만들어준다.
repository 이름은 '나의닉네임.github.io'로 해야 사이트가 'http://닉네임.github.io'로 된다. public으로 해놓고 README file도 만들어준다.
1-1. 확인
Setting에 들어가서 쭉 내리다보면 깃허브 페이지가 있는데 Source의 branch를 master로 하고 저장하면 아래처럼 퍼블리쉬된다. 저 주소가 나의 웹페이지 주소.
들어가면
에러뜸.
2. '_config.yml'파일에서 url 설정하기.
'config.yml'을 만들어주는데 나는 기존에 있는 지킬 테마를 참고했다. 자주 들어갈 것 같아서 fork 해놓았다.
github.com/mmistakes/minimal-mistakes
mmistakes/minimal-mistakes
:triangular_ruler: Jekyll theme for building a personal site, blog, project documentation, or portfolio. - mmistakes/minimal-mistakes
github.com
'_config.yml' 파일에 들어가서 raw를 누르면 텍스트 전문이 보이는데 그대로 복사한다.
'Add file'-'Create new file'에서 '_config.uml'이름의 파일을 만들어주고 복사한거 그대로 붙여줬다.
그리고 아래처럼 url을 나의 깃허브 주소로 바꿔준다. 나머지 필요한 부분도 읽어보면서 내껄로 수정하면 된다.
이제 페이지에 들어가도 오류가 안뜬다.
+ 궁금해서 다 지워봤는데 아래처럼만 쓰고 '_config.yml' 파일 만들어도 문제 없음.
3. 'index.html' 파일만들기.
마찬가지로 새로운 파일 만들기에서 'index.html'파일을 만들면 된다.
안에는 <!DOCTYPE html>을 맨 위에 써주고 헤드와 바디만 일단 써줬다.
여기서 html 수정하면 웹페이지에 반영된다.
4. Github Desktop
방금 만든 repository 우측 상단에 있는 Code눌러서 Open with Github Desktop에 클론해주면 데스크탑에 저장 가능.
이걸 사용해야 관리하기 편하다. visual studio로 수정하고 바로 커밋하면 깃허브에 반영돼서 웹페이지 변경된 거 확인 가능
사용법은 아래 사이트가 친절한듯
[GitHub] 깃허브 GitHub Desktop 사용하기 (1) - 새로운 프로젝트 업로드
안녕하세요. 오늘은 github desktop을 사용해 새로운 프로젝트 업로드하는 방법에 대해 알아보겠습니다. 아래 주소에서 github desktop 프로그램을 다운로드해주세요. https://desktop.github.com GitHub Desktop..
boheeee.tistory.com
문서 - hadan-HwH.github.io에 들어가서 index를 비주얼 스튜디오로 키면서 수정하면 된다.
git이미지를 넣어줄 assets랑 css 폴더를 미리 만들어줬다.
음.... 구리다. 많이 배워야할듯..
'Project > Github Web - HTML,CSS' 카테고리의 다른 글
| [Git hub]깃허브로 웹페이지 만들기(4) - Modal 팝업창 (0) | 2020.09.11 |
|---|---|
| [Git hub]깃허브로 웹페이지 만들기(3) - 메인보드 추가 (0) | 2020.09.09 |
| [Git hub]깃허브로 웹페이지 만들기(2) - 오픈소스로 디자인하기 (2) | 2020.09.08 |