먼저 Remote Repository를 자신의 이름으로 생성해줍니다.
블로그 관리를 로컬하게 관리하기 위해 다음과 같은 명령어로 clone을 시작합니다.
git clone https://github.com/LEFT-BEE/LEFT-BEE.github.io.git
이후 블로그에 jekyll을 통해 테마를 적용합니다. Claen blog
테마는 Clean Blog 테마를 골랐는데 그 이유로는 디자인이 깔끔하고 폰트가 간결하여 제가 작성한 포스트를 읽기 쉽게 되어있습니다
또한 커스터마이징이 편리하여 블로그를 관리하는데 있어 이점이 있습니다.
과정은 다음과 같습니다. 또한 이 모든 과정은 visual studio code의 터미널에서 이루어집니다.
ruby에서 지원하는 gem명령어를 통해 jekyll과 gem을 설치 해줍니다 gem이란 루비에서 제공하는 라이브러리를 손쉽게
관리할 수 있게 해주는 도구입니다.
gem install jekyll bundler
jekyll new theorydb.github.io
bundle install
구축된 블로그를 로컬환경에서 실행하려면 다음 코드를 실행한다.
jekyll new theorydb.github.io
이후 다양한 파일과 폴더들이 생성되는 데 각각 이렇게 정의된다.
LEFT-BEE.github.io
- _featured_tags/ : 카테고리 대분류 폴더
- _featured_categories/ : 카테고리 소분류(태그) 폴더
- _data/ : 개발자 및 운영자, 기타 정보 폴더 (author.yml 수정이 필요)
- _layouts/ : 포스트를 감싸기 위한 레이아웃 정의 폴더(페이지, 구성요소 등 UI변경 시 수정)
- _includes/ : 재사용을 위한 기본 페이지 폴더
- _posts/ : 포스트를 저장하는 폴더
- .git/ : GitHub 연동을 위한 상태정보가 담긴 폴더
- assets/ : 이미지, CSS 등을 저장 폴더
- _site/ : Jekyll 빌드 생성 결과물 폴더
- .sass-cache/ : 레일 엔진에서 사용하는 캐시 저장폴더
- _sass/ : 일종의 CSS 조각파일 저장 폴더
- _js/ : JavaScript 저장 폴더
- _config.yml : 가장 중요한 환경변수 설정 파일
- README.md : eureka project description
- favicon.ico : 블로그 상단에 위치한 아이콘
- about.md : 글쓴이를 소개하는 글
- Gemfile : 필요한 레일 기반 라이브러리를 자동으로 설치하고 싶을 때 명시하는 설정 파일
- .gitignore : git에 push하고 싶지 않은 파일들을 경로지정가능하다.
- sitemap.xml : 테마의 사이트맵
- search.html : Tipue Search 설치 시, 검색결과를 출력하는 페이지로 활용
- robots.xml : 구글 웹로봇 등 검색엔진 수집 등에 대한 정책을 명시하는 설정파일
- LICENSE.md : 테마 개발자의 라이센스 설명
- index.html : 블로그 접속 시 보게되는 페이지
- 404.md : 404 Not Found Page
- .eslintrc : EcmaScript Lint 관련 환경 설정 파일
- .babelrc : Babel(Javacss compiler) 설정파일
수정한 파일을 GitHub 저장소에 올리기 위해 다음과 같은 과정을 거친다.
Git Bash를 실행한 후, 아래 코드와 같이 모든 파일을 local repository에 올린다.
`git add *
수정된 파일들을 local repo에 commit해주고 push해준다.
git commit -m "git blog"
git push
이러한 방식을 걸쳐 블로그를 수정하고 이를 원격 저장소에 남길 수 있다.
_data 폴더 안에 authors.yml파일은 블로그의 저자를 수정할 수 있다.
name과 email에 자기 자신의 정보를 입력하고 about에 소개를 적는다.
src , 1x , 2x에는 나의 프로필 사진을 저장해주면 된다.
그 외 description에 자가자신의 소개와 프로필 이미지를 설정해준다.
카테고리는 featured_categories , featured_tags 폴더를 이용해 만들어준다. 딥러닝에 관심이 많으므로 DeepLearning 이라는 대 카테고리에서
딥러닝 기술요소를 설명하는 tech , 논문 리뷰를 위해 'paper' , 코드분석을 위해 code와 같이 소 카테고리를 만들어 주었다.
그 외 math , others와 같은 카테고리를 만들어 포스트의 카테고리에 맞게 정리할 수 있게 만들었다.
여기서 'Eureka Project'는 이번 깃 블로그를 만드는 과정을 서술 및 과제내용을 수행하기 위해만든 임시 카테고리이다
DeepLearning.md 의 내용은 아래와 같다.
layout: list
title: DeepLearning
slug: deeplearning
menu: true
submenu: true
order: 2
description: >
딥러닝 및 머신러닝에 필요한 지식 정리
이는 _layouts 의 category-tag-list.html 그리고 세부 카테고리일 경우 in-category-tag.html를 생성해주고 다음과 같이 코드를 추가주면 카테고리 레이아웃이 블로그에 적용된다.
나를 소개하는 카테고리인 About.md는 아래와 같은 레이아웃을 추가시켜준 것이다. 위에서 설정해주었던 프로필 사진과 문구가 들어간다.
아래와 같이 적용이 되는 것을 볼 수 있다.
사이드 바는 sidebar.html의 파일에서 정의 되며 위의 요소들을 입력하면 아래의 sidebar.html에서 이를 구성한다.
본인은 사이드바에 카테고리, About, 프로필, 검색기능, Git주소, 메일주소를 등으로 구성하였다.
포스트는 _posts 폴더에 저장된다. 포스트내에서 title과 Category, tag, comments 등을 아래의 예시 같이 정의해준다.
포스팅은 마크다운 형식으로 작성해주면 된다.
---
layout: post
title: "[Markdown2] How to make github blog"
subtitle: "Markdown 사용법2"
categories: others eureka
tags: github eureka
comments: true
---
Disqus 를 사용해서 블로그에 댓글 기능을 추가시켰다.
이후 config.yml에서 다음과 같이 disqus에서 설정해주었던 shortname과 disqus : True라 설정 해준다.
comments의 UI는 다음과 같이 comments.html에 추가시켜주었다.
위 과정을 모두 수행하고 post를 할때 comments : true 라고 설정해주면 아래와 같이 댓글창이 생긴다.
favicon은 웹 브라우저 주소창에 표시되는 대표아이콘인데 본인은 codegongbang의 c를 의미하는 이미지를 사용하였다.
위 이미지는 favicon을 생성해주는 favicon site 에서 생성해 주었다.
그러면 favicon.ico라는 파일이름으로 디렉토리에 넣어주게되면 아래의 코드를 통해 적용된다.
실제로 다음과 같이 적용된 것을 볼 수 있다.
google analytics에 가입하여 블로그에 오는 사용자들의 데이터를 분석한다.
위의 과정을 모두 수행하면 측정 ID를 얻게 되는데 이를 코드에서 수정해주어야 한다.
google analytics를 통해 블로그의 방문자 통계와 같은 정보를 얻을 수 있다.
Tipue Search 는 Jqurey를 활용해서 만들어진 site search plugi이다.
해당 사이트에서 jekyll-tipue-search-master.zip 파일을 다운받아 압축을 푼다.
Tipue Github Repo
압축을 풀면 나오는 search.html 파일을 깃 블로그 최상위 디렉토리에 넣어주고
assets/안에 있는 tipuesearch 폴더를 깃 블로그의 'assets'에 넣어준다.
tipuesearch의 내용은 다음과 같다.
이후 config.yml파일에 다음과 같은 코드를 추가해준다.
include의 pages : false의 설정은 pages 레이아웃에 해당하는 html페이지는 검색하지 않겠다는 것을 의미한다.
exclude의 search.html , index.html , tags.html 페이지는 검색에서 제외하겠다는 것을 의미한다.
'head.html' 파일을 열어 LINKS영역 바로 위의 위치에 다음의 코드를 추가한다.
그 다음 search.html에 파일을 열어 아래와 같이 코드를 다음과 같이 설정해준다.
위의 설정 내용은 위의 tipue 깃에 나와있다.
마지막으로 sidebar.html 에 아래와 같이 설정한다. 본인은 검색창을 사이드 바에 위치하게 해서 sidebar.html에 코드를 추가해주었다.
아래와 같이 잘 실행되는 것을 볼 수 있다. 아래 예시는 검색창에 GAN을 검색했을 때 나오는 페이지이다.
