ページの編集・追加について
基本的にはGitHubのPull Requestで書いたマークダウンを投げるだけですが、実際の環境でどのように表示されるのかを確認したい場合のために執筆環境の構築方法を記載します。
環境構築手順(Windows)
matomeをclone
NVM for Windowsをインストール(既にnvm環境がある場合はそれでも可)
コマンドプロンプトを開き
nvm list available
コマンドを実行しバージョンを確認nvm install [バージョン番号]
でNode.jsをインストールし、nvm use [バージョン番号]
でインストールしたものを有効化(インストールするバージョンは基本的にLTSの最新で大丈夫かと思われます。)cd [ディレクトリ]
コマンドで手順1でcloneしたディレクトリに移動matome ← このフォルダ ├ .github ├ docs ├ .gitattributes ├ .gitignore ├ LICENSE ├ package-lock.json ├ package.json
npm ci
コマンドを実行(前提パッケージがインストールされます)npm run docs:dev
コマンドを実行(ページのプレビューが開始されます)ブラウザで
http://localhost:5173/matome/
を開きプレビュー
既存のページの編集
ページの編集についてはdocs/ja/...
フォルダのマークダウンを編集し、該当ページをブラウザで確認するだけです。
新規ページの作成
ページを作成する場合はマークダウンの作成に加え、サイトマップにリンクを追加する必要があります。
docs/ja/...
フォルダに移動し中にマークダウンを作成同一階層の
index.md
に作ったページへのリンクを追加docs/.vitepress/config/ja.ts
に作ったページへのリンクを追加ブラウザで確認
画像や動画の追加について
画像や動画はdocs/public/images/ja/...
にマークダウンファイルと同じ名前のフォルダを作成しその中に配置してください。例えばdocs/public/images/ja/common/xxx/yyy.png
はマークダウンに
と書くことで参照できます。動画の場合、<video controls="controls" src="/images/ja/common/xxx/yyy.webm" />
のように参照できます。
最終確認
Pull Requestを投げる前に実際にページをビルドして確認します。
コマンドプロンプトで
ctrl + C
でプレビューを停止npm run docs:build
コマンドを実行(ビルドが行われ、問題があればどこにエラーがあるかが表示されます)npm run docs:preview
コマンドを実行(ビルドしたもののプレビューが開始されます)ブラウザで
http://localhost:4173/matome/
を開き最終確認問題なければGitHubでPull Requestを投げる