Vitepress로 마크다운 기반 TIL 저장소를 만들자.

1. 왜 만드는거죠?

최근 회사 합격 후 실습전 프리온보딩 과정을 시작했다.

 

이번 프리온보딩에선 쥐어진 백엔드 과제를 코프링 구현하는 것이 최종 목표인데 난 여태까지 프론트만 했었기에 바로 과제를 진행하기에는 기초적인 부분이 부족하다고 생각하여 우선 자바와 OOP를 빠르게 학습하고 있다.

 

그런데 문뜩 이런 생각이 들었다.

 

'혹시 내가 과제를 잘 안한다고 생각 하시면 어쩌지??'(물론 아니시겠지만(아니시겠죠...?(내심걱정ㅇㅅㅇ)))

 

물론 현재 자바, OOP 등을 학습하면서 커밋 후 깃에 열심히 푸시하고 있지만 사수님들이 그걸 확인 하실 리 없다고 생각했다.

 

그러니 내가 어떤 날 무엇을 학습했는지 요약하여 TIL을 작성하면 학습내용을 증명하기도 쉽고, 내 입장에선 배운 내용을 정리도 되고 잔디도 날먹으로 심을 수 있으니 이거완전 꿩 먹고 알 먹고라고 생각되서 바로 만들자 싶었다.

 

2. 왜 Vitepress?

일단 많이들 쓴다.

여러 기술스택들의 공식문서가 vitepress로 이루어져 있고 학교 선배도 블로그를 vitepress로 만든걸 발견해서 먼저 관심이 가기도 있다.

티스토리와 TIL 쓰는 공간을 분리하고 싶었다.

티스토리에는 좀 더 정보적이고 긴글만을 쓰고 싶었다. 수많은 TIL로 인해 최신글에서 노력하여 길게 쓴 글이 밀리지 않았으면 좋겠다고 생각했다.

접근성과 가독성이 좋다.

기본테마 이쁘고 정적사이트로 빌드된다. 사실 github에 깡으로 마크다운 올리는게 가장 쉬운데 깃허브는 가독성이 좋은 환경이 아니라고 생각됐다. (물론 다 짧은 글일꺼라서 가독성은 사실 크게 문제되지 않는다. 그냥 이쁜게 짱이지!)

마침 Vue를 대충 쓸줄 안다.

Vitepress가 vue 기반인데 마침 딱 나도 Vue를 대충은 쓸줄 알았다. 나중에 커스터마이징 할 때 용이 할 것이라고 생각했다.

 

 

3. Vitepress 프로젝트 만들기

https://vitepress.dev/guide/getting-started#setup-wizard

공식문서 잘되어있다.

내가 블로그에 커맨드들 복붙하는거보다 공식문서로 유도하는게 더 나은거같아서 커맨드는 쓰지 않겠다.

 

주의사항

Vitepress는 이미 있는 프로젝트 프로젝트에 문서를 추가하는걸 스탠다드로 가정하여 프로젝트 생성 플로우를 짜놨기 때문에 vite나 cra처럼 새로운 디렉토리를 파는게 아니라 현재 디렉토리에서 세팅을 한다! 따라서 디렉토리를 새로 하나 만든 뒤 그 위치에서 설치 마법사를 실행하자.

 

4. Vitepress 프로젝트 설정

1. 인덱스 편집

1번

Vitepress 생성 마크다운 파일만으로도 1번 이미지처럼 페이지를 구성 할 수 있는데 이는 vitepress의 강력한 테마 기능 덕분이다.

이에 대해 더 알고 싶다면 아래 문서를 참고해보자.

https://vitepress.dev/reference/default-theme-config#default-theme-config

나 같은 경우엔 저런 거창한 메인페이지가 필요하지 않아서 인덱스는 간단하게 바꿔줬다.

 

2. 사이드바 자동정렬, 내림차순 설정

const vitepressSidebarOptions = {
  documentRootPath: '/tils',
  sortMenusByName: true,
  sortMenusOrderByDescending: true,
}

export default defineConfig({
  title: '권기범의 TIL',
  description: '권기범의 데일리 TIL은 뭘까요~? 코 코 코프링~',
  vite: {},
  themeConfig: {
    nav: [],
    sidebar: generateSidebar(vitepressSidebarOptions),
    socialLinks: [
      { icon: 'x', link: 'https://x.com/_ggbDev_' },
      { icon: 'discord', link: 'https://discord.gg/FnvxpbQ8wf' },
    ],
  },
})

https://vitepress-sidebar.jooy2.com/

두번째로는 vitepress는 생성 된 마크다운 파일을 자동으로 사이드바에 추가하지 않기 때문에 vitepress-sidebar라는 플러그인을 통하여 이를 구연하였다. 또한 TIL 특성상 매일매일 MD 파일이 추가 되기 때문에 이름정렬기능과 내림차순 옵션을 설정 해줬다.

 

3. 폰트설정

// ./vitepress/theme/index.js

import DefaultTheme from 'vitepress/theme-without-fonts'
import './my-fonts.css'

export default DefaultTheme

// /.vitepress/theme/my-fonts.css
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css');
@import url('https://statics.goorm.io/fonts/GoormSans/v1.0.0/GoormSans.min.css');

:root {
  --vp-font-family-base: 'Pretendard';
  --vp-font-family-mono: 'Goorm Sans';
}

가독성 향상을 위해 폰트는 프리텐다드로 설정 해줬다.

5. 배포

vercel 빌드 세팅

먼저 로컬상에서 빌드 한 후 프리뷰로 문제 없는걸 확인했다.

배포는 아주 쉽다. React 배포 하듯 vercel에 임포트만 해주면 된다. 다만 본인이 세팅한 폴더 이름 대로 빌드 세팅을 해줘야만 한다.

이후 DNS에 도메인 연결만 하면 나만의 TIL 만들기 사이트는 끝났다!

 

https://til.gwon.us/

Welcome! 👋 | 권기범의 TIL

구경하러 가기 🔼

 

https://discord.com/invite/FnvxpbQ8wf

권기범의 사랑방 Discord 서버에 가입하세요!

글과 관련하여 질문 OR 대화하기 🔼