diff --git a/src/components/Toc.astro b/src/components/Toc.astro
index 40c3279..d40e81c 100644
--- a/src/components/Toc.astro
+++ b/src/components/Toc.astro
@@ -1,6 +1,8 @@
 ---
-import { sections } from "../constants/sections.ts";
+import { getSections } from "../constants/sections.ts";
 const currentPath = Astro.url.pathname;
+
+const sections = await getSections();
 ---
 
 <ul class="menu bg-base-200 rounded-box p-2 w-56 h-full overflow-y-auto">
diff --git a/src/constants/sections.ts b/src/constants/sections.ts
index 0bf061e..d6e0c0b 100644
--- a/src/constants/sections.ts
+++ b/src/constants/sections.ts
@@ -1,16 +1,16 @@
 import type { MDXInstance } from "astro";
 
 export type PageItem = {
-  url: string;
-  file: string;
-  title: string;
+	url: string;
+	file: string;
+	title: string;
 };
 
 export type Section = {
-  title: string;
-  key: string;
-  items: PageItem[];
-  description?: string;
+	title: string;
+	key: string;
+	items: PageItem[];
+	description?: string;
 };
 
 // "html",
@@ -24,89 +24,96 @@
 // "final-work",
 
 const sections: Section[] = [
-  {
-    key: "html",
-    title: "HTML",
-    items: [],
-    description: "",
-  },
-  {
-    key: "js",
-    title: "JavaScript",
-    items: [],
-    description: "自分のページに振る舞い方を教えよう。",
-  },
-  {
-    key: "cli",
-    title: "コマンドライン",
-    items: [],
-    description: "文字だけの世界で、パソコンと会話しよう。",
-  },
-  {
-    key: "php",
-    title: "PHP",
-    items: [],
-    description: "",
-  },
-  {
-    key: "sql",
-    title: "SQL",
-    items: [],
-    description: "",
-  },
-  {
-    key: "git",
-    title: "Git",
-    items: [],
-    description: "",
-  },
-  {
-    key: "tips",
-    title: "Tips",
-    items: [],
-  },
-  {
-    key: "reference",
-    title: "参考資料",
-    items: [],
-  },
-  {
-    key: "final-work",
-    title: "最終課題",
-    items: [],
-  },
+	{
+		key: "html",
+		title: "HTML",
+		items: [],
+		description: "",
+	},
+	{
+		key: "js",
+		title: "JavaScript",
+		items: [],
+		description: "自分のページに振る舞い方を教えよう。",
+	},
+	{
+		key: "cli",
+		title: "コマンドライン",
+		items: [],
+		description: "文字だけの世界で、パソコンと会話しよう。",
+	},
+	{
+		key: "php",
+		title: "PHP",
+		items: [],
+		description: "",
+	},
+	{
+		key: "sql",
+		title: "SQL",
+		items: [],
+		description: "",
+	},
+	{
+		key: "git",
+		title: "Git",
+		items: [],
+		description: "",
+	},
+	{
+		key: "tips",
+		title: "Tips",
+		items: [],
+	},
+	{
+		key: "reference",
+		title: "参考資料",
+		items: [],
+	},
+	{
+		key: "final-work",
+		title: "最終課題",
+		items: [],
+	},
 ];
 
 type Article = {
-  title?: string;
+	title?: string;
 };
 
 async function getSectionPages(sectionPath: string): Promise<PageItem[]> {
-  const allPages = import.meta.glob<MDXInstance<Article>>(`../pages/**/*.mdx`);
-  const filteredPages = Object.entries(allPages).filter(([path, _]) =>
-    path.includes(`/pages/${sectionPath}/`),
-  );
+	const allPages = import.meta.glob<MDXInstance<Article>>(`../pages/**/*.mdx`);
+	const filteredPages = Object.entries(allPages).filter(([path, _]) =>
+		path.includes(`/pages/${sectionPath}/`),
+	);
 
-  const files = await Promise.all(
-    filteredPages.map(async ([filePath, resolver]) => {
-      const module = await resolver();
+	const files = await Promise.all(
+		filteredPages.map(async ([filePath, resolver]) => {
+			const module = await resolver();
 
-      const page: PageItem = {
-        file: filePath,
-        title: module.title || "",
-        url: module.url || "",
-      };
+			const page: PageItem = {
+				file: filePath,
+				title: module.title || "",
+				url: module.url || "",
+			};
 
-      return page;
-    }),
-  );
+			return page;
+		}),
+	);
 
-  return files;
+	return files;
 }
 
-sections.forEach(async (section) => {
-  const pages = await getSectionPages(section.key);
-  section.items = pages.sort();
-});
+async function getSections() {
+	const promises = sections.map(async (section) => {
+		const pages = await getSectionPages(section.key);
+		section.items = pages.sort();
+		return section;
+	});
 
-export { sections };
+	await Promise.all(promises);
+
+	return sections;
+}
+
+export { getSections };
diff --git a/src/pages/git/00-introduction.mdx b/src/pages/git/00-introduction.mdx
deleted file mode 100644
index f1fb53a..0000000
--- a/src/pages/git/00-introduction.mdx
+++ /dev/null
@@ -1,116 +0,0 @@
----
-layout: "@/layouts/MarkdownLayout.astro"
----
-
-import Toc from "../../components/Toc.astro";
-
-export const title = "Gitってなに？";
-
-# {title}
-
-Gitは、ソースコードなどを管理するための分散型バージョン管理システムです。
-
-単語だけだと意味がわかりづらいので、Gitの役割を言い表すと以下のようになります。
-
-- ソースコードの変更履歴を保存する
-- 作業の流れを分ける
-- 変更内容を比較・統合する
-- 複数人で同じソースコードを編集できるようにする
-
-## TOC
-
-## ソースコードの変更履歴を保存する (commit)
-
-Gitの大事な役割として、直前の状態からどのように変更されたかを記録するものがあります。  
-これを **「コミット (commit)」** と呼びます。
-
-また、このコミット全体を管理していく仕組みが、 **バージョン管理システム** で、管理されているソースコードのことを **リポジトリ (repository)** と呼びます。
-
-```mermaid
-gitGraph
-  commit id: "履歴1"
-  commit id: "履歴2"
-  commit id: "履歴3"
-```
-
-このコミットのがあることで、そのときの状態に戻すことができます。  
-作業中に行き詰ったときや誤ってコードを壊してしまったときに、以前の動く状態に戻せるので安心です。
-
-## 作業の流れを分ける (branch)
-
-例えばいま書いているものが、すでにインターネット上などで動作しているソースコードだったとします。  
-いくらコミットで以前の状態に戻せるとはいえ、動いているものを直接変更するのは怖いですよね。
-
-そこでGitでは、 **「ブランチ (branch)」** という仕組みを使って、作業の流れを分けることができます。
-
-動作しているソースコードを **mainブランチ** としたとき、そこから開発用のブランチを作成し、そのブランチ上で変更を加えていきます。  
-するとmainブランチのソースコードを直接変更するわけではないので、安心して開発を進めることができます。
-
-作業中のブランチを **featureブランチ** と呼ぶことが多いです。
-
-```mermaid
-gitGraph
-  commit id: "履歴1"
-  commit id: "履歴2"
-  branch feature
-  checkout feature
-  commit id: "機能追加1"
-  commit id: "機能追加2"
-```
-
-## 作業の流れを比較・統合する (merge)
-
-ブランチを分けて作っていた機能が完成したら、それを本番で動いているmainブランチにも反映させたくなりますね。  
-Gitでは、 **「マージ (merge)」** という仕組みを使って、別のブランチで行った変更内容を統合することができます。
-
-```mermaid
-gitGraph
-  commit id: "履歴1"
-  commit id: "履歴2"
-  branch feature
-  checkout feature
-  commit id: "機能追加1"
-  commit id: "機能追加2"
-  checkout main
-  merge feature
-```
-
-Gitのコミットは、直前の状態からどのように変更されたかを記録しているものでした。  
-その変更を同じ変更をGitが再現することができるので、別のブランチで行った変更内容を統合できるのです。
-
-## 複数人で同じソースコードを編集できるようにする (push, pull)
-
-コミットした情報は差分の情報なので、その流れを開始地点から追うことで最新の状態を再現できます。  
-つまり、このコミットを他の人と共有すれば、同じソースコードを編集できるようになるのです。
-
-これを利用して、他の人と同じソースコードを編集することができるようになります。
-
-通常、ソースコードの編集は自分のパソコン上で行います。  
-ここではもちろん、他の人がどのような変更を加えたのかを見ることはできないですよね。
-
-そこでGitでは、「リモートリポジトリ (remote repository)」という仕組みを使って、全員の変更内容を集約する場所を用意します。  
-文字通りリモートにリポジトリを置き、そこに全員のコミットを集約するイメージです。
-
-対象的に、自分のパソコン上にあるリポジトリは **ローカルリポジトリ (local repository)** と呼びます。
-
-![git-remote](/assets/git/git-remote.svg)
-
-その場所に対して、自分のコミット情報を送信 (push) することで最新の状態を共有できます。  
-また他の作業者は、そのリモートリポジトリから最新のコミット情報を取得 (pull) することで、自分のパソコン上のソースコードを最新の状態に更新できます。
-
-```mermaid
-gitGraph
-  commit id: "履歴1"
-  commit id: "履歴2"
-  branch feature
-  checkout feature
-  commit id: "機能追加1" type: HIGHLIGHT
-  branch remote/other-user/fix-feature
-  checkout remote/other-user/fix-feature
-  commit id: "他の人が不具合修正"
-  checkout feature
-  merge remote/other-user/fix-feature id: "pullすると反映"
-```
-
-誰かが自分の改修に対して、不具合修正などを加えたものをリモートリポジトリにpushしたとします。  
-それを自分がpullすることで、自分のローカルリポジトリにもその変更内容が反映されます。
diff --git a/src/pages/git/000-introduction.mdx b/src/pages/git/000-introduction.mdx
new file mode 100644
index 0000000..f1fb53a
--- /dev/null
+++ b/src/pages/git/000-introduction.mdx
@@ -0,0 +1,116 @@
+---
+layout: "@/layouts/MarkdownLayout.astro"
+---
+
+import Toc from "../../components/Toc.astro";
+
+export const title = "Gitってなに？";
+
+# {title}
+
+Gitは、ソースコードなどを管理するための分散型バージョン管理システムです。
+
+単語だけだと意味がわかりづらいので、Gitの役割を言い表すと以下のようになります。
+
+- ソースコードの変更履歴を保存する
+- 作業の流れを分ける
+- 変更内容を比較・統合する
+- 複数人で同じソースコードを編集できるようにする
+
+## TOC
+
+## ソースコードの変更履歴を保存する (commit)
+
+Gitの大事な役割として、直前の状態からどのように変更されたかを記録するものがあります。  
+これを **「コミット (commit)」** と呼びます。
+
+また、このコミット全体を管理していく仕組みが、 **バージョン管理システム** で、管理されているソースコードのことを **リポジトリ (repository)** と呼びます。
+
+```mermaid
+gitGraph
+  commit id: "履歴1"
+  commit id: "履歴2"
+  commit id: "履歴3"
+```
+
+このコミットのがあることで、そのときの状態に戻すことができます。  
+作業中に行き詰ったときや誤ってコードを壊してしまったときに、以前の動く状態に戻せるので安心です。
+
+## 作業の流れを分ける (branch)
+
+例えばいま書いているものが、すでにインターネット上などで動作しているソースコードだったとします。  
+いくらコミットで以前の状態に戻せるとはいえ、動いているものを直接変更するのは怖いですよね。
+
+そこでGitでは、 **「ブランチ (branch)」** という仕組みを使って、作業の流れを分けることができます。
+
+動作しているソースコードを **mainブランチ** としたとき、そこから開発用のブランチを作成し、そのブランチ上で変更を加えていきます。  
+するとmainブランチのソースコードを直接変更するわけではないので、安心して開発を進めることができます。
+
+作業中のブランチを **featureブランチ** と呼ぶことが多いです。
+
+```mermaid
+gitGraph
+  commit id: "履歴1"
+  commit id: "履歴2"
+  branch feature
+  checkout feature
+  commit id: "機能追加1"
+  commit id: "機能追加2"
+```
+
+## 作業の流れを比較・統合する (merge)
+
+ブランチを分けて作っていた機能が完成したら、それを本番で動いているmainブランチにも反映させたくなりますね。  
+Gitでは、 **「マージ (merge)」** という仕組みを使って、別のブランチで行った変更内容を統合することができます。
+
+```mermaid
+gitGraph
+  commit id: "履歴1"
+  commit id: "履歴2"
+  branch feature
+  checkout feature
+  commit id: "機能追加1"
+  commit id: "機能追加2"
+  checkout main
+  merge feature
+```
+
+Gitのコミットは、直前の状態からどのように変更されたかを記録しているものでした。  
+その変更を同じ変更をGitが再現することができるので、別のブランチで行った変更内容を統合できるのです。
+
+## 複数人で同じソースコードを編集できるようにする (push, pull)
+
+コミットした情報は差分の情報なので、その流れを開始地点から追うことで最新の状態を再現できます。  
+つまり、このコミットを他の人と共有すれば、同じソースコードを編集できるようになるのです。
+
+これを利用して、他の人と同じソースコードを編集することができるようになります。
+
+通常、ソースコードの編集は自分のパソコン上で行います。  
+ここではもちろん、他の人がどのような変更を加えたのかを見ることはできないですよね。
+
+そこでGitでは、「リモートリポジトリ (remote repository)」という仕組みを使って、全員の変更内容を集約する場所を用意します。  
+文字通りリモートにリポジトリを置き、そこに全員のコミットを集約するイメージです。
+
+対象的に、自分のパソコン上にあるリポジトリは **ローカルリポジトリ (local repository)** と呼びます。
+
+![git-remote](/assets/git/git-remote.svg)
+
+その場所に対して、自分のコミット情報を送信 (push) することで最新の状態を共有できます。  
+また他の作業者は、そのリモートリポジトリから最新のコミット情報を取得 (pull) することで、自分のパソコン上のソースコードを最新の状態に更新できます。
+
+```mermaid
+gitGraph
+  commit id: "履歴1"
+  commit id: "履歴2"
+  branch feature
+  checkout feature
+  commit id: "機能追加1" type: HIGHLIGHT
+  branch remote/other-user/fix-feature
+  checkout remote/other-user/fix-feature
+  commit id: "他の人が不具合修正"
+  checkout feature
+  merge remote/other-user/fix-feature id: "pullすると反映"
+```
+
+誰かが自分の改修に対して、不具合修正などを加えたものをリモートリポジトリにpushしたとします。  
+それを自分がpullすることで、自分のローカルリポジトリにもその変更内容が反映されます。