3 min to read
블로그 옮기기 ⓪:프롤로그 - 나는 왜 이 환경을 골랐나
저는 왜 블로그를 옮겼고, TeXt라는 테마를 골랐을까요? 블로그 제작기의 첫걸음 입니다.
이 포스트는 "블로그 만들기" 시리즈의 1번째 포스트 입니다.
-
블로그 옮기기 ⓪:프롤로그 - 나는 왜 이 환경을 골랐나
저는 왜 블로그를 옮겼고, TeXt라는 테마를 골랐을까요? 블로그 제작기의 첫걸음 입니다.
-
블로그 옮기기 ①:첫걸음 Jekyll 기초
기초의 기초 프론트엔드 지식만 가지고 있는 상태에서, Jekyll 블로그를 운영하기 위한 기초 지식을 더 얹어 봅시다.
-
블로그 옮기기 ②:포스트 창 개선하기
TeXt의 기본 테마의 포스팅 화면에서 아쉬운점을 개선해봅시다.
-
블로그 옮기기 ③:본격 블로그 메인화면 꾸미기
밋밋한 블로그 화면을 화사하게 꾸며봅시다.
-
블로그 옮기기 ④:기능 추가하기
사용 블로그와 견줄수 있는 기능들을 만들어 넣어봅시다.
-
블로그 옮기기 ⑤:기타 블로그 관리
블로그를 관리할 때 필요한 여러 요소들을 익혀봅시다.
저의 블로그의 역사
블로그를 해보자! 근데 뭘 해야하지?
작년 말, 올해 초 즈음 해서, 새해 다짐으로 블로그를 시작해 봐야겠다는 다짐을 해봤습니다. 그때는 지금보다 더 별게 없는 사람이어서, 백준 문제 난이도 기준으로 골드 깔짝대는 PS실력과, 학교 수업 2학년까지 전 과목 B+에서 A0,A+ 정도로 수료한 지식, 그리고 마크다운 작성법 만이 제가 가지고 있는 기술수준 이었습니다. 지금은 풀스택 개발자가 되야지 하는 목표로 HTML/CSS 강의부터 시작해, 노마드코더를 비롯한 여러 출처에서, 개발을 공부하고 있지만, 그땐 진짜로 블로그를 관리하기 위한 기술이라곤 하나도 없었습니다.
공부를 하면서 구글링을 하게 되지요. 그때 저는 왠지 github.io로 끝나는 블로그들이 되게 멋있게 보였습니다. 또 찾아보니, 깃허브에 리포지토리를 하나 파고, 마크다운 파일을 깃헙에 푸쉬하면, 그게 블로그 글이되어 올라간다는 컨셉은 더더욱 멋지게 보였습니다. 그래서 그때 무지성으로 시작해 봤습니다. 테마를 포크하고, 몇몇 개인 설정을 하고 마크다운으로 글을 올리면 된다고 하여, 그렇게 해볼려고 했지만, 세상은 그리 만만한 존재가 아니더라고요… 그리고, 뭔가를 추가하는것도 개발짬이 많이 낮은 저에게는 너무나도 어려운 일이었습니다. 그때의 저에겐 Jekyll 같은 설치형 블로그보단, 서비스형 블로그가 맞겠다 싶어 좋은 서비스를 찾을려고 했습니다.
마크다운으로 글을 쓰는 Velog
여러 서비스들을 찾아봤습니다. 한국에서 흔히 알려진 네이버 블로그, 티스토리, 구글 Blogger, 워드프레스…. 너무나도 많았지만, 저는 그러한 블로그 서비스보다는 약간 덜 알려진 Velog
라는 서비스를 이용해서 블로그를 시작했습니다.
Velog
는 마크다운으로 블로그 글을 작성할 수 있는 플랫폼 이고, 업데이트로 Katex
를 이용한 수식 작성또한 지원한다고 나와있었기에, 그때 제가 생각했던 멋지구리한 github blog를 비록 github에 글을 올리는것은 아니지만, 마크다운으로 글을 쓰면 그게 블로그 글이 된다는 저의 필요를 만족시켜 줄 수는 있어 보였습니다. 그렇게 좋은 서비스를 찾아서, 이제 그걸로 블로그를 쭉 지속했었으면 너무나 좋았으려만…..
Velog의 기술적 문제!
Velog
는 마크다운은 충실하게 지원했습니다만…. 마크다운은 HTML과 다르게 지원해주는 기능의 수가 제한적이라, 마크다운에는 없는 기능이 필요하다면 직접 HTML 코드를 삽입해서 혼용해서 쓰는 경우가 많습니다. 일반적인 서비스형 블로그라면, 당연히 지원할법한 가운데 정렬
은 마크다운의 기본 기능에 없어서 HTML의 <center></center>
를 활용해서 적어야 했거든요.
근데, 그게 Velog에서 작동을 안하는 겁니다! Velog
의 개발자 Velopert
님이 지속적으로 기능을 추가하는 업데이트도 하고 있지만, 제가 직접 개발을 하는것은 아니니, 언제 그게 될지 모르는 상황이고, 또, Velog
에서 활동하는 동안, 제가 HTML/CSS/JS를 배워서 웹 프론트의 기초의 기초 정도는 할 수 있게 되어서, Jekyll을 활용한 github blog를 만들 준비가 되었지 않았을까 해서, 2021년 6월 14일부터, Jekyll 블로그를 만들어, github pages로 포스팅하기로 마음 먹었습니다.
Jekyll 시작하기
Jekyll 한국 페이지에 들어가서 보면 맨 처음 보이는 글씨는
평범한 텍스트 파일을 정적 웹사이트 또는 블로그를 변신시켜 보세요.
끝내주는군요. 공식 Docs를 읽어나가면서 모든 프로젝트의 국룰이라 할 수 있는 Hello World를 띄워보고, 차곡차곡 읽어가며 해보다가… 사실 있잖아요 한국인들 특징 다 아시잖아요…. 설명서, 튜토리얼 잘 안읽는거…
그리고 저도 한국인 이기에 대충 보고 스킵하고, 무지성으로 테마를 다운받아서 예전에 markdown
형식으로 쓴 글들이 블로그 테마에 맞게 짠 하고 나오는지 테스트 하고 싶었습니다. Jekyll에는 테마가 원체 많기에
너로 골랐다. TeXt
제가 테마를 고른 기준은 다음과 같았습니다.
- 스마트 기기들의 대중화로 스마트폰, 태블릿 등과 같이 다양한 크기의 디바이스로 웹페이지를 탐방하는 요즘입니다. 반응형 페이지일것
- 난 디자인을 잘 못해. 그냥 심플하게 뚝딱 끝내고 싶다. 심플할 것
- 처음인데 테마 차원에서 이것저것 지원해줬으면 좋겠다. 다양한 추가기능
이러한 제 요구에 꽤 부합하는 테마가 TeXt 라는 테마였습니다. 공식 소개에는
TeXt는 개인 페이지, 팀 페이지, 프로젝트, 문서 등등을 위한 슈퍼-커스터마이징 가능한 테마입니다. iOS 11 스타일을 닮았으며, 크고 눈에띄는 타일, 둥근 버튼과 카드 등을 제공합니다.
라고 영어로 적혀있었습니다. 이미지도 꽤나 멋져보였습니다. 와우 이런 멋지구리한 페이지가 내 블로그가 된다면 너무나도 좋을거 같은걸? 하는 생각으로, 공식 문서를 읽어봤습니다. 꽤나 많은 기능을 제공하는 테마였습니다.
- Velog의 그것과 유사한 우측에 뜨는 색인 목록
- (잘 안쓸것 같지만) Mermaid를 활용한 플로우차트 제작 기능
- (이것도 잘 안쓸거 같지만) Chart 기능 내장으로 다양한 형태의 그래프를 markdown으로 작성하여 시각적으로 변환해줌
- 6가지의 컬러로 제공하는 블로그 테마
- 4가지의 컬러로 제공되는 코드 하이라이팅 기능
- 다양한 외부요소 삽입 가능.유튜브라던가, Codepen으로 미리보기 제공이라던가…
- 미리 디자인된 Alert, Tag, Button, Hero, Swiper 등등
- 내장해놓은 font-awesome : 멋진 아이콘들을 쓸 수 있음
- 댓글, 공유 등등의 기능을 세팅만 하면 알아서 넣어줌
- … 기타등등
와우! 정말 마음에 쏙 들었습니다. 이 테마와 함께라면 저는 무적의 블로그를 만들 수 있을것만 같은 기분이 들었습니다. 이것이 저의 블로그를 만들기 위한 1주일간의 험난한 삽질의 여정의 시작이었습니다…