세상을 더 편리하게
article thumbnail
728x90

깃허브를 통해서 홈페이지를 만드는 방법은 크게 2가지가 있다.

  1. CSS,HTML, 자바스크립트 를 통한 페이지 만들기
  2. 깃 허브에서 지원하는 지킬 테마 사용하는 방법

1. CSS HTML 자바스크립트를 통한 페이지 만들기

먼저 깃허브에서 새로운 레파지토리(저장소)를 만듭니다.

레파지토리의 이름은 반드시 계정명.github.io 라고 입력해야 합니다.

그리고 반드시 Initiallize this repository with a README 를 체크해야합니다.

그리고 난 후 html 파일을 업로드 합니다. 이 때 html 이름은 반드시 index.html 로 해야 합니다.

[Setting] 에 들어가서 페이지를 내리면 GitHub Pages 항목이 나온다.

위와 같이 홈페이지 주소가 나오게 된다. 저 주소를 통해 들어가면 작성한 코드로 만든 홈페이지가 나오게 된다.

 

2. 깃 허브에서 지원하는 테마 사용하기

깃허브에서 Jekyll 을 검색하면 많은 오픈 소스 테마가 나온다.

여기서 설명에 blog 나 theme 를 찾아서 하나를 선택합니다.

선택한 레파지토리에 들어가면 데모 링크가 걸려 있습니다. 링크를 통해서 미리 어떤 테마인지 확인할 수 있습니다.

그럼 포크를 한 후 자신의 원격 저장소 레파지토리로 갑니다.

그 다음 파일 목록 중 _config.yml 파일을 열어서 자신의 정보에 맞게 업데이트 합니다.

[Setting] 에서 레파지토리 이름을 계정명.github.io 로 반드시 고쳐야합니다.

레파지토리 이름을 수정 한 후 다시 [Setting] 에 들어가면 

블로그 링크가 뜬 것을 확인 할 수 있다. 링크를 타고 들어가면

기본으로 제공된 지킬 테마가 적용된 블로그를 볼 수 있다.

깃허브 블로그에 포스트 올리기

깃허브 블로그를 만들었으면 자신의 포스트를 작성해야 빛나는 법이다.

먼저 예시로 작성된 포스트(.md)가 _post 디렉토리 안에 있을 것입니다. 그 포스트를 수정하기를 열면 다음과 같을 것입니다.

--- 로 시작해서 ---로 끝나는 부분은 모든 포스트에 꼭 들어가야 할 내용입니다.

그러므로 --- 부터 ---까지 내용을 복사합니다.

다시 _post 디렉토리에 들어가서 [Create new file] 을 눌러 줍니다.

복사했던 내용을 붙여 넣은 다음 자신이 적고 싶은 것들을 포스트에 적습니다.

그런 다음 자신이 알아 볼 수 있게 파일명을 작성하고 파일 확장자를 .md 파일로 만듭니다.

그러면 몇 분후에 새로운 포스트가 올라온 것을 확인 할 수 있다.

728x90
profile

세상을 더 편리하게

@쵱니

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!