はじめに
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 | 書き出したファイルを置くフォルダ |
lang | html 要素の lang 属性に入れる言語 |
lang を正しく指定しておくと、スクリーンリーダーが正しい言語で読み上げます。
使い方
pages フォルダに Markdown のファイルを置くと、ファイル名がそのまま URL になります。たとえば pages/about.md は /about で開けます。
書きながら確認するときは、開発用サーバーを起動します。ファイルを保存するたびに、ブラウザの表示が自動で更新されます。
npm run dev
書き出す
公開用のファイルを作るには build を実行します。outDir で指定したフォルダに HTML と CSS が書き出されます。
npm run build
書き出したフォルダは、そのまま静的ファイルのホスティングサービスに置けます。サーバー側でプログラムを動かす必要はありません。