github.io 블로그를 만들어 보기

github.io 블로그를 만든 과정을 작성합니다. 블로그에 사용된 Jekyll인 MrGreen-JekyllTheme 링크입니다.

Repository 제작

Github에서 Owner/username.github.io의 형식으로 저장소를 만듭니다.
공계 여부는 Public으로 설정하고, Create repository로 저장소를 생성합니다.
페이지의 위에 Code를 클릭해 https 주소를 복사합니다.
cmd 창을 열어 본인이 원하는 파일에 들어간 후 git clone https://github.com/Othkkartho/Othkkartho.github.io.git과 같은 형식의 명령어를 입력하면 정상적으로 폴더가 생성된 것을 확인하실 수 있습니다.

Jekyll 테마로 홈페이지 꾸미기

windows 기준으로 홈페이지 에서 RubyInstaller를 다운로드 합니다.
설치 완료 후 cmd 창에서 ruby -v 를 입력해서 버전이 보이면 ruby 설치가 성공한 것입니다.
cmd 창에서 gem install bundle jekyll 명령을 실행합니다.
그 후 많은 jekyll 패키지를 모아놓은 사이트들을 돌아다니다가 Mr.Green 템플릿을 적용하기로 결정하고, 다운로드 했습니다.
위에서 본인이 clone을 진행한 폴더에 들어가서 안의 데이터를 모두 지웁니다.
cmd 창에서 clone을 진행한 곳으로 이동해 jekyll new ./ 를 입력해 기본 패키지를 다운로드 받습니다.
위에서 다운로드 받은 Mr.Green 내용을 해당 폴더에 붙여넣습니다.
그 위치에서 bundle install를 입력해 번들을 다운로드 받습니다.
그 후 bundle exec jekyll serve 를 실행하면 로컬에서 홈페이지를 실행해 볼 수 있습니다.
- 만약 오류가 발생한다면 404.html, about.markdown, index.markdown을 삭제합니다.
그리고 root에 있는 _config.yml 파일의 domain과 url을 domain: "othkkartho.github.io", url: "https://othkkartho.github.io" 과 같이 본인의 블로그 주소를 작성합니다.
- 만약 로컬로 확인을 진행하고 싶다면 domain과 url을 빈칸 그대로 놔두면 됩니다.
깃허브에 add, commit, push를 진행하고, 시간이 지나면 홈페이지 제작이 완료됩니다.

이외 설정

포스트 크기 변경을 위한 CSS 변경 및 하이라이트 색깔 설정

포스트 크기를 변경을 위해 어떤 css가 크기를 결정하고 있는지 확인할 목적으로 브라우저의 개발자 모드를 사용해 css를 전수조사했습니다.
그 결과 main:css의 –main-container-width-limit가 적게 설정되어 있다는 것을 알았고, 이를 현재 나오는 4K 모니터까지 마진이 적은 화면에서 볼 수 있게 값을 2160px로 설정했습니다.
코드 부분 하이라이트의 경우 먼저 Rouge Theme Preview Page를 통해 가장 마음에 드는 Theme를 골랐습니다.
맨 처음에는 thankful_eyes의 하이라이트를 사용하려 했지만 라이트 모드에서 코드의 일부분이 안보인다는 것을 발견하고, 블로그에 모두 사용할 수 있는 템플릿을 찾은 결과 base16.solarized를 사용하면 라이트, 다크 모드 모두에서 잘 보인다는 것을 알았습니다.
결국 Theme는 정했고, rouge 설치를 위해 gem install rouge 코드를 입력합니다.
rougify style base16.solarized > assets/css/syntax.css 를 이용해 해당 코드를 css에 저장합니다.
css를 홈페이지에 적용하기 위해 _includes/default 파일의 css-include.html을 아래의 코드로 수정했습니다. ```html
```

댓글 설정

원래 disqus를 이용하려 했지만, 광고가 달린다는 이야기가 있어 어차피 이 블로그는 개발과 관련된 글을 작성하고, V-Log나 여타 글들은 다른 곳에 작성할 계획이기 때문에 utterances 를 사용하기로 결정했습니다.

댓글 Issue가 올라갈 저장소를 정하거나 생성합니다.
- 깃허브 블로그 저장소를 댓글 이슈로 설정하거나
- 만약 저장소가 private이라면 댓글 이슈가 올라갈 전용 저장소를 생성하시면 됩니다.
utterance를 이 링크 에서 설치합니다.
설치가 완료되면 아래 사진과 같은 설정창이 나옵니다.
- repo에 Issue가 올라갈 곳의 저장소 permalink를 작성해 줍니다.
- Blog Post - Issue Mapping은 댓글 이슈를 댓글 달린 블로그 페이지의 어떤 부분과 매핑 시킬지 Key를 결정합니다.
- URL과 title은 변경되어 댓글이 사라질 위험이 있기 때문에 pathname을 가지고 매핑을 진행합니다.
설정을 완료하면 위 사진처럼 코드가 생성되는데 해당 블로그는 disqus만을 지원하기 때문에 _config 설정이 되어있지 않아 코드를 넣어야 합니다. 그래서 _layouts 폴더 안에 post.md에 원래 disqus 코드가 들어가는 부분을 아래 코드로 변경해 댓글 기능을 구현했습니다. ```md

5. 마지막으로 댓글의 크기를 포스트의 크기와 맞추기 위해 assets/css 폴더의 main.scss 파일에 https://utteranc.es/client.js 안의 max-width를 오버라이드 할 아래 코드를 작성합니다.
```css
.utterances {
  max-width: 100% !important;
}

구글 애널리틱스 연결

홈페이지의 방문자 수 및 기타 활동들을 저장하기 위해 Google Analytics를 적용합니다. 이 템플릿은 Google Analytics를 지원합니다.

구글 애널리틱스에 들어갑니다.
측정 시작을 누릅니다. 그럼 아래와 같은 설정 창이 뜨는데 본인 블로그 실정에 맞게 설정합니다.
맨 아래 톱니바퀴 모양을 누른다음 데이터 스트림에 들어가면 아래의 사진은 이미 데이터 스트림을 설정했기 때문에 저렇게 나오는 것이고, 처음이라면 웹, 안드로이드 앱, iOS 앱 이 나올겁니다. 그럼 웹을 클릭해 사이트 url과 웹사이트 이름을 적으면 데이터 스트림 설정이 완료됩니다.
설정된 데이터 스트림을 누르면 여러 정보들과 측정 ID가 나오는 것을 알 수 있습니다. 그럼 측정 ID를 복사해 _data/owner 파일의 각 언어 파일 안의 google_analytics_id: "" 설정에 복사 하시고, _data/conf 폴더의 main.yml 파일 안의 google.analytics.ignore 값을 삭제합니다. 그러면 방문자가 혹은 자신이 쿠키 값을 허용했다는 가정 하에 일정 시간이 지나면 정상적으로 데이터 수집이 됩니다.

구글 Search Console 연결

구글 검색 앤진에 연결되기 위해 Google Search Console을 연결합니다.

구글 Search Console에 접속하면 아래 자신과 같은 화면이 열립니다.
제가 도매인을 직접 가지고 하는 것은 아니기 때문에 URL 접두어에 블로그 주소를 작성합니다.
그러면 소유자 확인을 진행하는데 .html을 다운받아 root에 넣거나, html 태그를 복사해 맨 뒤의 값을 _data/owner 폴더의 google_site_verification: ""에 넣습니다.
- 만약 html 태그를 복사해 넣었다면, _data/conf 폴더의 main.yml 파일 안의 google.site_verification.ignore 값을 삭제해야 합니다.
그 후 구글 검색 엔진에 블로그 인덱싱을 요청하거나 사이트맵을 추가할 수 있습니다.
- 사이트 맵의 경우 블로그 주소/assets/sitemap.xml 에 자동으로 생성됩니다. 하지만 저는 구글이 사이트맵을 확인하지 못했기 때문에 사이트맵 제작 사이트에 등록을 했는데 실패했습니다. 결국 블로그들을 각각 인덱싱을 요청했습니다.

네이버 Search Advisor 연결

네이버 Search Advisor에 접속합니다.
로그인 후 웹마스터 도구에 들어가면 사이트 등록을 진행할 수 있습니다. 그곳에 블로그 URL을 등록하고, 들어가면 요청에 사이트맵 제출이 있습니다.
제가 구글 Search Console에 제출한 사이트맵은 아예 오류로 제출되지 않으므로, 직접 자동화 코드를 짜거나, sitemap을 제작해 제출해야 합니다.
사이트 관리 옆에 간단체크를 수행할 수도 있습니다.

robots.txt

크롤러가 블로그를 잘 돌아다닐 수 있도록 root의 robots.txt에 아래의 코드를 작성합니다.

User-agent: *
Allow: /
Sitemap: https://othkkartho.github.io/assets/sitemap.xml

위 텍스트는 모든 검색로봇에 대해 수집을 허용하고, 사이트맵의 주소를 알려주는 역할을 합니다.