diff --git a/.github/workflows/analyze.yml b/.github/workflows/analyze.yml
index fb6b8f6..64f86d7 100644
--- a/.github/workflows/analyze.yml
+++ b/.github/workflows/analyze.yml
@@ -2,6 +2,9 @@ on:
   push:
     branches:
       - main
+    paths:
+      - evonote/**
+      - doc_in_py/**
 
 env:
   OPENAI_API_KEY: NAN
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
new file mode 100644
index 0000000..6b07485
--- /dev/null
+++ b/.github/workflows/deploy.yml
@@ -0,0 +1,52 @@
+name: docs
+
+on:
+  # trigger deployment on every push to main branch
+  push:
+    branches: [main]
+    # trigger deployment on every push to docs folder
+    paths:
+      - docs/**
+
+jobs:
+  docs:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          # fetch all commits to get last updated time or other git log info
+          fetch-depth: 0
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          # choose pnpm version to use
+          version: 8
+          # install deps with pnpm
+          run_install: true
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          # choose node.js version to use
+          node-version: 18
+          # cache deps for pnpm
+          cache: pnpm
+
+      # run build script
+      - name: Build VuePress site
+        run: cd docs;pnpm docs:build
+
+      # please check out the docs of the workflow for more details
+      # @see https://github.com/crazy-max/ghaction-github-pages
+      - name: Deploy to GitHub Pages
+        uses: crazy-max/ghaction-github-pages@v2
+        with:
+          # deploy to gh-pages branch
+          target_branch: gh-pages
+          # deploy the default output dir of VuePress
+          build_dir: .vuepress/dist
+        env:
+          # @see https://docs.github.com/en/actions/reference/authentication-in-a-workflow#about-the-github_token-secret
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
\ No newline at end of file
diff --git a/docs/.gitignore b/docs/.gitignore
new file mode 100644
index 0000000..1d1c973
--- /dev/null
+++ b/docs/.gitignore
@@ -0,0 +1,3 @@
+.vuepress/.*
+node_modules
+pnpm-lock.yaml
\ No newline at end of file
diff --git a/docs/.vuepress/config.ts b/docs/.vuepress/config.ts
new file mode 100644
index 0000000..2fcdd6d
--- /dev/null
+++ b/docs/.vuepress/config.ts
@@ -0,0 +1,61 @@
+import {defineUserConfig} from "@vuepress/cli"
+import {defaultTheme} from '@vuepress/theme-default'
+import * as fs from 'fs';
+
+function get_md_files_names_in_path(path: string) {
+    const files = fs.readdirSync(path);
+    let file_paths = files.filter((file: string) => file.endsWith('.md'));
+    // Filter index.md
+    file_paths = file_paths.filter((file: string) => file !== 'index.md');
+    return file_paths;
+}
+
+// @ts-ignore
+export default defineUserConfig({
+    repo: 'EvoEvolver/EvoNote',
+    docsDir: 'docs',
+    head: [['link', { rel: 'icon', href: '/image/favicon.ico' }]],
+    theme: defaultTheme({
+        navbar: [
+            {
+                text: 'Home',
+                link: '/',
+            }
+        ],
+        sidebar: {
+            "/": [{
+                text: 'EvoNote Docs',
+                children: [
+                    {
+                        text: 'Home',
+                        link: '/',
+                    },
+                    {
+                      text: 'Writings',
+                        link: '/writings',
+                    },
+                    {
+                        text: 'Development',
+                        link: '/development',
+                    },
+                    {
+                        text: 'Project tree',
+                        link: 'https://evonote.org/project_tree.html',
+                    }
+                ],
+            }],
+            "/writings": [
+                {
+                text: 'Writings',
+                    link: '/writings',
+                children: get_md_files_names_in_path('writings').map((file: string) => {
+                    return {
+                        text: file.replace('.md', ''),
+                        link: `/writings/${file}`,
+                    }
+                }),
+            }]
+        },
+        sidebarDepth: 2,
+    })
+})
\ No newline at end of file
diff --git a/docs/.vuepress/public/image/favicon.ico b/docs/.vuepress/public/image/favicon.ico
new file mode 100644
index 0000000..9ceb642
Binary files /dev/null and b/docs/.vuepress/public/image/favicon.ico differ
diff --git a/docs/.vuepress/styles/index.scss b/docs/.vuepress/styles/index.scss
new file mode 100644
index 0000000..07667a5
--- /dev/null
+++ b/docs/.vuepress/styles/index.scss
@@ -0,0 +1,218 @@
+:root {
+  // brand colors
+  --c-brand: #2570b4;
+  --c-brand-light: #2e75b6;
+
+  // background colors
+  --c-bg: #ffffff;
+  --c-bg-light: #f3f4f5;
+  --c-bg-lighter: #eeeeee;
+  --c-bg-dark: #ebebec;
+  --c-bg-darker: #e6e6e6;
+  --c-bg-navbar: var(--c-bg);
+  --c-bg-sidebar: var(--c-bg);
+  --c-bg-arrow: #cccccc;
+
+  // text colors
+  --c-text: #2c3e50;
+  --c-text-accent: var(--c-brand);
+  --c-text-light: #3a5169;
+  --c-text-lighter: #4e6e8e;
+  --c-text-lightest: #6a8bad;
+  --c-text-quote: #999999;
+
+  // border colors
+  --c-border: #eaecef;
+  --c-border-dark: #dfe2e5;
+
+  // custom container colors
+  --c-tip: #42b983;
+  --c-tip-bg: var(--c-bg-light);
+  --c-tip-title: var(--c-text);
+  --c-tip-text: var(--c-text);
+  --c-tip-text-accent: var(--c-text-accent);
+  --c-warning: #ffc310;
+  --c-warning-bg: #fffae3;
+  --c-warning-bg-light: #fff3ba;
+  --c-warning-bg-lighter: #fff0b0;
+  --c-warning-border-dark: #f7dc91;
+  --c-warning-details-bg: #fff5ca;
+  --c-warning-title: #f1b300;
+  --c-warning-text: #746000;
+  --c-warning-text-accent: #edb100;
+  --c-warning-text-light: #c1971c;
+  --c-warning-text-quote: #ccab49;
+  --c-danger: #f11e37;
+  --c-danger-bg: #ffe0e0;
+  --c-danger-bg-light: #ffcfde;
+  --c-danger-bg-lighter: #ffc9c9;
+  --c-danger-border-dark: #f1abab;
+  --c-danger-details-bg: #ffd4d4;
+  --c-danger-title: #ed1e2c;
+  --c-danger-text: #660000;
+  --c-danger-text-accent: #bd1a1a;
+  --c-danger-text-light: #b5474d;
+  --c-danger-text-quote: #c15b5b;
+  --c-details-bg: #eeeeee;
+
+  // badge component colors
+  --c-badge-tip: var(--c-tip);
+  --c-badge-warning: #ecc808;
+  --c-badge-warning-text: var(--c-bg);
+  --c-badge-danger: #dc2626;
+  --c-badge-danger-text: var(--c-bg);
+
+  // transition vars
+  --t-color: 0.3s ease;
+  --t-transform: 0.3s ease;
+
+  // code blocks vars
+  --code-bg-color: #282c34;
+  --code-hl-bg-color: rgba(0, 0, 0, 0.66);
+  --code-ln-color: #9e9e9e;
+  --code-ln-wrapper-width: 3.5rem;
+
+  // font vars
+  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+    Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  --font-family-code: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+
+  // layout vars
+  --navbar-height: 3.6rem;
+  --navbar-padding-v: 0.7rem;
+  --navbar-padding-h: 1.5rem;
+  --sidebar-width: 20rem;
+  --sidebar-width-mobile: calc(var(--sidebar-width) * 0.82);
+  --content-width: 740px;
+  --homepage-width: 960px;
+}
+
+// plugin-back-to-top
+.back-to-top {
+  --back-to-top-color: var(--c-brand);
+  --back-to-top-color-hover: var(--c-brand-light);
+}
+
+// plugin-docsearch
+.DocSearch {
+  --docsearch-primary-color: var(--c-brand);
+  --docsearch-text-color: var(--c-text);
+  --docsearch-highlight-color: var(--c-brand);
+  --docsearch-muted-color: var(--c-text-quote);
+  --docsearch-container-background: rgba(9, 10, 17, 0.8);
+  --docsearch-modal-background: var(--c-bg-light);
+  --docsearch-searchbox-background: var(--c-bg-lighter);
+  --docsearch-searchbox-focus-background: var(--c-bg);
+  --docsearch-searchbox-shadow: inset 0 0 0 2px var(--c-brand);
+  --docsearch-hit-color: var(--c-text-light);
+  --docsearch-hit-active-color: var(--c-bg);
+  --docsearch-hit-background: var(--c-bg);
+  --docsearch-hit-shadow: 0 1px 3px 0 var(--c-border-dark);
+  --docsearch-footer-background: var(--c-bg);
+}
+
+// plugin-external-link-icon
+.external-link-icon {
+  --external-link-icon-color: var(--c-text-quote);
+}
+
+// plugin-medium-zoom
+.medium-zoom-overlay {
+  --medium-zoom-bg-color: var(--c-bg);
+}
+
+// plugin-nprogress
+#nprogress {
+  --nprogress-color: var(--c-brand);
+}
+
+// plugin-pwa-popup
+.pwa-popup {
+  --pwa-popup-text-color: var(--c-text);
+  --pwa-popup-bg-color: var(--c-bg);
+  --pwa-popup-border-color: var(--c-brand);
+  --pwa-popup-shadow: 0 4px 16px var(--c-brand);
+  --pwa-popup-btn-text-color: var(--c-bg);
+  --pwa-popup-btn-bg-color: var(--c-brand);
+  --pwa-popup-btn-hover-bg-color: var(--c-brand-light);
+}
+
+// plugin-search
+.search-box {
+  --search-bg-color: var(--c-bg);
+  --search-accent-color: var(--c-brand);
+  --search-text-color: var(--c-text);
+  --search-border-color: var(--c-border);
+
+  --search-item-text-color: var(--c-text-lighter);
+  --search-item-focus-bg-color: var(--c-bg-light);
+}
+
+html.dark {
+  // brand colors
+  --c-brand: #73a9d9;
+  --c-brand-light: #a8c4e0;
+
+  // background colors
+  --c-bg: #22272e;
+  --c-bg-light: #2b313a;
+  --c-bg-lighter: #262c34;
+  --c-bg-dark: #343b44;
+  --c-bg-darker: #37404c;
+
+  // text colors
+  --c-text: #adbac7;
+  --c-text-light: #96a7b7;
+  --c-text-lighter: #8b9eb0;
+  --c-text-lightest: #8094a8;
+
+  // border colors
+  --c-border: #3e4c5a;
+  --c-border-dark: #34404c;
+
+  // custom container colors
+  --c-tip: #318a62;
+  --c-warning: #e0ad15;
+  --c-warning-bg: #2d2f2d;
+  --c-warning-bg-light: #423e2a;
+  --c-warning-bg-lighter: #44442f;
+  --c-warning-border-dark: #957c35;
+  --c-warning-details-bg: #39392d;
+  --c-warning-title: #fdca31;
+  --c-warning-text: #d8d96d;
+  --c-warning-text-accent: #ffbf00;
+  --c-warning-text-light: #ddb84b;
+  --c-warning-text-quote: #ccab49;
+  --c-danger: #fc1e38;
+  --c-danger-bg: #39232c;
+  --c-danger-bg-light: #4b2b35;
+  --c-danger-bg-lighter: #553040;
+  --c-danger-border-dark: #a25151;
+  --c-danger-details-bg: #482936;
+  --c-danger-title: #fc2d3b;
+  --c-danger-text: #ea9ca0;
+  --c-danger-text-accent: #fd3636;
+  --c-danger-text-light: #d9777c;
+  --c-danger-text-quote: #d56b6b;
+  --c-details-bg: #323843;
+
+  // badge component colors
+  --c-badge-warning: var(--c-warning);
+  --c-badge-warning-text: #3c2e05;
+  --c-badge-danger: var(--c-danger);
+  --c-badge-danger-text: #401416;
+
+  // code blocks vars
+  --code-hl-bg-color: #363b46;
+}
+
+// plugin-docsearch
+html.dark .DocSearch {
+  --docsearch-logo-color: var(--c-text);
+  --docsearch-modal-shadow: inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309;
+  --docsearch-key-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d,
+    0 2px 2px 0 rgba(3, 4, 9, 0.3);
+  --docsearch-key-gradient: linear-gradient(-225deg, #444950, #1c1e21);
+  --docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, 0.5),
+    0 -4px 8px 0 rgba(0, 0, 0, 0.2);
+}
\ No newline at end of file
diff --git a/docs/index.md b/docs/index.md
index f3762a3..54d74f6 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -1,6 +1,3 @@
+![](./evonote.svg)
 
-[Guild for development](./development)
-
-[Writings by Zijian](./writings)
-
-[Project tree](./project_tree.html)
\ No newline at end of file
+Welcome to the Evonote documentation!
\ No newline at end of file
diff --git a/docs/package.json b/docs/package.json
new file mode 100644
index 0000000..219c7d2
--- /dev/null
+++ b/docs/package.json
@@ -0,0 +1,13 @@
+{
+  "scripts": {
+    "docs:dev": "vuepress dev .",
+    "docs:build": "vuepress build ."
+  },
+  "devDependencies": {
+    "@vuepress/cli": "2.0.0-beta.45",
+    "@vuepress/client": "2.0.0-beta.67",
+    "@vuepress/theme-default": "2.0.0-beta.67",
+    "vue": "^3.3.4",
+    "vuepress": "2.0.0-beta.67"
+  }
+}
\ No newline at end of file
diff --git a/docs/writings/index.md b/docs/writings/index.md
new file mode 100644
index 0000000..d9ede4c
--- /dev/null
+++ b/docs/writings/index.md
@@ -0,0 +1,4 @@
+
+# Writings
+
+Here are writings reflecting the ideas of EvoNote.
\ No newline at end of file