Skip to content

ページの編集・追加について

基本的にはGitHubのPull Requestで書いたマークダウンを投げるだけですが、実際の環境でどのように表示されるのかを確認したい場合のために執筆環境の構築方法を記載します。

環境構築手順(Windows)

  1. matomeをclone

  2. NVM for Windowsをインストール(既にnvm環境がある場合はそれでも可)

  3. コマンドプロンプトを開きnvm list availableコマンドを実行しバージョンを確認

  4. nvm install [バージョン番号]でNode.jsをインストールし、nvm use [バージョン番号]でインストールしたものを有効化(インストールするバージョンは基本的にLTSの最新で大丈夫かと思われます。)

  5. cd [ディレクトリ]コマンドで手順1でcloneしたディレクトリに移動

    matome ← このフォルダ
     ├ .github
     ├ docs
     ├ .gitattributes
     ├ .gitignore
     ├ LICENSE
     ├ package-lock.json
     ├ package.json
  6. npm ciコマンドを実行(前提パッケージがインストールされます)

  7. npm run docs:devコマンドを実行(ページのプレビューが開始されます)

  8. ブラウザでhttp://localhost:5173/matome/を開きプレビュー

既存のページの編集

ページの編集についてはdocs/ja/...フォルダのマークダウンを編集し、該当ページをブラウザで確認するだけです。

新規ページの作成

ページを作成する場合はマークダウンの作成に加え、サイトマップにリンクを追加する必要があります。

  1. docs/ja/...フォルダに移動し中にマークダウンを作成

  2. 同一階層のindex.mdに作ったページへのリンクを追加

  3. docs/.vitepress/config/ja.tsに作ったページへのリンクを追加

  4. ブラウザで確認

画像や動画の追加について

画像や動画はdocs/public/images/ja/...にマークダウンファイルと同じ名前のフォルダを作成しその中に配置してください。例えばdocs/public/images/ja/common/xxx/yyy.pngはマークダウンに![画像](/images/ja/common/xxx/yyy.png "画像")と書くことで参照できます。動画の場合、<video controls="controls" src="/images/ja/common/xxx/yyy.webm" />のように参照できます。

最終確認

Pull Requestを投げる前に実際にページをビルドして確認します。

  1. コマンドプロンプトでctrl + Cでプレビューを停止

  2. npm run docs:buildコマンドを実行(ビルドが行われ、問題があればどこにエラーがあるかが表示されます)

  3. npm run docs:previewコマンドを実行(ビルドしたもののプレビューが開始されます)

  4. ブラウザでhttp://localhost:4173/matome/を開き最終確認

  5. 問題なければGitHubでPull Requestを投げる

Released under the CC BY 4.0.