VitePress๋Š” Vite์™€ Vue๊ฐ€ ํ†ตํ•ฉ๋œ ๋งˆํฌ๋‹ค์šด ๊ธฐ๋ฐ˜์˜ ์ •์  ์‚ฌ์ดํŠธ ์ƒ์„ฑ ๋„๊ตฌ๋กœ, ๋ฌธ์„œ ์ž‘์„ฑ์„ ์œ„ํ•œ ํƒ์›”ํ•œ ๊ฐœ๋ฐœ์ž ๊ฒฝํ—˜(DX)์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. VitePress๋Š” ๊ฐœ๋ฐœ์ž ์†Œ๊ฐœ ํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“ค๊ธฐ์— ์•„์ฃผ ์ ํ•ฉํ•œ ๋„๊ตฌ์ž…๋‹ˆ๋‹ค. ๋งˆํฌ๋‹ค์šด์œผ๋กœ ์ฝ˜ํ…์ธ ๋ฅผ ์ž‘์„ฑํ•˜๋ฉด์„œ๋„ ํ•„์š”ํ•œ ๊ฒฝ์šฐ Vue ์ปดํฌ๋„ŒํŠธ๋ฅผ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ์–ด ์ž์œ ๋กญ๊ฒŒ ๋‚˜๋ฅผ ํ‘œํ˜„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. GitHub Pages์™€ ์—ฐ๋™ํ•˜๋ฉด ๋ฌด๋ฃŒ๋กœ ํ˜ธ์ŠคํŒ…๋„ ๊ฐ€๋Šฅํ•˜๋‹ˆ, ๊ฐœ๋ฐœ ๊ฒฝ๋ ฅ์ด๋‚˜ ํ”„๋กœ์ ํŠธ ํฌํŠธํด๋ฆฌ์˜ค๋ฅผ ์ •๋ฆฌํ•˜๋Š” ๋ฐ ํšจ๊ณผ์ ์ธ ๋ฐฉ๋ฒ•์ด ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ €๋Š” VitePress๊ฐ€ ๋ฒ ํƒ€ ๋ฒ„์ „์ด์—ˆ์„ ๋•Œ ์†Œ๊ฐœ ํŽ˜์ด์ง€๋ฅผ ์ฒ˜์Œ ๊ตฌ์ถ•ํ–ˆ์œผ๋ฉฐ, ์ตœ๊ทผ ๊ณต์‹ ๋ฆด๋ฆฌ์ฆˆ ๋ฒ„์ „์œผ๋กœ ์—…๊ทธ๋ ˆ์ด๋“œํ•˜๋ฉด์„œ ์ฝ˜ํ…์ธ ๋ฅผ ๊ฐœ์„ ํ•˜๊ณ  ์˜์–ด ๋ฒˆ์—ญ์„ ์ถ”๊ฐ€ํ•˜์—ฌ ๋ฐฐํฌํ–ˆ์Šต๋‹ˆ๋‹ค.

VitePress์— ๋Œ€ํ•œ ๋Œ€์ฒด์ œ

๊ฐœ๋ฐœ์ž ์†Œ๊ฐœ ํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“ค ๋•Œ VitePress ์™ธ์—๋„ ๋‹ค์–‘ํ•œ ์„ ํƒ์ง€๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ฆฌ์•กํŠธ ๊ธฐ๋ฐ˜์˜ Docusaurus, Nuxt ๊ธฐ๋ฐ˜์˜ Nuxt Content, Next.js ๊ธฐ๋ฐ˜์˜ Nextra ๋“ฑ์ด ์žˆ์œผ๋ฉฐ, ์ •์  ์‚ฌ์ดํŠธ ์ƒ์„ฑ๊ธฐ๋กœ ์œ ๋ช…ํ•œ Hexo, Hugo, Gatsby๋„ ์ข‹์€ ๋Œ€์•ˆ์ž…๋‹ˆ๋‹ค. ์ด ์ค‘์—์„œ ์ €๋Š” Vue ๊ธฐ๋ฐ˜์ด๋ฉด์„œ ๋น ๋ฅธ ๊ฐœ๋ฐœ ๊ฒฝํ—˜์„ ์ œ๊ณตํ•˜๋Š” VitePress๋ฅผ ์„ ํƒํ–ˆ์Šต๋‹ˆ๋‹ค. ์ด์ œ VitePress๋กœ ๋‚˜๋ฅผ ์†Œ๊ฐœํ•˜๋Š” ํŽ˜์ด์ง€๋ฅผ ์–ด๋–ป๊ฒŒ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋Š”์ง€ ์‚ดํŽด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

๋‚˜๋ฅผ ์†Œ๊ฐœํ•˜๋Š” ํŽ˜์ด์ง€ ๋งŒ๋“ค๊ธฐ

VitePress๋ฅผ ์‹œ์ž‘ํ•˜๋ฉด ํ”„๋กœ์ ํŠธ ํด๋” ๊ตฌ์กฐ์— ๋”ฐ๋ผ ๊ตฌ์„ฑ ํŒŒ์ผ์ด ํฌํ•จ๋œ .vitepress ํด๋”์™€ ์ธ๋ฑ์Šค ํŽ˜์ด์ง€(index.md)๊ฐ€ ์ƒ์„ฑ๋ฉ๋‹ˆ๋‹ค. ์ €๋Š” ์†Œ๊ฐœ ํŽ˜์ด์ง€์— Home Page ๋ ˆ์ด์•„์›ƒ์„ Frontmatter๋กœ ์ ์šฉํ•˜๊ณ , Vue ์Šคํฌ๋ฆฝํŠธ๋ฅผ ํ™œ์šฉํ•ด ๊ฐœ๋ฐœ์ž ๊ฒฝ๋ ฅ ์—ฐ์ฐจ๋ฅผ ๋™์ ์œผ๋กœ ๊ณ„์‚ฐํ•˜์—ฌ ํ‘œ์‹œํ–ˆ์Šต๋‹ˆ๋‹ค. ์ด์ œ VitePress์˜ ๋งˆํฌ๋‹ค์šด ํ™•์žฅ ๊ธฐ๋Šฅ์„ ํ™œ์šฉํ•˜์—ฌ ๋‚˜๋งŒ์˜ ๊ฐœ์„ฑ์ด ๋‹ด๊ธด ์†Œ๊ฐœ ์ฝ˜ํ…์ธ ๋ฅผ ์ถ”๊ฐ€ํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.

index.md
--- title: Introduction layout: home --- <script setup> import dayjs from 'dayjs' const date = '2017-04-01' const diffYears = dayjs().diff(date, 'year') const diffMonths = dayjs().diff(date, 'month') % 12 </script> <span :title="`${diffYears}๋…„ ${diffMonths+1}๊ฐœ์›”`">{{ diffYears + 1 }}๋…„ ์ฐจ</span>

๋ฐฉ๋ช…๋ก์„ ์œ„ํ•œ ๋Œ“๊ธ€ ์ถ”๊ฐ€ํ•˜๊ธฐ

์†Œ๊ฐœ ํŽ˜์ด์ง€์— ๋Œ“๊ธ€ ๊ธฐ๋Šฅ์ด ๋ฐ˜๋“œ์‹œ ํ•„์š”ํ•œ ๊ฒƒ์€ ์•„๋‹ˆ์ง€๋งŒ, ๋ฐฉ๋ช…๋ก ํ˜•ํƒœ๋กœ ์†Œํ†ตํ•  ์ˆ˜ ์žˆ๋Š” ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด ์™ธ๋ถ€ ๋Œ“๊ธ€ ์‹œ์Šคํ…œ์„ ์—ฐ๋™ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. VitePress ์ž์ฒด์—๋Š” ๋Œ“๊ธ€ ๊ธฐ๋Šฅ์ด ๋‚ด์žฅ๋˜์–ด ์žˆ์ง€ ์•Š์ง€๋งŒ, Github Discussions ๊ธฐ๋ฐ˜์˜ ๋Œ“๊ธ€ ์‹œ์Šคํ…œ์ธ giscus์™€ ๊ฐ™์€ ์„œ๋น„์Šค๋ฅผ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. VitePress๋Š” ๋งˆํฌ๋‹ค์šด ๋ฌธ์„œ์— Vue ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ์–ด์„œ ์™ธ๋ถ€ ๋Œ“๊ธ€ ์‹œ์Šคํ…œ์„ ๋น„๊ต์  ์‰ฝ๊ฒŒ ํ†ตํ•ฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ €๋Š” Comment.vue ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งŒ๋“ค์–ด ์ ์šฉํ–ˆ์œผ๋ฉฐ, VitePress๊ฐ€ Vite๋ฅผ ๋นŒ๋“œ ๋„๊ตฌ๋กœ ์‚ฌ์šฉํ•˜๊ธฐ ๋•Œ๋ฌธ์— .env ํŒŒ์ผ์—์„œ giscus ๊ด€๋ จ ์„ค์ •๊ฐ’์„ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

Comment.vue
<script setup lang="ts"> import { useData } from 'vitepress' const { frontmatter, title, lang } = useData() const langCd = lang.value.split('-')[0]; const repo = import.meta.env.VITE_GISCUS_REPO; const repoId = import.meta.env.VITE_GISCUS_REPO_ID; const category = import.meta.env.VITE_GISCUS_CATEGORY; const categoryId = import.meta.env.VITE_GISCUS_CATEGORY_ID; const mapping = import.meta.env.VITE_GISCUS_MAPPING; const theme = import.meta.env.VITE_GISCUS_THEME; </script> <template> <component v-if="frontmatter.comment !== false" :key="title" :is="'script'" src="https://giscus.app/client.js" :data-repo="repo" :data-repo-id="repoId" :data-category="category" :data-category-id="categoryId" :data-mapping="mapping" data-strict="0" data-reactions-enabled="1" data-emit-metadata="0" data-input-position="bottom" :data-lang="langCd" :data-theme="theme" data-loading="lazy" crossorigin="anonymous" async /> </template>

Github Page๋กœ ๋ฐฐํฌํ•˜๊ธฐ

VitePress ๊ณต์‹ ๋ฌธ์„œ์—์„œ๋Š” Github Pages์— ๋Œ€ํ•œ ๋ฐฐํฌ ๊ฐ€์ด๋“œ๋ฅผ ์ œ๊ณตํ•˜๊ณ  ์žˆ์–ด ์‰ฝ๊ฒŒ ๋‚˜๋งŒ์˜ ์†Œ๊ฐœ ํŽ˜์ด์ง€๋ฅผ ๋ฐฐํฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ณต์‹ ๊ฐ€์ด๋“œ์—์„œ ์ œ์•ˆํ•˜๋Š” ๊ธฐ๋ณธ ์›Œํฌํ”Œ๋กœ์šฐ๋ฅผ ์ฐธ๊ณ ํ•˜๋˜, ์ €๋Š” ์ œ ํ”„๋กœ์ ํŠธ ๊ตฌ์กฐ์™€ ์š”๊ตฌ์‚ฌํ•ญ์— ๋งž๊ฒŒ ์›Œํฌํ”Œ๋กœ์šฐ๋ฅผ ์ž‘์„ฑํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ณต์‹ ๋ฌธ์„œ์˜ ์›Œํฌํ”Œ๋กœ์šฐ๋Š” npm์„ ์‚ฌ์šฉํ•˜์ง€๋งŒ, ์ €๋Š” yarn์„ ํŒจํ‚ค์ง€ ๋งค๋‹ˆ์ €๋กœ ์„ ํƒํ–ˆ๊ณ , ํŠน์ • ํด๋”๋งŒ ๋นŒ๋“œํ•˜๋„๋ก yarn about:build ์ปค์Šคํ…€ ์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ •์˜ํ–ˆ์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ peaceiris/actions-gh-pages ์•ก์…˜์„ ์‚ฌ์šฉํ•˜์—ฌ ๋ฐฐํฌ ๊ณผ์ •์„ ๊ฐ„์†Œํ™”ํ–ˆ์Šต๋‹ˆ๋‹ค. ์ด๋ ‡๊ฒŒ ์ž‘์„ฑํ•œ ์›Œํฌํ”Œ๋กœ์šฐ๋Š” ๋ฉ”์ธ ๋ธŒ๋žœ์น˜์— ์ƒˆ๋กœ์šด ์ปค๋ฐ‹์ด ํ‘ธ์‹œ๋  ๋•Œ๋งˆ๋‹ค ์ž๋™์œผ๋กœ ๋ฐฐํฌ ํŒŒ์ดํ”„๋ผ์ธ์„ ์‹คํ–‰ํ•˜์—ฌ ์ตœ์‹  ์ƒํƒœ์˜ ์†Œ๊ฐœ ํŽ˜์ด์ง€๋ฅผ ์œ ์ง€ํ•ฉ๋‹ˆ๋‹ค. ์ œ๊ฐ€ ์ž‘์„ฑํ•œ ์›Œํฌํ”Œ๋กœ์šฐ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

.github/workflows/deploy.yml
name: Deploy on: push: branches: - main workflow_dispatch: jobs: deploy: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 with: fetch-depth: 0 - uses: actions/setup-node@v3 with: node-version: 18 cache: yarn - run: yarn install --frozen-lockfile - name: Build run: yarn about:build - name: Deploy uses: peaceiris/actions-gh-pages@v3 with: github_token: ${{ secrets.GITHUB_TOKEN }} publish_dir: about/.vitepress/dist

๋์œผ๋กœ, ํ˜„์žฌ ๋ณด๊ณ  ๊ณ„์‹œ๋Š” ๊ธฐ์ˆ  ๋ธ”๋กœ๊ทธ๋Š” VitePress๊ฐ€ ์•„๋‹Œ Hexo ๊ธฐ๋ฐ˜์œผ๋กœ ์ž‘์„ฑ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. VitePress๋Š” Hexo์— ๋น„ํ•ด Vue ์ปดํฌ๋„ŒํŠธ ํ†ตํ•ฉ๊ณผ ๋นŒ๋“œ ์†๋„ ๋ฉด์—์„œ ํ›จ์”ฌ ๊ฐ„๊ฒฐํ•˜๊ณ  ํšจ์œจ์ ์ด์ง€๋งŒ, ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ ๊ณผ์ •์—์„œ ๋ช‡ ๊ฐ€์ง€ ์–ด๋ ค์›€์ด ์žˆ์Šต๋‹ˆ๋‹ค. ํŠนํžˆ Hexo์˜ ๋ณต์žกํ•œ ํ”Œ๋Ÿฌ๊ทธ์ธ ์˜์กด์„ฑ, ๋งˆํฌ๋‹ค์šด ๋ Œ๋”๋ง ๋ฐฉ์‹์˜ ์ฐจ์ด, ๊ทธ๋ฆฌ๊ณ  ํ…Œ๋งˆ ์‹œ์Šคํ…œ์˜ ์™„์ „ํ•œ ์žฌ๊ตฌ์„ฑ์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. ๋˜ํ•œ ๊ธฐ์กด์— ์ž‘์„ฑ๋œ ์ˆ˜๋งŽ์€ ํฌ์ŠคํŠธ์˜ ํ”„๋ก ํŠธ๋งคํ„ฐ ํ˜•์‹๊ณผ ๋งˆํฌ๋‹ค์šด ๋‚ด ํŠน์ˆ˜ ๋ฌธ๋ฒ•๋“ค์„ ๋ชจ๋‘ VitePress ํ˜ธํ™˜ ๋ฐฉ์‹์œผ๋กœ ๋ณ€ํ™˜ํ•ด์•ผ ํ•˜๋Š” ์ž‘์—…๋Ÿ‰์ด ์ƒ๋‹นํ•ฉ๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ์ด์œ ๋กœ ์†Œ๊ฐœ ํŽ˜์ด์ง€์™€ ๋ธ”๋กœ๊ทธ๋ฅผ ๋ณ„๋„๋กœ ๊ด€๋ฆฌํ•ด์•ผ ํ•˜๋Š” ์ ์ด ์•„์‰ฝ์ง€๋งŒ, ๊ฐ ๋„๊ตฌ์˜ ์žฅ์ ์„ ์ตœ๋Œ€ํ•œ ํ™œ์šฉํ•˜๋Š” ๋ฐฉํ–ฅ์œผ๋กœ ๊ด€๋ฆฌํ•˜๊ณ ์ž ํ•ฉ๋‹ˆ๋‹ค.