まずは公式サイトにアクセスします。https://vitepress.dev/
まず 2 つのレンダリングを見てください。
ぜひこちらの公式サイトをご利用ください 以前、翻訳版を読んだのですが、半分くらい回ってやめてしまったようで、時間が経っても解けません。まだ正式なものではないようです。
現在、Tencent Cloud の軽量アプリケーション サーバーを使用していますが、その効果は依然として非常に高く、コスト効率が高く感じられます。
次のステップは、構成をいじることです。
ノードをインストールする
ここにはさらにチュートリアルがあるので、詳細は説明しません
vitepress の依存関係をインストールする
mkdir viteblog // 新建博客目录
npm init // 新建node环境
npm install -D vitepress // 安装vitepress
npx vitepress init // 安装向导
このチュートリアルで使用される構成は次のとおりです。
デフォルトのドキュメントとコンパイルされた静的ファイル出力は docs の下に保存されます。
実行して効果を確認すると、とても良い感じです。
npm run docs:dev
一般に、これを使用したい場合は、統計を追加する必要があります。
Google 統計を例として、.docs/config.ts に次の設定を追加します。
export default defineConfig({
title: "xyccstudio",
description: "xyccstudio",
head: [
[
'script',
{
async: '',
src: 'https://www.googletagmanager.com/gtag/js?id=G-xxxx'
}
],
],
themeConfig: {
// ...
}
})
その後、デバッガーで次のことが確認できます。
一般に、画像などの静的ファイルを追加する必要があります。
.docs ファイルの下に新しいパブリック フォルダーを作成し、それをマークダウンで直接使用します。たとえば、ファイル logo.png を配置した場合、使用するパスは /logo.png です。
デプロイメント中はルート ディレクトリではない可能性があるため、デプロイメント パスを少し変更する必要があります。
たとえば、https://www.xyccstudio.cn/books/パスの下にデプロイする場合は、config.ts の下に追加します。
export default defineConfig({
// ...
base: 'books',
// ...
})
その後、直接ビルドしてデプロイが完了します。コンパイルされたデフォルト ファイルは./docs/.vitepress/distです。
以下は現在使用されている例です。興味があればご覧ください。