diff --git a/.gitignore b/.gitignore
index 592f28d11..0d4b3b92c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,5 @@
/docs/**/*.json
+!_category_.json
# Dependencies
/node_modules
diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index 640aade37..54443c155 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -56,9 +56,8 @@ repos:
- id: check-added-large-files
- id: check-json
exclude: .eslintrc.json|tsconfig.json
- - id: pretty-format-json
- args: [--autofix]
- exclude: ^(package.json|package-lock.json|.eslintrc.json|tsconfig.json)$
+ # - id: pretty-format-json
+ # args: [--autofix]
- id: check-merge-conflict
- id: check-toml
- id: check-xml
diff --git a/docs/03extras/04website/01npm/index.mdx b/docs/03extras/04website/01npm/index.mdx
new file mode 100644
index 000000000..99048327e
--- /dev/null
+++ b/docs/03extras/04website/01npm/index.mdx
@@ -0,0 +1,69 @@
+---
+sidebar_position: 1
+---
+
+import installNpm from "./install_npm.mp4";
+import installCurl from "./install_curl.mp4";
+
+# npm のインストール方法
+
+## npm のインストール方法
+
+このシケプリは、Docusaurus という静的サイトジェネレーターを使っています。Docusaurus をインストールするには npm(Node Package Manager)というパッケージ管理ツールが必要です。また、他に必要なパッケージをインストールする時にも必須となります。npm は JavaScript の開発者によく使われています。
+
+下の動画を見ながら、インストールしてください。以下に概要を記しておきます。
+
+まず、はじめに nvm(Node Version Manager) という Node.js のバージョン管理ツールをインストールします。
+
+- [nvm のウェブサイトの Install & Update Script の項](https://github.com/nvm-sh/nvm#install--update-script)に書かれているスクリプトをターミナル上で実行しましょう。次のようなスクリプトが書いてあるはずです。2022 年 11 月現在
+
+```shell
+curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.2/install.sh | bash
+```
+
+- ターミナルを再起動しましょう。ターミナル上で `exit` と入力して、ターミナルをもう一度開くことで再起動ができます。※ターミナルを再起動させないと次のコマンドを実行したときにエラーが出ます。
+
+- 次のコマンドを実行してください。これは、nvm のバージョンを確認するコマンドです。
+
+```shell
+nvm -v
+```
+
+- 次のように表示されたら、成功です。※2022 年 11 月現在
+
+```shell
+0.39.2
+```
+
+次に、nvm を用いて Node.js の安定版（LTS）をインストールします。
+
+- 次のコマンドを実行してください。これは、Node.js の安定版（LTS）をインストールするコマンドです。
+
+```shell
+nvm install --lts
+```
+
+- 次のコマンドを実行してください。これは、Node.js のバージョンを確認するコマンドです。
+
+```shell
+node -v
+```
+
+- 次のように表示されたら、成功です。※2022 年 11 月現在
+
+```shell
+v18.12.1
+```
+
+
+
+:::tip
+一番はじめのスクリプトを実行する時に `Command 'curl' not found ...` のようにエラーが出た場合は、curl がインストールされていない可能性があります。エラーメッセージにあるように、WSL や Ubuntu 系の Linux では次のスクリプトを実行して curl をインストールすればうまく動きます。
+
+```shell
+sudo apt -y install curl
+```
+
+
+
+:::
diff --git a/docs/03extras/04website/01npm/install_curl.mp4 b/docs/03extras/04website/01npm/install_curl.mp4
new file mode 100644
index 000000000..0302e854e
Binary files /dev/null and b/docs/03extras/04website/01npm/install_curl.mp4 differ
diff --git a/docs/03extras/04website/01npm/install_npm.mp4 b/docs/03extras/04website/01npm/install_npm.mp4
new file mode 100644
index 000000000..39262967f
Binary files /dev/null and b/docs/03extras/04website/01npm/install_npm.mp4 differ
diff --git a/docs/03extras/04website/02docusaurus/edit_docusaurus.mp4 b/docs/03extras/04website/02docusaurus/edit_docusaurus.mp4
new file mode 100644
index 000000000..572fd9ee1
Binary files /dev/null and b/docs/03extras/04website/02docusaurus/edit_docusaurus.mp4 differ
diff --git a/docs/03extras/04website/02docusaurus/index.mdx b/docs/03extras/04website/02docusaurus/index.mdx
new file mode 100644
index 000000000..8a3b38da1
--- /dev/null
+++ b/docs/03extras/04website/02docusaurus/index.mdx
@@ -0,0 +1,187 @@
+---
+sidebar_position: 2
+---
+
+import installDocusaurus from "./install_docusaurus.mp4";
+import editDocusaurus from "./edit_docusaurus.mp4";
+import LifeGame from "@site/src/components/LifeGame/LifeGame";
+
+# Docusaurus のインストール方法
+
+## Docusaurus のインストール方法
+
+ここでは、Docusaurus という静的サイトジェネレーターを使って実際にウェブサイトを作ってみます。Docusaurus は、さきほどインストールした npm を使うとコマンド一つで使うことができます。実は、npm を使えば、Docusaurus 以外にも様々なものをコマンド一つで簡単にインストールできます。下の動画を見ながら、インストールしてください。以下に概要を記しておきます。
+
+- まず、適当に `projects` ファルダを作成して、ターミナルを起動してください。
+
+- ここで、次のコマンドを実行すると、Docusaurus のプロジェクトを作成することができます。（`my-website` のところを任意の文字にすることでプロジェクト名を決めることができます。）
+
+```shell
+npx create-docusaurus@latest my-website classic
+```
+
+- `Ok to proceed? (y)` と聞かれるので、`y` と入力して `Enterキー` を押します。
+
+- 次のコマンドを順に実行します。すると、ブラウザが自動的に開き、デフォルトのウェブサイトが現れます。
+
+```shell
+cd my-website
+```
+
+```shell
+npm start
+```
+
+
+
+## Docusaurus の編集方法
+
+ここでは、Docusaurus を実際に編集してみます。
+
+- まず、ターミナル上で `Ctrlキー` と `C` を同時に押して、先程起動した Docusaurus のサーバーを終了してください。
+
+- 次に、先程作成した Docusaurus のプロジェクトを VSCode で開きます。
+
+- ターミナルを起動します。
+
+- もう一度次のコマンドを実行して、Docusaurus のサーバーを起動します。先程のようにブラウザが自動的に開きます。
+
+```shell
+npm start
+```
+
+- では、実際に編集してみましょう。今回は、チュートリアルのはじめのページを編集してみます。`docs` ファルダの中の `intro.md` というフォルダを開いて、上から 5 行目の `# Tutorial Intro` というところを `# Hello from Docusaurus` と書き換えてみましょう。（先頭に `#` と書いてあるのは、ここは見出しだという命令です。実は、Docusaurus は Markdown という非常に簡単な形式で書くことができます。）ブラウザを見ると、自動で編集した内容がプレビューされているはずです。
+
+
+
+:::info
+先程、Docusaurus は Markdown という形式で書くことができると書きました。ここで、Markdown 記法について少し紹介しておきます。詳しいことは、自分で調べてみてください。
+
+1. `#` と書くことで見出しを書くことができます。
+
+ ```markdown
+ # レベル 1 の見出し
+ ```
+
+ # レベル 1 の見出し
+
+2. `##` は `#` の一個下の見出しです。
+
+ ```markdown
+ ## レベル 2 の見出し
+ ```
+
+ ## レベル 2 の見出し
+
+3. `**` で強調することができます。
+
+ ```markdown
+ **強調**
+ ```
+
+ **強調**
+
+4. `>` とすることで引用することができます。
+
+ ```markdown
+ > hoge
+ ```
+
+ > hoge
+
+5. 箇条書きは次のようにして書けます。
+
+ ```markdown
+ - アイテム 1
+ - アイテム 2
+ - アイテム 3
+ ```
+
+
+ - アイテム 1
+ - アイテム 2
+ - アイテム 3
+
+
+6. 番号付き箇条書きは次のようにして書けます。
+
+ ```markdown
+ 1. アイテム 1
+ 1. アイテム 2
+ 1. アイテム 3
+ ```
+
+
+ - アイテム 1
+ - アイテム 2
+ - アイテム 3
+
+
+7. バッククォート（ `` ` `` ）で囲むことでインラインコードを表示することができます。
+
+ ```markdown
+ `コードテキスト`
+ ```
+
+ `コードテキスト`
+
+8. バッククォート 3 つで、コードブロックを表示することができます。
+
+ ````markdown
+ ```python
+ print("Hello World!")
+ ```
+ ````
+
+ ```python
+ print("Hello World!")
+ ```
+
+9. リンクは次のようにして表すことができます。
+
+ ```markdown
+ [Introduction to Algorithms](https://sikepuri-algorithm.github.io/)
+ ```
+
+ [Introduction to Algorithms](https://sikepuri-algorithm.github.io/)
+
+10. 画像は次のようにして表示することができます。もちろん相対パスも使えます。
+
+ ```markdown
+ 
+ ```
+
+
+
+ 
+
+
+
+11. 実は、Markdown の中には HTML も書くことができます。
+
+ ```markdown
+
+ ```
+
+
+
+:::
+
+:::info
+実は、Docusaurus は Markdown だけでなく MDX でも書くことができます。MDX は、Markdown の中で JSX 記法 を使えるものです。JSX 記法 は、JavaScript の中に HTML を書くことができるものですが、なかなか奥が深くここでは説明できないので、自分で調べてみてください。
+
+ちなみに、このシケプリではライフゲームのコンポーネントを作ったので、それを使うときはファイルの先頭で次のようにインポートしてから、次のように書くだけでライフゲームを表示できます w
+
+```markdown
+import LifeGame from "@site/src/components/LifeGame/LifeGame";
+```
+
+```mdx
+
+```
+
+
+
+
+
+:::
diff --git a/docs/03extras/04website/02docusaurus/install_docusaurus.mp4 b/docs/03extras/04website/02docusaurus/install_docusaurus.mp4
new file mode 100644
index 000000000..9167fd9c3
Binary files /dev/null and b/docs/03extras/04website/02docusaurus/install_docusaurus.mp4 differ
diff --git a/docs/03extras/04website/03GitHub/index.mdx b/docs/03extras/04website/03GitHub/index.mdx
new file mode 100644
index 000000000..5c0cd391f
--- /dev/null
+++ b/docs/03extras/04website/03GitHub/index.mdx
@@ -0,0 +1,102 @@
+---
+sidebar_position: 3
+---
+
+import sighupGitHub from "./sighup_github.mp4";
+import setupGit from "./setup_git.mp4";
+import setupSshGithub from "./setup_ssh_github.mp4";
+import pushToGithub from "./push_to_github.mp4";
+
+# GitHub へ保存
+
+## GitHub のアカウントを作る
+
+GitHub はソースコードのホスティングサービスです。Git というバージョン管理ソフトウェアを用いて、ソースコードの管理や共有が簡単にできます。
+
+下の動画を参考にまずはアカウントを作成しましょう。
+
+
+
+## 初期設定
+
+まずは Git の初期設定をしましょう。
+
+- GitHub で `Settings`、`Emails`の順にクリックして、`Keep my email addresses private` の下に書いてあるダミーのメールアドレス（動画では、`118946511+sample-hovwec@users.noreply.github.com`）をコピーしてください。
+
+- 次のコマンドを順に実行してください。それぞれユーザー名の設定、メールアドレスの設定、デフォルトブランチの設定（これをやっておくと、後で混乱がなくなります。）になってます。
+
+ ```shell
+ git config --global user.name ユーザー名
+ ```
+
+ ```shell
+ git config --global user.email 先程確認したメールアドレス
+ ```
+
+ ```shell
+ git config --global init.defaultBranch main
+ ```
+
+
+
+次に、GitHub に自分のパソコンの公開鍵を登録して、認証しましょう。
+
+- 次のコマンドを実行して公開鍵を作りましょう。
+
+ ```shell
+ cd ~
+ ```
+
+ ```shell
+ ssh-keygen -t ed25519
+ ```
+
+- 次のコマンドを実行して公開鍵を表示しましょう。
+
+ ```shell
+ cd ~/.ssh
+ ```
+
+ ```shell
+ cat id_ed25519.pub
+ ```
+
+- 公開鍵をコピーしましょう。（動画では、`ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIFwrVCiY5VvBvo5VRDIzkFZa0eprytqHmoWBS2GBbGpT`）
+
+- GitHub で `Settings`、`SSH and GPG keys`、`SSH keys` の中の `New SSH key` をクリックして、`Title` に適当な名前、`Key` に先程コピーした公開鍵を入力して、`Add SSH key` をクリックすると GitHub に公開鍵が登録できます。
+
+
+
+## GitHub へ保存
+
+初期設定が終わったので、GitHub に保存しましょう。`Repositories`、`New`を押して、`Repository name` に好きな名前を入力し、`Private` を押して、`Create repository` を押してください。これで、リポジトリを作ることができます。※他の人に見られても良いのであれば、`Public` にしてください。
+
+作成が終わったら、`SSH` をクリックして、右側にある文字をコピーしましょう。※`SSH` をクリックし忘れないように気をつけてください。
+
+次に、作成した Docusaurus のプロジェクトフォルダを VSCode で開いてそこで、次のコマンドを実行してください。
+
+```shell
+git init
+```
+
+次に、次のコマンドを実行して、先程作ったリポジトリとパソコン上のリポジトリを紐付けてください。
+
+```shell
+git remote add origin 先程コピーした文字
+```
+
+次に、ステージングしましょう。これで、どのファイルを Git 上で管理するか決めることができます。`-A` はすべてを管理する命令です。`git add ファイル名` などのようにして個別にすることもできます。
+
+```shell
+git add -A
+```
+
+次に、コミットしましょう。ダブルクォーテーション（`"`）の中は好きなメッセージを入れることができます。
+
+```shell
+git commit -m "first commit"
+```
+
+最後に、ローカルのブランチをリモートリポジトリにプッシュしましょう。一回目だと、`Are you sure you want to continue connecting (yes/no/[fingerprint])?` と聞かれるので、`yes` と入力しましょう。これで、GitHub を開くと、ローカルのファイルが GitHub に保存されたことがわかります。
+
+
diff --git a/docs/03extras/04website/03GitHub/push_to_github.mp4 b/docs/03extras/04website/03GitHub/push_to_github.mp4
new file mode 100644
index 000000000..db2c943ea
Binary files /dev/null and b/docs/03extras/04website/03GitHub/push_to_github.mp4 differ
diff --git a/docs/03extras/04website/03GitHub/setup_git.mp4 b/docs/03extras/04website/03GitHub/setup_git.mp4
new file mode 100644
index 000000000..7465ae274
Binary files /dev/null and b/docs/03extras/04website/03GitHub/setup_git.mp4 differ
diff --git a/docs/03extras/04website/03GitHub/setup_ssh_github.mp4 b/docs/03extras/04website/03GitHub/setup_ssh_github.mp4
new file mode 100644
index 000000000..99e25b962
Binary files /dev/null and b/docs/03extras/04website/03GitHub/setup_ssh_github.mp4 differ
diff --git a/docs/03extras/04website/03GitHub/sighup_github.mp4 b/docs/03extras/04website/03GitHub/sighup_github.mp4
new file mode 100644
index 000000000..6f8656282
Binary files /dev/null and b/docs/03extras/04website/03GitHub/sighup_github.mp4 differ
diff --git a/docs/03extras/04website/04deploy/deploy.mp4 b/docs/03extras/04website/04deploy/deploy.mp4
new file mode 100644
index 000000000..8e168a543
Binary files /dev/null and b/docs/03extras/04website/04deploy/deploy.mp4 differ
diff --git a/docs/03extras/04website/04deploy/index.mdx b/docs/03extras/04website/04deploy/index.mdx
new file mode 100644
index 000000000..ee2abef10
--- /dev/null
+++ b/docs/03extras/04website/04deploy/index.mdx
@@ -0,0 +1,24 @@
+---
+sidebar_position: 4
+---
+
+import signupRender from "./signup_render.mp4";
+import deploy from "./deploy.mp4";
+
+# Render にデプロイ
+
+Render は様々な Web アプリを簡単にデプロイできるプラットフォームです。実は、このシケプリは GitHub Pages を使っているのですが、GitHub Pages はソースコードを公開しないと使えないので、こちらを紹介しておきます。
+
+## Render の登録
+
+次の動画を参考に、Render の登録をしてください。
+
+
+
+## Render にデプロイ
+
+初めて使うときは、次の動画を参考に GitHub の連携をしないといけません。
+
+連携ができたら、動画のように入力してください。成功すると、用意された URL に作成した Web ページが表示されます。これは、世界中の人が URL を知っていればアクセスできます。
+
+
diff --git a/docs/03extras/04website/04deploy/signup_render.mp4 b/docs/03extras/04website/04deploy/signup_render.mp4
new file mode 100644
index 000000000..29340c506
Binary files /dev/null and b/docs/03extras/04website/04deploy/signup_render.mp4 differ
diff --git a/docs/03extras/04website/_category_.json b/docs/03extras/04website/_category_.json
new file mode 100644
index 000000000..e4e58b37b
--- /dev/null
+++ b/docs/03extras/04website/_category_.json
@@ -0,0 +1,8 @@
+{
+ "label": "このシケプリの作られ方",
+ "position": 4,
+ "link": {
+ "type": "generated-index",
+ "description": "Visual Studio Code をインストールの項を参考に VSCode をインストールしておいてください。Windows を使っている場合は、WSL をインストールの項を参考に WSL もインストールしておいてください。ここでは、このシケプリの作り方を紹介しておきます。次のようにすることで、このシケプリと全く同じようなものを作成することができます。"
+ }
+}