シェア:
){kind=small}
マイケル・クランプはVonageのデベロッパーエクスペリエンスチームに所属し、コーダー、YouTuber、そして様々な.NETやクラウド/通信開発トピックについて頻繁に講演を行っています。彼は、開発者がそれぞれの利点を分かりやすく理解できるようにすることに情熱を注いでいます。
VitePressを使って静的サイトを作成し、美しいヘルプ文書を作成する
所要時間：2 分
静的サイト・ジェネレーターは、テキスト（通常はMarkdown）をベースにHTMLウェブサイトを作成する方法で、コミュニティをテーマにしたサポートがあるため、私はいつも静的サイト・ジェネレーターを愛用している。これによって、データベースとコンテンツを入力するためのフロントエンドUIを必要とするWordPressのようなコンテンツ管理システム（CMS）のインフラを管理するよりも、コンテンツを書くことに時間を費やすことができる。私が静的サイト・ジェネレーターを気に入っている3つの理由をまとめると、次のようになる：
パフォーマンス（ページはプリレンダリング）
テーマの設定
サーバーサイドで実行するコードを必要としない。
という人気のあるものに飛び込んでみよう、 バイトプレス.
vitepressmain.png
ビュープレスは VuePressのの弟分であり ヴァイトと Vue.js.ご存じない方のために説明すると、Viteは最新のウェブプロジェクトにより速く無駄のない開発体験を提供することを目的としたビルドツールで、VitePressのような静的サイトジェネレータと組み合わせることは理にかなっているかもしれません。Vue.jsは、ウェブユーザーインターフェースを構築するためのプログレッシブJavaScriptフレームワークです。VuePressの元々の問題の一つは、それがWebpackアプリであり、単純なdocのために開発サーバーをスピンアップするのに多くの時間がかかることでした。VitePressは、ほぼ瞬時にサーバーを起動し、提供されるページのみをコンパイルするオンデマンドコンパイルと、電光石火のHMRでこれらの問題を解決します。さあ、始めましょう！
まず、静的サイトを開発するフォルダを作成する。
で初期化する。 ヤーンまたは NPM.この例ではYarnを使う。Yarnがインストールされていない場合は ダウンロードページ.NPMを使用している場合、VitePressのドキュメントは以下にあります。 こちら.
一連の質問をされるので、ここで詳細を記入するか、私がしたように空欄のままにしておく。
yarn init
yarn init v1.22.19
question name (static-starter):
question version (1.0.0):
question description:
question entry point (index.js):
question repository url:
question author:
question license (MIT):
question private:
success Saved package.json
Done in 26.93s.注：これらの項目は、後でサイトを設定する際にいつでも記入することができます。
この時点で、あなたは単一の package.jsonファイルだけが存在することになります。VitePressとVueをプロジェクトの依存ファイルとして追加してください。
yarn add --dev vitepress vueこれから作成するドキュメントを保存する場所が必要なので、サンプル・ドキュメントを追加します。
mkdir docs
cd docs
touch index.mdの内容を編集して index.mdの内容を編集し、以下のテキストを追加する：
# Hello VitePress.
これで以下のファイルとフォルダができたはずだ：
docs
├── index.md
node_modules
package.json
yarn.lock次のセクションを scriptsセクションを package.json.
{
"name": "static-starter",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"devDependencies": {
"vitepress": "^1.0.0-alpha.21",
"vue": "^3.2.41"
},
"scripts": {
"docs:dev": "vitepress dev docs",
"docs:build": "vitepress build docs",
"docs:serve": "vitepress serve docs"
}
}そうすることで、状況に応じて異なるプロフィールを持つことができる。
以下のように yarn docs:devを実行することでサーバーを配備できる。
yarn docs:dev
yarn run v1.22.19
$ vitepress dev docs
vitepress v1.0.0-alpha.21
➜ Local: http://localhost:5173/
➜ Network: use --host to exposeVitePressは "ホットリローディング "をサポートしており、プロジェクト内のファイルを保存した後、変更を確認するためにサイトを再構築する必要はありません。
これでサーバーが稼動しているはずで、通常は以下の場所で稼動している： http://localhost:5173.
helloworld.gif
おめでとう！私たちのアプリは現在稼動しており、VitePressを使用したいくつかの特徴や機能性にすでにお気づきでしょう：
アニメーションを使ったレスポンシブ・サイト
モバイル・ファースト」の理念で構築する
ダーク＆ライトモード内蔵
サイトがロードされたら、エンドユーザーがナビゲートできる別のページを追加してみよう。まず another-page.mdという名前のファイルを docsフォルダ内にファイルを作成します。そのファイルの内容に次のテキストを追加します。 # Another Page.
これで docsフォルダはこのようになるはずだ。
docs
├── index.md
├── another-page.mdにナビゲートしても見つかりません。 another page.mdにナビゲートしても見つかりません。URLをたどって手動でアクセスしてください： http://localhost:5173/another-page.
注：ディレクトリ構造がURLパスに対応していることに注意。
では、どうすれば解決できるのか？
ウェブサイトの基本はできているが、他のページを探すナビゲーション機能がない。通常、サイドバーメニューはドキュメントサイトに使われます。サイドバーメニューを追加するには、まずいくつかのことを行う必要があります。
あなたのサイトにナビゲーションをカスタマイズして追加するには、まず、サイト内に .vitepressディレクトリの中に docsディレクトリを作りましょう。完成したら config.js.このフォルダには、VitePress固有の設定ファイルが配置されます。プロジェクトの構造は以下のようになるはずです：
docs
├── index.md
├── another-page.md
└── .vitepress
└── config.jsあなたの vitepress/config.jsを開き、以下のコードを追加する：
export default {
title: 'VitePress',
description: 'Vonage Loves Developers.'
}これは、検索エンジンがインデックスするサイトのデフォルトのタイトルと説明を提供します。
次に、トップレベルのナビゲーションバーに、以下の2つの項目を追加するように設定します。 ロードマップと、ユーザーが フィードバック.以下を vitepress/config.jsファイルの descriptionフィールドの後に
themeConfig: {
nav: [
{ text: 'Roadmap', link: '/roadmap' },
{ text: 'Feedback', link: '/feedback' }
]
toplevelnavigation.png
素晴らしいサイトが形になってきました！では サイドバー要素の下に nav要素の下にサイドバーを追加しましょう。
export default {
title: 'VitePress',
description: 'Vonage Loves Developers.',
themeConfig: {
nav: [
{ text: 'Roadmap', link: '/roadmap' },
{ text: 'Feedback', link: '/feedback' }
],
sidebar: [
{
text: 'Guide',
items: [
{ text: 'Introduction', link: '/introduction' },
{ text: 'Getting Started', link: '/getting-started' },
]
}
]
}
}今、私たちのサイトは形になり始めている！トップレベルとサイドバーナビゲーションが追加されました。また 次のページボタンも追加しました。 はじめにページに移動します。
sidelevelnavigation.png
先ほど作成したすべてのページを追加してみよう：
という名前の以下のファイルを作成する。 roadmap.md, feedback.md, introduction.mdそして getting-started.mdという名前のファイルを docsという名前のファイルを作成し、それらに同じ名前のヘッダーを付ける。
例えば # Roadmapは roadmap.mdと入力する。これをすべてのファイルに対して行う。
すべてが保存されたら、サイトに戻り、すべてのリンクが意図したとおりに機能することをテストする。
navigationadded.gif
GitHubやGitLabのようなGit管理サービスを通じて、読者がページの正確さに貢献できるように、各ページにリンクを自動的に作成することができます。これを有効にするには、設定に themeConfig.editLinkオプションを追加します：
export default {
themeConfig: {
editLink: {
pattern: 'https://github.com/vuejs/vitepress/edit/main/docs/:path',
text: 'Edit this page on GitHub'
}
}
}これで、レンダリングされた各ページにGitHub（またはGitLab）へのリンクが表示され、ユーザーがプルリクエストを実行できるようになります。
editpage.png
例えば、情報、ヒント、警告ボックスなど、読者に何かを呼びかけたいときには、カスタム・コンテナのサポートが組み込まれている。
::: info
This is an info box.
:::
::: tip
This is a tip.
:::
::: warning
This is a warning.
:::
::: danger
This is a dangerous warning.
:::
::: details
This is a details block.
:::という意味になる：
tipbox.png
コードブロック内のシンタックスハイライトは、さまざまな方法でサポートされています。コードブロック内の行をハイライトする方法の例をご覧ください：
export default {
data () {
return {
msg: 'Highlighted!'
}
}
}
syntaxhighlighting.png
静的サイトを開発し、リッチ・ナビゲーション・バーとともにページを追加したので、アプリをデプロイしてみよう。次のコマンドを実行すればデプロイできる。 yarn docs:build.
すべてが正常に機能していれば、次のように表示される：
yarn docs:build
yarn run v1.22.19
$ vitepress build docs
vitepress v1.0.0-alpha.21
✓ building client + server bundles...
⠋ rendering pages...(node:3164) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
✓ rendering pages...
build complete in 8.29s.
Done in 8.97s.レンダリングされたファイルは、デフォルトではプロジェクトページの dist.例えば、私のファイルはここにレンダリングされました： C:\Users\mbcru\source\static-starter\docs\.vitepress\dist
fileexplorer.png
静的サイトが稼動している今、次のような特定の通信機能を追加することができます。 Vonageのような Videoまたは メッセージングなどの機能があります！
ご質問やフィードバックがありましたら Vonage開発者向けSlackに参加するか ツイッターをお送りください。また次回もお楽しみに！