블로그를 만들게된 배경#

야밤 긴 야근을 지나 퇴근을 할 때면 늘 내 삶에 내가 없다는 허무함이 밀려왔다. 분명 아침에 눈을 뜰 때는 어떤 재미난 일이 있을까 큰 기대에 부풀었는데 결국은 월급만 바라보며 일만 하는 하루를 보냈다. 성실하게 살아도 크게 나아지지 않는 나의 형편과 내일도 오늘과 같을 거라는 상황에 조금씩 절망하게 된다. 이러한 삶에서 벗어나기 위해 나름 여러 가지 도전을 하나씩 해보고 있다.

맨 처음 도전한 건 요리였다. 평소에 가장 잘하는 요리는 북엇국이다. 이번에는 잘하는 요리가 아니라 보고 따라 하는 요리를 해보기로 했다. 어떤 요리를 할까 고민하다 퇴근하고 야밤에 슬쩍 슬쩍 돌리다 만난 백종원 레시피의 '무 덮밥'을 하기로 했다. 업무에 질려서 칼퇴근을 마음 먹은 날 퇴근하자 마다 대형 마트에 갔다. 평소에 전분이라든지 고춧가루를 살 일이 없던지라 굉장히 오래 걸려서 장보고 나오니 저녁 9시가 되었다. 집에 와서 부랴부랴 재료들을 손질하니 30분이 걸렸고 요리를 완성하는 데 30분이 걸렸다. 저녁을 10시에 먹었다. 계량을 잘한 줄 알았는데 많이 틀렸는지 무 덮밥이라기 보다는 무가 첨가된 굉장히 매운 국이 되었다. 늦은 밤에 힘들게 만든 저녁을 맛없게 먹었다. 굉장히 행복했다. 나를 위해 내가 온전히 시간을 들였다는 점이 오늘을 특별하게 했다.

사회생활 하면서 다른 사람들과 대화하는 경우가 굉장히 많이 생겼다. 이 사람은 이런 생각을 하는구나 나는 이런 생각을 한다고 알려야지 하며 수많은 대화를 했다. 사람이 없어도 스마트폰으로 뉴스로 남의 이야기를 보고 유튜브로 남의 이야기를 듣게 되었다. 정작 나 홀로 내 안의 이야기를 듣는 건 잠들기 몇십분이 전부다. 그래서 두 번째 도전하는 건 글쓰기다. 온전히 시간을 들여서 나는 어떤 이야기를 하는지 기록하기로 했다. 그것이 오늘을 넘어서서 요즘의 나를 특별하게 하리라 믿고 있다. 특별한 나를 나 스스로 간직하는 것도 좋지만 표현도 하고 싶어서 블로그를 만들기로 했다. 첫 글로 프로그래머인 내가 블로그를 만드는 법을 쓰겠다.

블로그 관련 용어 정리#

• WYSIWYG
  • What You See Is What You Get 의 약자로 글을 쓰면 그 모습 그대로 서비스하게 하는 기술이다.
  • 간단하게 텍스트 에디터를 생각하면 된다. 다만 워드가 한글과 호환이 되지 않는 것처럼 네이버 블로그 WYSIWYG에서 쓴 글이 미디엄에 그대로 반영되지 않는 경우가 있다. 프로그래머들은 어디서든 호환이 되는 글을 쓰기 위해 markdown 형식에 맞추어서 글을 쓰고 markdown을 지원하는 서비스를 주로 이용한다.
• markdown
  • 일반적인 글을 쓰는 데 사용되는 문법이다. 특히 주로 온라인에서 사용되는 글쓰기에 잘 맞추어져 있어 위키, 블로그, 또는 notion에서도 활용되는 문법이다.
  • 프로그래머들은 보통 markdown 문법에 맞추어서 글을 써서 이를 해석해서 웹으로 노출하는 프로그램을 만들어 블로그를 한다.
• SEO
  • Search engine optimization의 약자로 검색 시에 잘 노출되도록 하는 작업을 뜻한다.
  • 제공하는 웹페이지가 어떤 내용을 품고 있고 주로 어떠한 카테고리로 분류되는지 명확하게 알려주는 작업이 노하우이며 이를 잘해야 검색을 통한 유입이 많을 수 있다.
  • SEO는 커스텀 웹에서만 커스텀하게 작업을 할 수 있다. 검색엔진별로 필요로 하는 정보도 다양해서 이를 잘 대응해주면 큰 효과를 얻을 수 있다.
• 프레임워크
  • 특정 기능(여기서는 블로그 만들기)을 하는 프로그램을 만들 때 쉽게 구성하도록 미리 만들어진 뼈대이다.

블로그 종류#

블로그는 크게 두 가지로 나눌 수 있다.

• 블로그 서비스업체에서 제공하는 블로그
  • Ex) 브런치, Medium, 네이버 블로그
  • 장점
    • 흔히 포털 사이트에서 제공하는 서비스이기 때문에 검색엔진에 노출될 확률이 굉장히 높다.
    • 글쓰기 좋은 WYSIWYG을 제공한다.
  • 단점
    • 아무나 글을 쓰지 못하도록 초대장 또는 검증이 있어야만 글을 쓸 수 있는 경우가 있다.
    • 커스텀이 굉장히 한정되어 있어 완벽하게 내가 원하는 블로그를 만들 수 없다.
    • 다른 서비스로 글을 이전하려면 일일히 다시 작성해야 할 수밖에 없다.
• 코드 프레임워크를 활용하여 직접 제작하고 제공하는 블로그
  • Ex) jekyll, Hugo, Wordpress
  • 장점
    • 글쓰기를 잘하지 못하는 사람이 쓴 어떤 글도 다 올릴 수 있다.
    • HTML/CSS/JS를 알면 굉장한 커스텀 블로그를 만들 수 있다.
    • 보통은 markdown으로 글을 관리하기 때문에 글을 정형화하여 어디든 이식하기 쉽다.
  • 단점
    • SEO를 제대로 하고 좋은 글을 만들어 꾸준히 공유되어야 검색엔진에 노출된다.
    • 프로그래밍을 어느 정도 알아야 유지 관리할 수 있다.
    • 보통은 markdown을 쓰기 때문에 markdown 문법을 배워야 한다.

브런치 심사에서 떨어지기도 했고 프로그래머이기 때문에 '코드 프레임워크를 활용하여 직접 제작하고 제공하는 블로그'를 만드는 법을 설명하고자 한다.

블로그 프레임워크 종류#

블로그 프레임워크에는 크게 두 가지 방향이 있다.

• CMS (Content management service)
  • Ex) Wordpress
  • 글을 관리하는 데 집중한 서비스로 제품 구성은 복잡하지만, 관리의 편의성은 굉장히 높다.
  • 다수 작가들의 글을 하나의 서비스로 관리할 때 더 편리하다.
• Static generator
  • Ex) jekyll, docusaurus, Hugo
  • 제품 구성이 굉장히 간단하기 때문에 구성 비용이 적지만 개인화를 하기 위해서는 제품에 대한 높은 이해도가 필요하다.

가난한 개발자 입장에서는 가장 신경 쓰이는 부분이 비용이었다. 따라서 제품 구성이 간단한 Static generator 방식을 자연스레 선택하기로 했다.

유명한 Static generator 종류#

개발자들은 늘 비용에 민감하다 보니 블로그 프레임 워크로 Static generator는 정말 인기가 많다. 인기가 많은 만큼 수 많은 프레임워크가 있다. 이 중에서 가장 유명한 네가지 프레임워크에 대해 설명하겠다.

• jekyll
  • 굉장히 오래된 static generator로 오래된 만큼 레퍼런스도 다양하다.
  • 다양한 개발자들이 만든 플러그인과 테마가 굉장히 많다.
• Hugo
  • 최근에 가장 잘나가는 generator로 빠르고 가벼운 Golang 언어로 만들어 빌드도 로드도 굉장히 빠르다.
  • 테마가 굉장히 많다.
• gatsbyjs
  • 블로그 뿐만 아니라 다양한 웹서비스를 타겟으로 만들어져 폭 넓은 활용이 가능합니다.
• docusaurus
  • 페이스북 오픈소스에서 관리하는 프로젝트로 믿음직한 관리 단체가 있다.
  • 주된 서비스는 개발 문서와 블로그이지만 reactjs를 이용한 폭 넓은 활용도 가능하다.
  • 다만 생긴지 얼마 되지 않아서 레퍼런스, 플러그인 그리고 테마가 굉장히 부족하다.

개인적으로 디자인에 관심이 없고 빠른 속도와 높은 개발력에 매력을 느껴서 docusaurus를 이용해서 블로그를 만들기로 했습니다.

Docusaurus로 블로그 만들기#

우선 설치는 당시의 개발문서가 기준이기 때문에 2020년 6월 7일(2.0.0-alpha.56)에 한해서 아래 내용이 통용됨을 알린다. 이후에는 꼭 Docusaurus의 개발문서를 참조하길 바란다.

요구사항#

• 10.15.1 버젼 이상의 NPM

설치#

설치를 원하는 페이지로 이동하여 아래 명령어를 실행한다.

여기서 name은 자신이 원하는 블로그 이름을 지정하면 된다. template에는 classic과 facebook이 있으며 이는 docusaurus의 v1과 v2를 나타낸다. 세팅을 v1 처럼 개발하고 싶다면 classic으로 v2로 하고 싶다면 facebook으로 하면된다.

프로젝트 구조#

my-website라는 이름으로 위 명령어를 실행했다면 아래와 같은 폴더와 파일이 생성된다.

실행#

my-website 폴더에 들어가서 아래 명령어를 수행하면 localhost:3000으로 블로그가 로드된다.