VitePress๋ก ๋๋ฅผ ์๊ฐํ๊ธฐ
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.ymlname: 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 ํธํ ๋ฐฉ์์ผ๋ก ๋ณํํด์ผ ํ๋ ์์ ๋์ด ์๋นํฉ๋๋ค. ์ด๋ฌํ ์ด์ ๋ก ์๊ฐ ํ์ด์ง์ ๋ธ๋ก๊ทธ๋ฅผ ๋ณ๋๋ก ๊ด๋ฆฌํด์ผ ํ๋ ์ ์ด ์์ฝ์ง๋ง, ๊ฐ ๋๊ตฌ์ ์ฅ์ ์ ์ต๋ํ ํ์ฉํ๋ ๋ฐฉํฅ์ผ๋ก ๊ด๋ฆฌํ๊ณ ์ ํฉ๋๋ค.