Always First, Always Ace!

퍼스트에이스의 새로운 기술 블로그, 퍼에 기술 블로그를 열었습니다.

우리가 꿈꾸는 기술 블로그

저희가 꿈꾸는 기술 블로그의 모습입니다.

Expert Beginner가 되지 않도록 항상 겸손하고, 자만하지 않기
새로운 기술이 나오면 제일 먼저 다가가고 시도하는 진보적인 자세 가지기
孔子穿珠, 모르는 것을 부끄러워하지 말고 제대로 이해할 때까지 질문하기
뉴비도 이해할 수 있도록 기초부터 상세히
정보의 홍수 속에서 양질의 컨텐츠를 제공할 수 있다고 약속하기

그럽 이제 만들어 볼까요?

뚠뚠, 지금 바로 시작합니다(Mac OS X 기준으로 설명합니다).

1. jekyll 설치하기

jekyll은 Ruby로 작성된 오픈소스 정적(static) 사이트 생성기입니다. 세부적인 커스터마이제이션이 가능하고 Markdown으로 간단하게 포스트를 작성할 수 있으므로 생산성이 높으며 deploy와 Maintenance가 간편하기 때문에 선택한 툴입니다.

$ sudo gem install jekyll

2. Hello, jekyll

$ jekyll new FirstAce-tech
$ cd FirstAce-tech
$ bundle install
$ jekyll serve

bundle install은 프로젝트의 의존성이 명시된 파일 Gemfile의 모든 gem을 설치합니다.

FirstAce-tech라는 새로운 사이트를 만들고 로컬에서 serve합니다.

Server address로 표시되는 http://127.0.0.1:4000/, 즉 http://localhost:4000/에 접속하면 아래와 같은 기본 블로그 테마의 화면을 볼 수 있습니다.

와~ 이제 구축이 끝났습니다.

3. jekyll의 Directory 구조

_config.yml : 제일 먼저 눈에 띄는 파일입니다. YAML(YAML Ain’t Markup Language) 형식의 파일로, 이름에서 알 수 있듯이 사이트의 설정을 다룹니다.

title에 사이트의 제목, description을 사이트 설명으로 수정했고, 직접 테마를 만들어서 사용하기 위해서 theme setting을 삭제했습니다.

index.html : 사이트의 홈 페이지로 프로젝트의 루트에 위치합니다.

처음 기술 블로그에 들어가면 최신 포스트 목록이 표시되어야 하므로, index.html에서 최신 순으로 각 포스트의 제목(post.title), 작성일(post.date), 글쓴이(post.author), 부제목/설명(post.description)이 나타나도록 했습니다.

_includes : 템플릿 내에서 include 태그로 불러오는 파일이 위치하는 디렉토리입니다.

기본 HTML의 head 태그와 footer를 각각 header.html, footer.html로 만들어 두었습니다.

_layouts : 사이트의 페이지가 렌더링되는 template이 위치하는 디렉토리입니다.

base 템플릿인 default.html, index.html과 같은 파일을 위한 layout인 blog.html 그리고 포스트를 렌더링하기 위한 post.html 파일을 각각 생성했습니다.

_posts : 각 포스트 파일을 넣어주는 디렉토리입니다. 파일은 yyyy-mm-dd-title 형식을 따라야 합니다.
_site : 생성된 사이트의 파일들이 위치합니다.

이외에도 많지만 생략하도록 하겠습니다.

4. Github-style

Github의 Markdown style은 정말 깔끔하고 편안합니다(어쩌면 처음 Markdown을 접할 때부터 사용해왔기 때문일지도 모릅니다).

https://gist.github.com/tuzz/3331384

위 gist의 github.css를 적용해서 아름다운 Github-style을 블로그에 적용할 수 있었습니다(구글링했을 때 Github Markdown CSS 프로젝트도 있었지만, 적용이 더 쉬웠던 이 코드를 선택했습니다 - code block과 같은 일부 구성 요소가 제대로 표시되지 않았기에).

잠깐, jekyll의 템플릿에서 어떻게 외부 파일을 연결하냐고요? 전혀 어렵지 않답니다.

<link rel="stylesheet" type="text/css" href="/assets/css/github.css">

jekyll은 다른 일반 폴더나 파일들은 그대로 사이트에 복사하기 때문에, 위와 같이 사이트 URL을 저장하는 변수 site.url을 이용해서 경로를 표기하면 됩니다.

포스트를 작성할 때, 이미지 등의 미디어를 첨부하는 경우 역시 같은 방법을 이용할 수 있답니다.

<p align="center">
    <img src="/assets/images/2018/09/19/screenshot.png" width="70%">
</p>

img 태그의 상위 태그인 p에 align="center" attribute를 주어서 이미지를 가운데에 정렬하는 예제입니다.

5. Facebook 댓글 플러그인

이제 Facebook 댓글(Comments) Social Plugin을 이용해서 포스트별 댓글을 구현해봅시다.

먼저 새 Facebook App을 생성해야 합니다. https://developers.facebook.com/apps/에서 새 앱 추가를 클릭해서 새로운 앱을 만듭니다.
앱 관리 페이지의 설정 - 기본 설정의 앱 도메인 항목에 사이트 URL을 입력합니다
앱 ID를 복사합니다.

아래 코드의 APP_ID 부분에 앱 ID를 넣고 기본 템플릿(default.html)에 붙입니다.

<div id="fb-root"></div>
<script>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=APP_ID";
    fjs.parentNode.insertBefore(js, fjs);
}(document, "script", "facebook-jssdk"));
</script>

포스트 템플릿(post.html)에서 댓글 플러그인이 들어가길 원하는 곳에 아래 HTML을 위치시킵니다.

<div class="fb-comments" data-href="/2018/09/19/%EC%95%88%EB%85%95-%ED%8D%BC%EC%97%90-%EA%B8%B0%EC%88%A0-%EB%B8%94%EB%A1%9C%EA%B7%B8.html" data-width="100%"></div>

이렇게 나오네요.

Facebook 댓글 플러그인을 Embedding하는 데 성공했습니다! 이제 HTML/CSS를 이용해서 예쁘게 위치시켜 주면 됩니다.

드디어 다 만들었습니다

(정말이지 너무 심플한) main page

(정말이지 너무 심플한) post

아직 수정하고 추가해야 하는 것들이 많이 남았지만 일단은 완성했습니다! ~~이제 deploy 후 포스팅만 하면 되겠네요.~~

안녕? 퍼에 기술 블로그