VitePressによるWebサイト制作 ​

本サイトは、VitePressという静的サイトジェネレーターで制作しています。

自分のPCで、記事やサイト内容を変更したら、一度ビルドして、生成されたファイル一式を、コマンドでサーバーに毎回アップロードして公開するというスタイルなので、ソフトウェアエンジニア向けのツールになります。

マークダウン形式の記事をどんどん追加していくだけのシンプルなデザインのドキュメンテーションのサイトの作りにしたいと考えていました。

ソフトウェアエンジニアにとっては、ソースコードも書けるマークダウン形式の記事が書けることが重要となるでしょう。

最近の海外のWeb API/SDKのDocサイトでが、このVitePressで作られていることを多々見かけることもあり、採用することにしました。

VitePressについて ​

VitePress - Vite & Vue Powered Static Site Generator https://vitepress.dev

  • 2024年3月に、Version 1が公開された新しいサイト生成ツール
  • ドキュメントサイト、ブログ、ポートフォリオサイトの構築に使える
  • デフォルトテンプレートを使用すると、本サイトのようなヘッダー、サイドバー、アウトライン、前後の記事へボタン、各ページの階層などの一式が用意される

使い勝手が良い ​

フォルダ階層を作り、そこにマークダウン記事を配置するだけで、どんどんWebサイトのページを充実させていけます。

シンプルな構成を保ち続けることができるので、今のところ、使い勝手が良いと感じています。

SEO対策のための、title, description, meta, opgのグローバル設定、記事個別設定や、PCとスマホへのレスポンシブ対応も付いています。

マークダウンの中に、直接VueやJavascriptコードを書いて埋め込んで実行することも可能です。問い合わせフォームとそのデータのPOST送信などにも使えます。

マークダウン記事の中にVueコードを埋め込む例 ​

---
layout: doc
---

ここにマークダウンを書く

<script setup> // スクリプトが書ける
import { ref } from 'vue'

const formData = ref({
  name: '',
  email: '',
  message: ''
});

// フォームデータの送信
const submit = async () => {
  await fetch('[送信先URL]', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(formData.value)
  });
};
</script>

ここにもマークダウンを書ける

<form @submit.prevent="submit">
  <div>
    <label for="name">お名前:</label>
    <input type="text" id="name" v-model="formData.name" required>
  </div>
   <div>
    <label for="email">メールアドレス:</label>
    <input type="email" id="email" v-model="formData.email" required>
  </div>
   <div>
    <label for="message">メッセージ:</label>
    <textarea id="message" v-model="formData.message" required></textarea>
  </div>
   <div>
    <button type="submit">送信</button>
  </div>
</form>

ここにもマークダウンを書ける

<style module> // スタイル, CSSも書ける
.button {
  color: red;
  font-weight: bold;
}
</style>

Copyright © 2024-present つじユウキ