Blog 구축

사전 계획

Github에 올려서 포스팅하기로 한다.
Beautiful-Jekyll 테마를 사용하기로 한다.
- 새로운 글을 포스팅 할 때 마다 몇가지 귀챦은 작업들을 생략할 수 있도록 설정이 추가되었다.
- 폰트, UI디자인이 개선되었다.
Local 작업 없이 완전한 Online 관리가 가능하도록 한다.
댓글 시스템, 자체 검색 기능, 구글 검색 가능하도록 설정을 추가한다.

Github 가입

https://github.com 가입해서 계정을 만든다.

Beautiful-Jekyll을 Fork 한다.

https://github.com/daattali/beautiful-jekyll 으로 간다.
우측 상단에 있는 Fork 버튼을 누른다.
잠시 기다리면 내 계정에 beautiful-jekyll 저장소가 생기고 여기에 모든 내용이 복사되어 있음을 확인.

Beautiful-Jekyll 저장소 셋팅

상단의 Settings 탭을 눌러서 들어간다.
Repository name은 그대로 둬도 되고 변경해도 된다. 가급적 그대로 두는 것을 추천.
Issues 옵션은 켜준다.
기본 브랜치는 가급적 Masster로 둔다.
호스팅되는 주소도 확인한다.

_config.yml 설정 (기본 설정)

상단의 Code 탭을 눌러서 들어간다. 그러면 저장소에 들어가 있는 파일들의 목록이 나타난다.
_config.yml 파일이 설정 파일이다. 이 파일을 눌러서 내용을 본다.
우측 상단의 연필 모양 아이콘을 누르면 편집기로 들어간다. 내용 수정을 시작한다.
수정 내용은 이곳의 예제를 참조한다.
수십초 가량의 여유를 두고 블로그 페이지를 확인헤서 잘 반영되었는지 본다.

블로그 대문의 문구 수정

index.html 파일로 들어가서, 머리 부분의 내용을 다음 예제를 참고하여 편집한다. (단 머리 부분의 ---는 3개의 -로 대체해야 함)

\-\-\-
layout: page
title: DymaxionKim
subtitle: Personal Blog
use-site-title: true
\-\-\-

수십초 가량의 여유를 두고 블로그 페이지를 확인헤서 잘 반영되었는지 본다.

자기소개 페이지 내용 수정

aboutme.md 파일로 들어가서, 마크다운 문법으로 편집한다.
수십초 가량의 여유를 두고 블로그 페이지를 확인헤서 잘 반영되었는지 본다.

본문글 폰트 변경

원래 설정에서, 본문글의 폰트가 serif(명조체)로 되어 있는데, 이것을 sans-serif(고딕체)로 변경하기로 한다. 가독성을 올리기 위해서다. 고딕체 중에서 특히 google noto sans로 바꾸자.
css/main.css 파일을 편집한다.
파일의 맨 첫줄에 다음 내용을 삽입한다.

@import url(http://fonts.googleapis.com/css?family=Noto+Sans);

그리고 그 다음 body 구문 부분에서, font-family: 'Lora', 'Times New Roman', serif;을 font-family: 'Noto Sans', sans-serif;으로 대체한다.

로고 그림 수정

img/avatar-icon.png 그림파일을 다른 것으로 대체하면 된다.
이때, 그림의 사이즈는 512x512로 맞추어 준다.

댓글 시스템 추가 (DISQUS)

https://disqus.com/ 에 가서 구글계정의 소셜로그인으로 가입한다.
Get Started 버튼을 누른다.
I want to install Disqus on my site를 선택한다.
설정 페이지가 나온다.
Website Name는 beautiful-jekyll 정도로 해 둔다.
설정을 마쳤으면 Create Site 버튼을 누른다.
다음 화면에서 Let's get started를 눌러 확인해 준다.
What platform is your site on? 으로 고르는게 나오는데, 여기서 Jekyll을 선택한다.
이제 Jekyll install instructions 페이지가 나오는데, 일단 그냥 Configure 버튼을 눌러 넘어간다.
Configure Disqus 페이지가 나오는데, 적절히 기입해 주고 Complete Setup을 눌러 마친다.
Setup Complete! 페이지가 나오면 완료된 것이다.
이제 Github의 내 beautiful-jekyll 저장소 안에 있는 _config.yaml 파일을 열어서 편집한다.
disqus: 구문을 찾아서 다음과 같은 식으로 수정해 준다.

disqus: "beautiful-jekyll"

이제 완료 후 저장하고 나와서, 수십초 가량의 여유를 두고 블로그 페이지를 확인헤서 잘 반영되었는지 본다.

로컬PC에 Git클라이언트 설정

로컬PC의 리눅스OS에는 이미 Git클라이언트가 설치되어 있다.
터미널을 열어서(Ctrl+Alt+t) git 명령을 쳐 보자. 설명문이 주루룩 나오면 이미 설치되어 있다는 의미다.
이제 git 명령에 여러가지 옵션을 줘 가면서 설정해 보다.
다음 명령을 줘서 우선 github의 저장소와 동기화할 작업 공간을 만든다.

cd 
mkdir github
cd github

이렇게 만들어진 github 디렉토리에서 모든 개발작업을 진행하고, 이것들을 Github.com의 저장소와 동기화(업로드) 시켜 가면서 운용하게 될 것이다.
아무튼 현재의 github 디렉토리를 다음 예제를 참고하여 로컬 git저장소로 초기화 작업을 해 준다.

git init
git config --global user.email dymaxion.kim@gmail.com
git config --global user.name dymaxionkim

Github에 있는 beautiful-jekyll 저장소를 clone 해 오기

우선 웹브라우저상의 beautiful-jekyll 저장소를 본다.
우측 상단에 녹색 버튼으로 Clone or download 버튼을 누른다.
나오는 URL주소를 복사한다.
이제 로컬PC의 터미널에서 다음과 같은 식으로 써준다. (주소 부분은 복사한 주소로 대체)

git clone https://github.com/dymaxionkim/beautiful-jekyll.git
cd beautiful-jekyll

로컬에 beautiful-jekyll 디렉토리가 생겼고, 여기에 모든 파일이 받아져 있다는 것을 확인할 수 있다.
이제부터는, 로컬에서 수정작업을 하고, 그것을 Github저장소로 push 해 주는 식으로 진행하자.

자체 검색 기능 추가

원본 Jekyll에는 검색 기능이 없다. 따라서 Simple-Jekyll-Search를 추가하도록 한다.
우선 _config.yml 설정파일에서 navbar-links: 구문을 찾아서 다음과 같은 식으로 아래에 추가해 준 후 저장한다.

 Search: "search/"

본 저장소의 루트 디렉토리에 search2.json 파일을 새로 생성하고, 이곳의 내용을 복사해서 넣는다.
본 저장소의 루트 디렉토리에 search.html 파일을 새로 생성하고, 이곳의 내용을 복사해서 넣는다.
본 저장소의 루트 디렉토리에 Simple-Jekyll-Search.sublime-project 파일을 새로 생성하고, 이곳의 내용을 복사해서 넣는다.
본 저장소의 루트 디렉토리에 다음과 같이 새로운 디렉토리를 만들어서 들어간다. (이름은 그대로 할 것)

mkdir dest
cd dest

이 디렉토리 안에 jekyll-search.js 파일을 새로 생성하고, 이곳의 내용을 복사해서 넣는다.
이 디렉토리 안에 jekyll-search.min.js 파일을 새로 생성하고, 이곳의 내용을 복사해서 넣는다. 이 파일의 존재는 로딩속도를 미세하게 빠르게 해 주는 효과를 위한 것이므로 필수는 아니다.
이제 필요한 작업은 다 되었는데, 이상 로컬에서 작업된 수정사항을 이제 Github로 Push해 주어야 한다.
다음 명령을 터미널에서 쳐넣는다.

cd ..
git add --all
git commit -m 'Adding Search Menu'
git push -u origin master

이후 메시지에 따라 Github 계정이름 및 비밀번호를 넣어주면 push가 완료된다.
이제 Github저장소를 웹브라우저상에서 확인해 보자. 변경된 사항이 잘 반영되어 올라가 있는지 본다.
수십초 가량의 여유를 두고 블로그 페이지를 확인헤서 잘 반영되었는지 본다.

Blog의 글들이 구글,네이버에서 검색되도록 설정하기

참고 : http://dveamer.github.io/homepage/SubmitSitemap
본 저장소의 루트 디렉토리에 robots.txt 파일을 새로 생성하고, 이곳 예제를 참고해서 내용을 넣고 저장한다.
본 저장소의 루트 디렉토리에 sitemap.xml 파일을 새로 생성하고, 이곳의 내용을 그대로 복사해 넣고 저장한다.
이상 업데이트된 내용을 Github로 push해 주자.

cd ~/github/beautiful-jekyll
git pull
git add --all
git commit -m 'Sitemap'
git push -u origin master

이제 구글에 Sitemap을 등록하는 절차가 필요하다.
- 이곳(Google Search Console)으로 간다.
- Search Console 버튼을 눌러 다음 페이지로 진행한다.
- 속성 추가 버튼을 누른다.
- 웹사이트에 본 블로그의 주소를 넣어주고 (예 : https://dymaxionkim.github.io/beautiful-jekyll ) 추가 버튼을 누른다.
- 권장 방법이라는 설명문이 나오는데, 시키는대로 한다. (실제 해당 사이트 소유자인지 인증하는 절차임) 인증파일을 받아서, 그걸 본 블로그의 루트 디렉토리에 넣은 후, Github로 push해 주면 된다. 이후 로봇이 아닙니다 확인해 주면 끝.
- 이제 새로 바뀐 페이지에서, 현재 상태를 확인해 주고, Sitemaps를 눌러준다.
- 새로 바뀐 페이지의 우측 상단 빨간 버튼 SITEMAP 추가/테스트 버튼을 누른다.
- 입력 칸에 sitemap.xml를 써주고 제출한다.
- 다시 페이지가 바뀌면서, 현재 상태가 보인다. 확인 되었으면 완료.
네이버에도 Sitemap을 등록하자.
- 네이버 웹마스터 도구에 들어간다.
- 로그인 한다. (당연히 네이버 계정이 있어야 함)
- 사이트 추가를 선택한다.
- 사이트 정보 입력에 ‘https’를 선택하고, 입력란에 dymaxionkim.github.io 처럼 주소를 넣어준다. https:// 부분은 생략하고, 또 뒤의 /beautiful-jekyll 부분은 네이버에서 허용을 안 하기 때문에 떼어낸다.
- 이제 사이트 소유 여부를 확인하기 위해, 설명대로 따라한다. 구글과 거의 비슷하다. 다만 인증 파일은 dymaxionkim.github.io에 들어가야 한다. (자세한 설명은 생략한다)
- 이제 로봇이 아님을 증명한 후 확인 누르면 끝.
이제 1~2개월 정도 지나서 내 글이 구글/네이버에 검색이 되는지 확인해 보면 된다. 구글은 별 문제가 없을 것이나 네이버는 확인을 직접 해 보지는 못했다.

수학식 표현 가능하게 하기 (MathJax 활성화)

참고 : http://jinyongjeong.github.io/jekyll/Jekyll_github_blog_math/
_config.yml 파일에 설정이 현재 다음과 같이 되어 있을 것이다.

markdown: kramdown

kramdown 해석기는 대부분의 표현기능이 잘 살아나지만, MathJax 기능이 내장되어 있지 않으므로 보강해 줄 필요가 있다.
_includes/head.html 파일의 안에 다음 코드를 복사해 넣어 준다. (</head> 태그 바로 앞에 넣어준다.)

<!--  MathJax  -->
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    tex2jax: {
      inlineMath: [ ['$','$'], ["\\(","\\)"] ],
      processEscapes: true
    }
  });
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

포스팅하기

로컬PC 저장소에서 글을 직접 쓴 후 git으로 push 하는 방식으로 업데이트해도 된다.
단, 이때 글은 반드시 _posts 디렉토리 안에 넣어야 한다.
글의 파일 이름은 반드시 2017-01-09-Subject.md 형식으로 해야 하고, Subject(제목)은 영어로 써야 한다.
편집기로 글을 쓰면 되는데, 이때 마크다운 양식으로 쓰되 머리 부분에는 YAML 헤더를 반드시 넣어줘야 한다. 기본형은 다음과 같다. (단 머리 부분의 \-\-\-는 3개의 -로 대체해야 함)

\-\-\-
layout: post
published: true
title: 제목
subtitle: 추가 설명
date: '2017-01-09'
\-\-\-

로컬에서는 이렇게 몇가지 규칙들을 지켜야 하므로 불편하다. (익숙해지면 상관없을 것이다.)
웹(온라인)에서 외부 온라인 편집기 서비스를 이용하는, 좀 더 편리한 방법도 있다.
- 여러가지 서비스 중에서 가장 적합한 것은 Prose.io이다. Github와 찰떡궁합이다. 그냥 Prose.io에 가서, Github 계정으로 로그인하면 나의 Github 저장소가 그대로 뜬다. 거기서 새로운 파일을 만들거나 편집할 수 있다.
- 파일 이름은 그냥 Subject 부분만 써주면 자동으로 2017-01-09-Subject.md 형식으로 만들어지도록 셋팅되어 있다.
- 또 Meta Data 아이콘 버튼을 누르면 YAML 헤더 형식으로 만들어 주는 탬플릿이 나온다. 물론 내용은 직접 넣어줘야 한다.
- 이때 Published 상태를 On으로 체크해서 활성화 해 줘야 블로그에 포스팅이 뜨게 된다.

간단한 그림 그리기, 그림 업로드

글을 쓰다가, 간단한 블록선도나 그림을 그려서 삽화로 넣어줘야 할 경우에는 Draw.io 서비스를 이용하면 된다.
그림은 일단 로컬PC에 저장했다가, 이것을 Github에 올려서 링크시켜 사용한다.
가장 간단한 방법은 Github 저장소의 Issues 탭에서 새로운 토픽을 하나 만들고, 글을 써넣는 공란에다가 직접 그림파일을 마우스로 잡아끌어 떨어뜨려주면 된다. (자동 업로드 된다.) 그리고 올려진 그림의 주소(URL)을 따서 링크시켜 사용하면 된다.

맺음말

티스토리, 네이버 블로그, 구글 블로그스팟, 텀블러(Tumblr) 같은 블로그 서비스보다 처음에는 불편하게 느껴질 수도 있다.
그러나, 이렇게 직접 블로그를 구축해서 운영하게 되면, 모든 자료를 스스로 장악해서 관리할 수 있다는 점이 중요하다. 서비스가 중단되어도 자료는 내가 빼내서 그대로 유지할 수 있다.
또 마크다운 형식이므로 (별도의 특수한 WISIWIG 에디터가 없어도) 아무 편집기나 사용해서 편하게 글을 작성할 수 있게 되며, 추후에 이것을 다른 여러 포멧으로 자유롭게 변환/가공할 수 있게 된다. (책으로 엮어 내거나, 프리젠테이션 형식으로 하거나 기타등등)
아울러 Github 및 git을 사용해서 관리하게 되므로, 모든 히스토리가 자동으로 보존/관리되며, 이 과정은 보편적인 소프트웨어 개발관리하는 방법 그 자체이며, 이것을 자연스럽게 익힐 수 있게 한다.

Make_Blog

Github에 Beautiful-jekyll을 구축하는 순서 설명

Make_Blog

Github에 Beautiful-jekyll을 구축하는 순서 설명

Blog 구축

사전 계획

Github 가입

Beautiful-Jekyll을 Fork 한다.

Beautiful-Jekyll 저장소 셋팅

_config.yml 설정 (기본 설정)

블로그 대문의 문구 수정

자기소개 페이지 내용 수정

본문글 폰트 변경

로고 그림 수정

댓글 시스템 추가 (DISQUS)

로컬PC에 Git클라이언트 설정

Github에 있는 beautiful-jekyll 저장소를 clone 해 오기

자체 검색 기능 추가

Blog의 글들이 구글,네이버에서 검색되도록 설정하기

수학식 표현 가능하게 하기 (MathJax 활성화)

포스팅하기

간단한 그림 그리기, 그림 업로드

맺음말