イントロダクション

この章について

この章では主に

サイトを編集する手順の説明
利用可能なマークダウン記法、mdx ファイルの拡張機能の説明

を行います。

タイトルに【md】や【mdx】とついているファイルは、マークダウン記法の tips などを解説しているので、ぜひ参考にしてみてください。

サイトの基本情報

このサイトは、Astro と呼ばれるフレームワークを使っています。マークダウン形式で資料を作成すると、それをいい感じに HTML に変換してくれる仕組みが備わっており、それを利用しています。

mise のインストール

mise 公式サイトのインストール手順：https://mise.jdx.dev/getting-started.html

以下は上記サイトから手順を抜粋したもの。

brew でインストールコマンドを実行する
環境変数を通す（Mac 利用者を想定しているので、基本的には.zshrcに追記するので OK です。）

ミスると面倒なことになるので、特に環境変数周りはコマンドコピペ実行をおすすめします。

HomeBrew を使ったインストール手順

brew install mise

環境変数を通す

echo 'eval "$(mise activate zsh)"' >> ~/.zshrc

最終的な確認

これが出ればインストール作業は終了です。コマンドが認識されない場合、環境変数を通してからターミナルを開き直すと良いかも。

mise --version
              _                                        __
   ____ ___  (_)_______        ___  ____        ____  / /___ _________
  / __ `__ \/ / ___/ _ \______/ _ \/ __ \______/ __ \/ / __ `/ ___/ _ \
 / / / / / / (__  )  __/_____/  __/ / / /_____/ /_/ / / /_/ / /__/  __/
/_/ /_/ /_/_/____/\___/      \___/_/ /_/     / .___/_/\__,_/\___/\___/
                                            /_/                 by @jdx
2025.4.4 macos-x64 (2025-04-15)

Git リポジトリの使い方

手元の PC で開発を始める前に、以下の 2 つを守ってください。

最新のmainブランチからリポジトリをクローンする
自分の開発用ブランチをmainブランチを元に作成する

リポジトリのクローン

git clone git@github.com:ohzeki-group/qi4u-materials.git

ローカル環境でサイトを動かす

mise を使って必要なものをインストールする

プロジェクト直下のmise.tomlファイルを信頼するコマンド

mise trust

依存関係の一括セットアップコマンド

mise run setup

サイトのプレビューをする

pnpm run dev

デフォルトでは http://localhost:4321 からサイトにアクセスできます。

🚀 プロジェクト構成

プロジェクトの構成はざっくりと次のようになっています。

.
├── public/
├── src/
│   ├── assets/
│   ├── content/
│   │   └── docs/
│   └── content.config.ts
├── astro.config.mjs
├── package.json
└── tsconfig.json

このプロジェクトでは、 .md or .mdx ファイルを src/content/docs/ ディレクトリに入れます。それぞれのファイルはファイル名を元にサイト上でルーティングされます。

画像は src/assets/ に格納することで、Markdown ファイルから相対リンクでアクセスできるようになります。

Streamlit 用のサンプルファイルは public/ ディレクトリに格納する必要があります。