👋

VitePress使ってみた

2025/01/15に公開

Daily Blogging25日目

危うく記事書くの忘れるところだった
いつもと違う1日を過ごしたことで、ルーティーンになっていた記事書くタイミングを見失ってた

今日はVitePressを触ってみたのでその共有

VitePressってなんぞや

公式サイト

VitePress is a Static Site Generator (SSG) designed for building fast, content-centric websites. In a nutshell, VitePress takes your source content written in Markdown, applies a theme to it, and generates static HTML pages that can be easily deployed anywhere.

ドキュメントとかまとめるサイトに使える

※「In a nutshell」を使ってるのが個人的にポイント高い

使ってみよう

ローカル環境で起動するまで2,3分もかからないでできた
カンタンっ!

公式サイトのQuick Start通りにやっていけば爆速でできる。

一通りコマンド打ったらとりあえずこんな感じにサイトを起動できる

ページ(ドキュメントは)「/docs」配下にmd形式で追加していけばOK
今回はとりあえずcompanyを追加してみた

.
├─ docs
│  ├─ .vitepress
│  │  └─ config.js
|  ├─ .company
|  |  └─ index.md // これ追加
│  ├─ api-examples.md
│  ├─ markdown-examples.md
│  └─ index.md
└─ package.json
// company/index.md
# Company

弊社はイケイケな企業ですよ

これがこうなる

簡単やっ

ナビゲーションとかサイドメニューのカスタマイズ

./vitepress/config.jsをいじればいい感じにカスタマイズできる

// vitepress/config.ts

import { defineConfig } from 'vitepress'

// https://vitepress.dev/reference/site-config
export default defineConfig({
  title: "My First Document Site",
  description: "A VitePress Site",
  themeConfig: {
    // https://vitepress.dev/reference/default-theme-config
    nav: [
      { text: 'Home', link: '/' },
      { text: 'Examples', link: '/markdown-examples' },
      { text: 'Company', link: '/company' }
    ],

    sidebar: [
      {
        text: 'Examples',
        items: [
          { text: 'Markdown Examples', link: '/markdown-examples' },
          { text: 'Runtime API Examples', link: '/api-examples' }
        ]
      },
      {
        text: 'Company',
        items: [
          { text: 'About', link: '/company' },
          { text: 'Contact', link: '/contact' }
        ]
      }
    ],

    socialLinks: [
      { icon: 'github', link: 'https://github.com/vuejs/vitepress' }
    ]
  }
})

これがこう

サイドメニュー

ナビゲーション

感想

ドキュメントの管理がやりやすそう

今自社業務においてドキュメントの管理が結構難しくて、
どうやったら見やすい、検索しやすい、メンテナンスしやすい管理ができるかなぁって思ってたけど
これなら結構いい感じに管理できそうって思った。

Discussion