Tsumugi ドキュメント デモ一覧へ

はじめに

Tsumugi は、Markdown のファイルから静的なウェブサイトを作る架空のツールです。このページでは、インストールからサイトを書き出すまでの流れを説明します。

インストール

Tsumugi は Node.js の上で動きます。先に Node.js の 20 以降を入れておいてください。

プロジェクトを作るフォルダで、次のコマンドを実行します。

npm create tsumugi@latest my-site
cd my-site
npm install

my-site フォルダの中に、設定ファイル tsumugi.config.js と、記事を置く pages フォルダが作られます。

設定

サイト全体の設定は tsumugi.config.js に書きます。最低限必要なのは、サイトの名前と書き出し先です。

export default {
  title: "わたしのノート",
  outDir: "dist",
  lang: "ja",
};

よく使う項目

項目意味
titleサイトの名前。各ページの title にも付く
outDir書き出したファイルを置くフォルダ
langhtml 要素の lang 属性に入れる言語

lang を正しく指定しておくと、スクリーンリーダーが正しい言語で読み上げます。

使い方

pages フォルダに Markdown のファイルを置くと、ファイル名がそのまま URL になります。たとえば pages/about.md は /about で開けます。

書きながら確認するときは、開発用サーバーを起動します。ファイルを保存するたびに、ブラウザの表示が自動で更新されます。

npm run dev

書き出す

公開用のファイルを作るには build を実行します。outDir で指定したフォルダに HTML と CSS が書き出されます。

npm run build

書き出したフォルダは、そのまま静的ファイルのホスティングサービスに置けます。サーバー側でプログラムを動かす必要はありません。