Post

Github Blog 시작하기

Posted
By bbb1293 11 min read

동기부여를 받고자 하는 마음에 새로운 마음으로 블로그를 운영해 보고자 한다.

Introduction

우선 어떤 플랫폼에서 블로그를 운영할지에 대한 고민이 필요했다. 예전에 사용하던 네이버나 티스토리 블로그를 그대로 사용할까 했으나 수식을 작성할 때 조금 더럽게 적었어야 했던 기억이 있어서 꺼려졌다. 다른 플랫폼도 생각해보았지만 그리 다를 거라는 생각이 들지 않아 최종적으로는 Github을 이용한 블로그 호스팅을 생각하게 되었다.

Github blog를 이용했을 때의 내가 예상한 장점들은 다음과 같다.

  1. markdown을 통해 내용을 보다 손쉽게 포멧팅할 수 있다. (코드나 수식같은거 적기 편해보였다) (ref)
  2. 1번과도 연관되어 있는 거지만 코드 에디터를 사용해서 문서 작성을 할 수 있다는 점이 생산력을 향상시킨다. (vim 키맵 최고)
  3. 이 외 블로그 형식이라든지 디자인 등 내가 원하는 것을 필요하면 코드로 추가하는 것이 가능할 것으로 생각했다.
  4. 뭔가 개발자라면 Github blog 하나쯤은?

단점은 아무래도 초기 세팅이 조금 귀찮다는 점? 사실 instruction만 잘 따라 하면 이것도 문제가 되지는 않아 보인다. (나 같은 경우에는 조금 이상한 데에 시간을 허비하긴 했지만..)

그리고 맞춤법 검사가 힘들다는 점이 있다 (기억에 티스토리는 약식으로나마 글 전체를 모두 검사하는 기능이 있었다.) 물론 한국어 교정 VS Code Extension이 있기는 한데 모든 글을 교정하려면 조금 귀찮아 보인다..

Setup

보통 Github blog를 만들 때 Jekyll이라는 Ruby 베이스의 static site generator을 사용하는 것이 대세같았다. Jekyll 위에서 사용할 수 있는 여러 theme들이 있는데 Chirpy라는 theme이 가장 이쁜 것 같아 이걸로 선택했다.

셋업은 demo 블로그의 게시물들을 그대로 따라하면 된다. 대략적으로

  1. Jekyll Installation
  2. Git Installation
  3. 본인 repo에 Chirpy repo fork (이 때 repo 이름은 username/github.io로 지어줘야 한다)
  4. fork한 repo를 로컬로 clone하여 repo 폴더에서 $ bash tools/init 실행해준다.
  5. mater 브랜치에 commit이 있을 때마다 사이트를 새롭게 deploy 해주기 위해 Github action을 세팅해준다.

블로그에 너무 깔끔하게 잘 정리되어 있어 뭐라 덧붙일 이야기는 없다.

Setting

이 역시 블로그 글을 참조하여 세팅해주면 된다. 이 블로그 글을 참조하는 것도 좋아보인다. (본인 정보 입력하기, Google 서비스랑 연동하기 등)

Misc

사실 이거 때문에 많은 시간을 썼다. 다른 분들은 조금이라도 시간을 더 세이브했으면 하는 마음에 남겨본다.

Preview

markdown syntax로 게시물을 작성해야되게 때문에 실제로 글이 어떻게 보일지는 확인하기 힘들다. 이 때 손쉽게 페이지를 확인할 수 있는 방법은 다음과 같다.

  1. 터미널을 통해 로컬에 있는 username/github.io로 이동한 후 다음과 같은 명령어를 입력한다.
    1

    $ bundle exec jekyll serve --livereload
  2. 인터넷 브라우저를 통해 http://localhost:4000/에 접속한다.

--livereload라는 option에서 유추할 수 있듯이 변경사항이 있을 때 (_posts 폴더 안에 post를 추가한다던지 post의 내용물이 변한다던지 등) 이를 실시간으로 반영해서 렌더링 해준다.

Preview using Front Matter CMS

나 같은 경우 html 파일의 preview를 에디터를 통해 확인할 수 있듯이 코드와 preview를 함께 띄우고 싶었다. VS Code의 경우 markdown 문서의 preview는 지원하고 있기는 한데 이게 또 실제로 렌더링되는 페이지와는 모양이 달라서 방법을 찾아봐야했다.

VS Code를 사용하는 경우에만 해당된다.

  1. VS Code Extension으로 Front Matter CMS, Browse Lite를 다운받는다.
  2. username/github.io 폴더를 VS Code에서 열어준다.
  3. 왼쪽 side bar에 있는 FM이라는 아이콘을 클릭해 Initialize project를 클릭한다.
  4. 페이지가 하나 뜰 것이다. step by step으로 잘 세팅해주면 된다. (INITIALIZE PROJECT 클릭 -> FRAMEWORK PRESETS으로 jekyll 설정 -> REGISTER CONTENT FOLDER(S)에서 _posts 클릭)
  5. 현재 폴더에 있는 frontmatter.json를 열어 가장 아래에 있는 frontMatter.content.pageFolders를 다음과 같이 변경해준다. (previewPath 필드 추가)
    1
2
3
4
5
6
7

    "frontMatter.content.pageFolders": [
 {
   "title": "posts",
   "path": "[[workspace]]/_posts",
   "previewPath": "/posts/"
 }
]
  6. VS Code를 껐다가 다시 켜서 username/github.io 폴더로 다시 들어간다.
  7. FM 아이콘을 열면 ACTIONS에 여러가지 기능들이 보인다. Start server를 클릭한다.
  8. preview를 원하는 post (e.g. 2023-10-15-make-blog.md)에 들어가 제일 위에 있는 yaml 형식에 slug 필드를 추가해준다. (yyyy-mm-dd-title에서 title부분 가져오기 e.g. slug: make-blog)
    1
2
3
4
5

    ---
slug: make-blog
title: Github Blog 시작하기
...
---
  9. ACTIONS에서 Open preview를 클릭하면 preview를 확인할 수 있다.

원리적으로는 위의 방식과 동일한데 초기 세팅만 해주면 에디터 안에서 모든 걸 해결할 수 있다는 장점이 있다. post를 변경할 때마다 마지막 수정 시간인 lastmod도 바꿔주는 등 쏠쏠한 기능들이 많다. 2번을 해주는 이유는 오픈한 폴더를 기준으로 $ bundle exec jekyll serve --livereload가 실행되는 것처럼 보였기 때문이다 (아닐수도 있다.)

세팅한 뒤에는 7-9번만 잘 해주면 된다.

혹시 안된다 싶으면 VS Code를 껐다가 다시 켜주자. 컴퓨터를 사용하지 않다가 다시 사용하면 버튼이 안먹히는 경우가 있다.

Comment

코멘트 기능을 넣을 수 있다. chirpy theme은 disqus, utterances, giscus 라는 서비스들을 지원하고 있는데 disqus는 유료 서비스라 패스 (free로 사용할 수 있는데 광고가 붙는다), open-source인 utterances와 giscus 중 고민하다 UI가 더 이뻐보이는 giscus를 선택했다.

둘 모두 기본적으로 Github을 이용한다. utterances는 repo의 issue 창을, giscus는 repo의 discussion 창을 사용한다. 데이터베이스 없이 코멘트를 이런식으로 관리한다니.. 진짜 창의력이 대단한 것 같다.

giscus를 사용한 comment 세팅은 다음과 같다.

  1. giscus page에서 적힌 그대로 진행한다.
    1. Github에서 public repo를 생성한다
    2. giscus app을 생성한 레포에 적용시킨다.
    3. 생성한 레포의 세팅에서 Discussion을 허용한다.
    4. 생성한 레포 이름을 여기에 입력한다.
    5. 아래로 쭉 내려서 script 항목을 확인한다.
  2. 1-5에서 확인한 값들을 바탕으로 현재 폴더 안에 있는 _config.yaml 안에 있는 comments 필드를 수정해준다.
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

    # e.g.
comments:
 active: giscus # The global switch for posts comments, e.g., 'disqus'.  Keep it empty means disable
 # The active options are as follows:
 disqus:
     shortname: # fill with the Disqus shortname. › https://help.disqus.com/en/articles/1717111-what-s-a-shortname
 # utterances settings › https://utteranc.es/
 utterances:
     repo: # <gh-username>/<repo>
     issue_term: # < url | pathname | title | ...>
 # Giscus options › https://giscus.app
 giscus:
     repo: bbb1293/giscus # <gh-username>/<repo>
     repo_id: R_kgDOKgUZVQ
     category: Announcements
     category_id: DIC_kwDOKgUZVc4CaIce
     mapping: # optional, default to 'pathname'
     input_position: # optional, default to 'bottom'
     lang: # optional, default to the value of `site.lang`
     reactions_enabled: # optional, default to the value of `1`

최종적으로 이러한 형태이다. comment 페이지 밑에서 확인할 수 있다

Tips

  • _posts 폴더 안에 하위 폴더를 만들어서 md 파일을 넣어도 잘 인식한다. post를 폴더별로 관리하고 싶을 때 유용할 듯
  • image를 넣으려고 할 때 assets 폴더 안에 이미지를 넣어야 인식이 되는 듯 했다. _posts에 바로 넣으니깐 인코딩 오류가 발생했는데 여기엔 md 파일만 있다는 전제가 있을 것으로 추측된다.
Github, Setup
github blog
This post is licensed under CC BY 4.0 by the author.