[23일차] 깃허브에서 개발자와 소통하기 - 깃허브에 개인 블로그 만들기

4. 깃허브에 개인 블로그 만들기

    - Github Pages 기능을 이용하면 별도의 웹 호스팅 서비스를 사용하지 않고도 무료로 자기만의 홈페이지를 열 수 있다.

 

    4-1. Github Pages 기능 알아보기

          - 보통 홈페이지를 열고 싶어서 사용자 컴퓨터에 홈페이지 파일을 만들어 놓아도 웹 서버에 올리지 않으면 다른 사람에게
            보여줄 수 없기 때문에 보통 웹 서버 기능을 제공하는 사이트를 통해서 홈페이지를 연다.
          - 이런 서비스를 '웹 호스팅 서비스'라고 하는데 대부분 매달 일정 금액을 지불해야한다...! 깃허브에 있는 Github Pages
            기능으로 저장소에 홈페이지 파일을 올린 뒤 저장소의 주소를 그대로 홈페이지 주소로 사용할 수 있다.

            (깃허브 저장소를 웹 서버처럼 활용할 수 있기 때문에 무료로 깃허브의 저장소를 블로그나 홈페이지 공간으로 사용!)

 

          4-1.1) 정적인 페이지를 제공할 때 사용하기 쉽다.
                   - 정적인 페이지: 게시판 or 회원가입이 없고, 내용을 바꾸려면 서버에 올라가 있는 파일을 수정해야 하는 페이지

                      ex) 그동안의 작업 결과를 보여주는 포트폴리오 사이트나 기술 정보를 정리해놓은 블로그

                    - 기본적으로 Github Pages로 만든 주소에는 github.io라는 이름이 붙는다.

 

          4-1.1) Github Pages 사용하는 두 가지 방법

                    1. HTML과 CSS, javascript(or jQuery) 등 홈페이지 파일이 있는 경우
                       - 직접 준비한 파일을 깃허브 저장소에 올리고, Github Pages 기능을 사용해 홈페이지를 만든다.

                    2. 홈페이지 파일이 따로 없고 만들 엄두가 안 나는 경우

                       - 깃허브에서 지원하는 지킬 테마(Jekyll theme)를 사용해 홈페이지를 만든다.

 

    4-2. 홈페이지 파일이 있을 때 Github Pages 사용하기

         

[New repository] 클릭하기

repository name 필드에 계정.github.io라고 입력 및 해당 옵션을 선택한 후 [create repository] 클릭

만들어진 저장소에서 [Upload files] 클릭

[깃허브에 파일을 올리는 두 가지 방법]

1. 탐색기에서 올릴 파일을 깃허브 화면 위로 드래그&드랍하기

2. [choose your files]를 누른 뒤 올릴 파일을 선택하기

(만일 올릴 파일에 하위 폴더가 있다면 1번 추천)

 

파일 전송이 끝나면 커밋 메시지를 작성한 후 [commit changes] 클릭

[Settings] 목록을 클릭

사이트가 만들어졌다는 메시지와 함께 홈페이지 주소가 나타난다.

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋWoW!!!

    4-3. 홈페이지 파일이 없을 때 Github Pages 사용하기

          - Jekyll Theme

            : Github Pages로 블로그나 사이트를 열 때 쓸 수 있는 디자인과 스타일 모음을 말한다. 사용자의 필요에 따라 소스를

              수정해서 사용할 수 있다.

 

          4-3.1) 지킬 테마 알아보고 선택하기

                   - 블로그를 만드는 목적을 먼저 생각해야한다.
                    1) 온라인 이력서 등을 올리는 경우(블로그 전체를 살펴볼 수 있도록, 작은 수정은 고려하지 않아도 된다)

                    2) 포털사이트 블로그처럼 게시물을 자주 작성할 경우(수정이 편리하고, 최근 게시글이 앞에 보이도록)

                 

깃허브 사이트에서 소스를 제공하므로 검색하기

 

검색 결과에 표시된 오픈 소스 설명에서 'blog'나 'theme'가 있으면 Jekyll 테마일 가능성이 높다. demo link도 있다!

demo 사이트에 접속해본 화면

+) 시각적으로 편하게 찾는 방법!

jekyllthemes.org/에 접속해서 테마의 디자인을 한눈에 볼 수 있다.

jekyllthemes.org/

Jekyll Themes

download 하여 소스 파일을 내려받으면 된다.

          4-3.1) 블로그 만들고 기본 환경 설정하기

                   - 지킬 테마 사용하는 방법
                    1) 지킬 테마 소스를 그대로 fork해서 사용하기(테마를 그대로 사용하면서 블로그 포스팅만 하는 경우)
                    2) 지킬 테마 소스를 사용자 저장소에 내려받아 사용하기
                        (테마 디자인을 바꾸거나 소스를 수정하는 것처럼 수정할 파일이 많은 경우)

 

                    여기서는 1) 방법을 실천한다.

저자가 실습으로 지정한 jekyll 테마 저장소에 들어가 fork하기

fork를 하게 되면 katherine/jekyll-now로 복제된다.

저장소를 github pages로 사용하려면 저장소의 이름을 '계정.github.io'로 바꿔야 한다.

따라서 해당 저장소의 [Settings] 목록에 들어간다.

그전에 이미 존재하는 저장소를 수정한다.

Repository name 항목에  '계정.github.io'로 작성한 후 [Rename]을 클릭한다.

환경을 설정하기 위해 저장소에 있는 파일 목록 중 _config.yml 파일을 클릭한다.

우리 환경에 맞게 설정해야 하기 때문에 Edit 아이콘을 클릭

주석들을 잘 읽어보고 수정해야할 부분들은 꼭 수정한 후 Commit 한다.

    4-4. 블로그에 포스트 작성하기

          - 지킬 테마에서 블로그 포스트는 _posts 디렉터리에 저장된다.

          - 또한 포스트 파일의 이름은 '20xx-x-x-파일이름.md'의 형식을 사용한다. (.md: 포스트도 마크 다운 기법을 사용!)

기본 포스트 파일인 '2014-3-3-Hello-World.md'파일 클릭

포스트를 작성할 때에도 기본적으로 지켜야할 형식이 있으므로 파일이 어떻게 작성되었는지 본다.

--- ... --- 부분은 모든 포스트에 들어가야 할 내용이다. 새 포스트를 위해 복사한다.

_posts 폴더로 돌아와서 [Create new file] 클릭

오늘 날짜, 파일 이름, .md에 맞춰 파일 이름 입력/  --- ... ---  title 수정/ 원하는 내용을 입력 => [commit new file] 클릭

파일이 생성되었다

https://katherine4191.github.io/에도 post가 올라왔다.

    4-5. 포스트에 이미지 삽입하기

          - 포스트에 이미지를 삽입하려면 먼저 이미지 파일을 저장소로 올려야 한다.

저장소의 images 디렉토리에 필요한 파일을 올리고 커밋한다.

이미지를 추가하는 방법은 masso.tistory.com/52?category=879153 블로그 하단에 나와있다.

이미지 링크 생성

post 내용 수정

!!!!!!!!!!!!!!!! YEAH !!!!!!!!!!

+) 책에서 안됬던 방법 다시 해본다..

오오 성공했다..!! 흠 전에는 그럼 images가 아니라 Images라 틀렸나.. 다시 봐야겠다!