01. Intro - 블로그를 다시 시작하려고 보니.. 👋🏼
- 올해 초 이직에 대한 열망이 매우 차오를 때 부터 블로그를 다시 시작해야지 하는 생각이 계속 들어왔다.
- 누구나 그렇겠지만, 회사와 퇴근 후에 진행하는 멘토링/튜터링이 바빴기 때문에..
- 튜터링 혹은 멘토링을 하는 내내 블로그와 TIL을 권해놓고 나는 정작 이력서를 쓰면서 나에 대한소개나 포트 폴리오를 쓰기도 참 애매하구나 싶었다.
- 그래서 내가 일하면서 해왔던 트러블슈팅들이나, 자라났던 생각들을 잘 기록해 놓고 싶어졌다.
- 지금까지의 기록은 계획을 가지지 않고 해왔기 때문에살리는건 시작도 전에 포기했다!
- Vimwiki Private 디렉토리에 우후죽순으로 작성되어 있고. 아마 해당 기록을 올리면 높은 확률로 고소를 당할 것 같다 구상권
- 무튼 늦었지만 다시 시작해보려고 마음을 먹었다, 지나간일은 회고가 되고 하고있는 것들이나 배우는 것들은 TIL 비슷한 뭔가가 되겠지
- 그래서 블로그를 시작하기로 마음먹고 최근 2주동안 겪은 시행착오에 대해서 이야기 해보려고 한다.
02. Wannabe - Johngrib과 수많은 위키형 블로그🚀
앞서 이야기 한 것처럼 원래 Johngrib님의 블로그를 보고 나의 NeoVim config에 나름 적당히 잘 세팅해놓은 Vimwiki를 사용하고 있었다.
그리고Johngrib님의 레포를 fork해서 jekyll로 깃허브 블로그도 띄웠었다.
사실 그러고 나서는 거의 private 위키만을 이용해 왔었다. 왜냐하면 퇴근하고 하는 일도 있다보니 개인컴을 사용하지 않기도 하고, 회사맥에는 주로 업무를 위한 메모가 많았어서 분류할 겨를이 없었다.
그리고 다시 블로그를 띄우려고 하다보니.. 여러가지 설정들도 까먹고, 다시 시작하기 손에 안잡혔다.
그렇지만 위키의 형식을 갖추지 않고 글을 써갈 자신은 없고, 포스팅을 위해 추가적인 시간을 쓰기는 여전히 싫었다.
결론적으로는 새로 블로그를 파면서 위키를 세팅하는 시간을 가져기로 했고 나름의 대장정이 시작됐다
03. 블로그를 시작하며 영감을 줬던 것들
- 당연히 Johngrib님의 블로그
- 저런 윈도우 98같은 감성부터 세세한 기능들과 pre-hook까지 내가 했던 해왔던 고민들이랑 많이 일치한다는 생각을 했다.
- 다양한 TIL 레포들 이렇게 죽어라 긴 TIL을 보며 참 부러웠던 것 같다.
04. Hugo, Gatsby, Jekyll - 뭐가 더 좋고 적합할까🤔
사실 제목은 위와 같이 작성했지만, Jekyll은 딱히 고민하지 않았다, Jekyll을 사용해서는 Johngrib님의 위키보다 좋은 위키를 만들 자신이 없었다.
결론적으로는 Hugo, Gatsby 였는데 이 고민을 해결하는데 가장 시간이 오래 걸렸던 것 같다.
대표적인 특징이라기 보다는 내가 느낀 장단점은 아래와 같다
Gatsby 장점
- 너무 좋은 예시가 있었다. 바로 PadosumWiki 딱 저렇게 만들고 싶었었다.
- 심지어 해당 위키를 실행시키는 starter도 찾았었다.
- 싫다 싫다 하면서 개발해온 React와 Graphql 짬밥이 있어 커스텀에 자신이 있었다.
- 사실 커스텀보다 디버깅에 자신이 있었다.
Gatsby 단점
- npm 싫다… yarn 도 그냥 그렇다.. pnpm은 왜 안되는지 모르겠지만 굳이 공부하기는 싫었다.
- 마찬가지로 퇴근하고 React도 싫었다..
- 회사에서와 달리 내가 뷰를 만지는게 불가능한 시점부터 유의미한 커스텀이 가능할까 싶어지기도 했다
핑계
Hugo 장점
- Go를 사용해서 만들어 졌다. (커스텀 하기 위해 공부를 해야 한다면 차라리 이쪽을…)
- 빠르다 (대표적인 장점이지만, 실제로 Netlify에 호스팅을 시작하고 뭔가 크게 다가왔다)
- 나름 Jekyll을 써본 적이 있다고 익숙한 정적 사이트 생성기의 문법 (이생각은 큰 후회를 불러온다)
- 가볍고 미니멀해서 마음에 드는 테마가 있었다.
- 영어라면 레퍼런스는 충분히 많고, 포럼도 나름 활발하다.
- 너무 많이 든든한 레퍼런스를 찾았다, 이친구의 가이드 만 있으면 걱정이 없을 정도..
Hugo 단점
- Jekyll을 쓸 때 기억이 안났나 보다, 사실상 Go로 뭔가를 할 일은 극히 드물다, 아무래도 블로그 영업글? 등에서 Go로 되어있는 부분을 지나치게 강조하시는 것 같다. (물론 이부분은 생각이 많이 달라질 수 있다.)
- 특유의 SSR 템플릿 문법 (이건 위와 같은 맥락인데 쓰고 수정하는 내내 Thymeleaf, Handlebars 와 같은 문법에 시달렸다)
- 테마의 편집이 생각보다 신경 쓸 부분이 있긴하다. (서브모듈로 관리해야하는게 또 하나의 관리포인트가 될 것 같다, 심지어 조금 찝찝해서 테마 서브모듈을 포크를 따서 수정중이다)
05. Hugo Blog - 세팅기💭
기본 설정
- 기본 세팅 : 너무 쉽고 간편한 편이다. Hugo 공식 가이드도 잘 되어있고, 이 친구의 가이드와 함께면 더 간단하게 세팅 할 수 있다.
- 추가 커스텀 세팅 : 공식 가이드와 위 친구의 가이드를 참고해서 따라하다보면 눈치껏 커스텀이 가능하다.
- toc와 코드블럭과 같은 세팅들을 주로 했다.
- Nord Theme으로 무드잡기🧊 : Papermod는css관리가 잘되어 있어서 GPT에게 부탁하면 Nord처럼 유명한 Color Scheme은 바로 해준다.
- Theme/${테마명} 의 asset에 보면 보통 잘되어 있는 테마들은 주요 색상값에 대한 관리가 되어 있다.
- 테마 관리 : 결국 이런식의 커스텀은 테마쪽에서 이루어 질 수 밖에 없어서 결국 테마를 포크딴 레포를 서브모듈로 지정했다. (아마 테마 커스텀에 생각이 없거나, 더 정확하게 커스텀할 실력이 있다면 원본 레포를 서브모듈로 추가해 사후관리를 받는게 더 좋은 선택지 일 것 같다)
Vimwiki 관련 설정
Vimwiki의 링크를 html 링크로 수정하기
<script>
;(function() {
var content = document.querySelector('article.post-single');
content.innerHTML = content.innerHTML.replace(/\[\[(.+?)\]\]\{(.+?)\}/g, '<a href="../$1">$2</a>');
content.innerHTML = content.innerHTML.replace(/\[\[(.+?)\]\]/g, '<a href="../$1">$1</a>');
})();
</script>
vimwiki는 [[Link]]와 같은 형식의 링크를 생성하고, 마크다운은 [link](pathToLinkResource)와 같은 형식의 링크를 작성해줘야 한다
“./theme/Papermod/layouts/_default/single.html” (마크다운 렌더 탬플릿) Johngrib님의 스크립트와 거의 같다.
nvim config의 vimwiki관련 lua 스크립트 수정하기
use({
"vimwiki/vimwiki",
config = function()
vim.g.vimwiki_conceallevel = 0
vim.g.vimwiki_list = {
{
path = '/Users/joonkyu_kang/wiki/SmallzooDevWiki/content/_wiki', -- hugo 블로그 위치로 수정한다.
ext = '.md',
styntax = 'markdown',
index = 'home' -- 인덱스파일의 이름을 바꿔줘야 한다.
},
{
path = '/Users/joonkyu_kang/wiki/private_wiki', -- private wiki 설정
ext = '.md',
},
}
end
})
- 별거 아닌데, 여기서 은근히 시간을 많이 잡아먹었다, index.md를 사용해야 하는데, 휴고는 index.md를 uri path 설정중 문법으로 사용한다.
- Vimwiki가 생각보다 설정이 되는걸 빨리 알았다면 시간을 아꼈을 것 같다.
- 처음에는 심지어 Git commit pre-hook에 스크립트를 둬서 해결하려고 했었다.
vim.cmd [[
let g:md_modify_disabled = 0
function! NewTemplate ()
let l:wiki_directory = v:false
for wiki in g:vimwiki_list
if expand('%:p:h') =~ expand(wiki.path)
let l:wiki_directory= v:true
break
endif
endfor
if !l:wiki_directory
echom 'first debugging point >> called this return statement'
return
endif
if line("$") > 1
return
endif
let l:template = []
call add(l:template, '---')
call add(l:template, 'title: ')
call add(l:template, 'summary: ')
call add(l:template, 'date: ' . strftime('%Y-%m-%d %H:%M:%S +0900'))
call add(l:template, 'lastmod: ' . strftime('%Y-%m-%d %H:%M:%S +0900'))
call add(l:template, 'tags: ')
call add(l:template, 'categories: ')
call add(l:template, 'public: true')
call add(l:template, 'parent: ')
call add(l:template, 'description: ')
call add(l:template, 'showToc: true')
call add(l:template, '---')
call add(l:template, '')
call add(l:template, '# ')
call setline(1, l:template)
execute 'normal! G'
execute 'normal! $'
echom 'new wiki page has created'
endfunction
function! LastModified()
if g:md_modify_disabled
return
endif
if &modified
" echo('markdown updated time modified')
let save_cursor = getpos(".")
let n = min([10, line("$")])
keepjumps exe '1,' . n . 's#^\(.\{,10}updated\s*: \).*#\1' .
\ strftime('%Y-%m-%d %H:%M:%S +0900') . '#e'
call histdel('search', -1)
call setpos('.', save_cursor)
endif
endfun
augroup wimwikiauto
autocmd BufWritePre *wiki/*.md call LastModified()
autocmd BufRead,BufNewFile *wiki/*.md call NewTemplate()
augroup END
]]
- vimwiki를 위한 설정파일도 vimwiki-command.lua에 수정해뒀다.
- 사실 기존에 사용하던 스크립트에 frontmatter만 hugo에 맞게 수정했다.
06. 배포하기 - Netlify ✈️
-
배포는 역시 Github pages나 Netlify를 고민했다.
-
둘 다 일정 사용량까지는 무료이며 확인해봤을때 특정 사이트가 빠르거나 하지는 않은 것 같다.
-
그래도 Netlify가 배포관련 설정들이 훨씬 더 상세하고, 에러나 로그도 잘 관리되고 있다.
-
나중에 비용이 발생 할 수 있다는 것 때문에 조금 더 고민했는데, 그정도로 블로그를 많이 봐주신다면 기꺼이 낼 만 한 금액이기도 했다.
-
연동도 github pages와 비견될 정도로 간단하다.
-
일단 Netlify에 접속해서 github로 연동하고 물어보는걸 답하면 바로 배포까지 해준다.
-
다만 바로 잘되진 않았는데, 처음 사용해보는 만큼 약간의 트러블슈팅을 했다.
-
사실 당연히 체크 했어야 하는데, 요즘 서비스들은 너무 잘 래핑되어있고, 휴고정도라면 알아서 해줄줄 알고 생각을 안했던 것 같다.
- 빌드 스크립트를 작성해줘야 한다.
- 당연한 이야기이긴 하지만, 뭔가 휴고인거 알고 알아서 하려나 싶고 안했다가 빌드가 안됐다.
- 휴고 레포를 연동하고 Deploy 관련 설정을 하다보면 설정하는곳이 나온다. 거기에 “huho"라고 기입하면 된다.
- 배포 디렉토리를 설정해줘야 한다.
- 마찬가지의 맥락. pulic 디렉토리를 설정해줘야 한다.
- 마지막으로 빌드 버전을 설정해줘야 한다.
- 로컬에서 빌드가 잘되는데, 문법에러가 발생한다면 이부분을 체크해보자
이게 다 싫다면 아래와 같은 설정파일을 프로젝트 루트에 netlify.toml이라는 이름으로 두면 알아서 해준다.
[build]
publish = "public" # Or the directory where your Hugo site generates the static files
command = "hugo" # This is the default build command for Hugo
[build.environment]
HUGO_VERSION = "0.123.8"
07. 결과& Left Todo 🤔
Netlify와 Hugo로 설정을 해두니 Vimwiki private을 사용할때와 차이는 정말 커밋 푸시 한번으로 끝났다. 나도 내 생활에 큰 도구가 되어주기를 바라고 있다. 거의 대부분의 설정이 마무리가 잘 되었지만, 아직 남은 일들이 있다.
- 이미지관련 플러그인을 조금 더 알아보고, 가능하면 이미지 호스팅 서비스를 찾아내려고 한다. (로컬로 관리하기는 귀찮고, Netlify는 가격을 깐깐하게 매기는 느낌이다)
- 아직 검색 노출이 잘 되는지 확인해보지 않았는데, 아마도 헤더쪽 설정을 조금 더 해야할 것 같다.
- 태그와 카테고리 검색과 같은 설정들은 아직 테마의 기본 상태인데 찾아봐야할 것 같다.(다만 메인 위키의 길게 늘어진 링크들을 만들고 싶어서 바로 보지는 않을 것 같다.)
- 코드 테마를 바꾸고 싶다
- 이제까지 나만 보려고 써왔던 나의 마크다운 문서 작성능력에 회의가 왔기 때문에 마크다운 문서 공부..