diff --git a/.env.tmpl b/.env.tmpl
new file mode 100644
index 0000000..d9f5085
--- /dev/null
+++ b/.env.tmpl
@@ -0,0 +1,4 @@
+BASE_URL=/blog/
+# GISCUS Configs: generated from https://giscus.app/
+GISCUS_REPO_ID=
+GISCUS_CATEGORY_ID=
diff --git a/.github/contributing.md b/.github/contributing.md
index dda32b2..da73206 100644
--- a/.github/contributing.md
+++ b/.github/contributing.md
@@ -9,10 +9,16 @@ The version number is stored in this file: [`.nvmrc`](../.nvmrc).
 After the corresponding [Node.js](https://nodejs.org/) is installed, run:
 
 ```sh
+# setup .env
+mv .env.tmpl .env
+# then fill out the .env
+
 # install dependencies
 npm install
+
 # start the development server
 npm run dev
+
 # build static files for deployment
 npm run build
 ```
diff --git a/.gitignore b/.gitignore
index c503442..c89f734 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,5 @@
 .DS_Store
+.env
 .vitepress/dist
 .vitepress/cache
 node_modules
diff --git a/.vitepress/config.theme.ts b/.vitepress/config.theme.ts
index 784606c..6b517cf 100644
--- a/.vitepress/config.theme.ts
+++ b/.vitepress/config.theme.ts
@@ -1,7 +1,7 @@
 import type { ThemeConfig } from "./theme/types/theme-config";
 import { tokenize } from "./theme/search";
 import emailSVGString from "./theme/svgs/email";
-import { withBaseURL } from "./config.utils";
+import { giscus, withBaseURL } from "./config.utils";
 
 export default {
   outline: "deep",
@@ -81,5 +81,6 @@ export default {
   location: "Shenzhen, China",
   timezone: "Asia/Shanghai",
   pageSize: 13,
-  mdfilePatterns: ["posts/**/*.md"]
+  mdfilePatterns: ["posts/**/*.md"],
+  giscus
 } satisfies ThemeConfig;
diff --git a/.vitepress/config.utils.ts b/.vitepress/config.utils.ts
index 92bd1ca..d90dfd6 100644
--- a/.vitepress/config.utils.ts
+++ b/.vitepress/config.utils.ts
@@ -1,8 +1,14 @@
+import "dotenv/config";
 import { env } from "process";
 import * as path from "path";
 
 export const BASE_URL = env.BASE_URL || undefined;
 
+export const giscus = {
+  repo_id: env.GISCUS_REPO_ID || "",
+  category_id: env.GISCUS_CATEGORY_ID || "",
+};
+
 export function withBaseURL(urlPath: string) {
   return path.join(BASE_URL || "/", urlPath);
 }
diff --git a/.vitepress/theme/components/Comments.vue b/.vitepress/theme/components/Comments.vue
new file mode 100644
index 0000000..26975cb
--- /dev/null
+++ b/.vitepress/theme/components/Comments.vue
@@ -0,0 +1,58 @@
+<template>
+  <div :class="$style.giscus">
+    <Giscus
+      v-if="!giscusHidden"
+      id="comments"
+      category="Announcements"
+      repo="Octobug/blog"
+      :repo-id="giscus.repo_id"
+      :category-id="giscus.category_id"
+      mapping="title"
+      strict="1"
+      reactions-enabled="1"
+      emit-metadata="0"
+      input-position="top"
+      lang="en"
+      :theme="giscusTheme"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import Giscus from "@giscus/vue";
+import { onContentUpdated, useData } from "vitepress";
+import { ref } from "vue";
+
+const { isDark, theme } = useData();
+const { giscus } = theme.value;
+
+function getGiscusTheme() {
+  return isDark.value ? "dark" : "light";
+}
+
+let giscusTheme = ref(getGiscusTheme());
+let giscusHidden = ref(false);
+
+const switchMode = () => {
+  giscusTheme.value = getGiscusTheme();
+  giscusHidden.value = true;
+  setTimeout(() => {
+    giscusHidden.value = false;
+  }, 1);
+};
+
+onContentUpdated(() => {
+  const observer = new MutationObserver(switchMode);
+  const element = document.querySelector("button.VPSwitchAppearance");
+  if (!element) return;
+  observer.observe(element, { attributes: true });
+});
+</script>
+
+<style module scoped>
+.giscus {
+  margin-top: 1.5rem;
+  display: grid;
+  grid-row-gap: 8px;
+}
+</style>
diff --git a/.vitepress/theme/components/PrevNext.vue b/.vitepress/theme/components/PrevNext.vue
index 419d1a1..41dc4ce 100644
--- a/.vitepress/theme/components/PrevNext.vue
+++ b/.vitepress/theme/components/PrevNext.vue
@@ -43,7 +43,7 @@ import { findPostIndex } from "../utils";
 import type { PageControl } from "../types/page-control";
 
 const { page, theme } = useData();
-let control = ref<PageControl>({});
+const control = ref<PageControl>({});
 
 onContentUpdated(() => {
   const index = findPostIndex(allPosts, page.value);
@@ -64,7 +64,7 @@ onContentUpdated(() => {
 <style module scoped>
 .prevNext {
   border-top: 1px solid var(--vp-c-divider);
-  padding-top: 24px;
+  padding-top: 1.5rem;
   display: grid;
   grid-row-gap: 8px;
 }
diff --git a/.vitepress/theme/pages/Layout.vue b/.vitepress/theme/pages/Layout.vue
index 747d482..cf2679d 100644
--- a/.vitepress/theme/pages/Layout.vue
+++ b/.vitepress/theme/pages/Layout.vue
@@ -4,8 +4,8 @@
       <PostElements />
     </template>
     <template #doc-after>
-      <!-- <Comments /> -->
       <PrevNext />
+      <Comments />
     </template>
   </Layout>
 </template>
@@ -14,6 +14,7 @@
 import DefaultTheme from "vitepress/theme";
 import PostElements from "../components/PostElements.vue";
 import PrevNext from "../components/PrevNext.vue";
+import Comments from "../components/Comments.vue";
 
 const { Layout } = DefaultTheme;
 </script>
diff --git a/.vitepress/theme/types/theme-config.d.ts b/.vitepress/theme/types/theme-config.d.ts
index 3b47323..f3b077a 100644
--- a/.vitepress/theme/types/theme-config.d.ts
+++ b/.vitepress/theme/types/theme-config.d.ts
@@ -8,4 +8,8 @@ export interface ThemeConfig extends DefaultTheme.Config {
   timezone: string,
   pageSize: number,
   mdfilePatterns: Array<string>
+  giscus: {
+    repo_id: string,
+    category_id: string
+  }
 }
diff --git a/README.md b/README.md
index 394a6ef..ff271da 100644
--- a/README.md
+++ b/README.md
@@ -22,13 +22,13 @@ This blog is powered by [VitePress](https://vitepress.dev/) with a customized th
   - [x] Location
   - [x] Reading Time
   - [x] Prev/Next (without the built-in global sidebar)
-  - [ ] Comments with Giscus
+  - [x] Comments (with [Giscus](https://github.com/giscus/giscus))
 - [ ] Posts (Archives)
 - [ ] Tags
 - [ ] Sorts (Categories)
 - [ ] Others
   - [ ] Visions (for special pages)
-  - [ ] Google Analytics
+  - [x] [Google Analytics](https://analytics.google.com/)
 
 ## Contribution
 
diff --git a/package-lock.json b/package-lock.json
index bc52cb6..2f147ed 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,9 +12,11 @@
         "reading-time": "^1.5.0"
       },
       "devDependencies": {
+        "@giscus/vue": "^2.3.0",
         "@types/node": "^20.8.10",
         "@typescript-eslint/eslint-plugin": "^6.7.2",
         "@typescript-eslint/parser": "^6.7.2",
+        "dotenv": "^16.3.1",
         "eslint": "^8.50.0",
         "eslint-plugin-vue": "^9.17.0",
         "husky": "^8.0.3",
@@ -676,6 +678,18 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@giscus/vue": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@giscus/vue/-/vue-2.3.0.tgz",
+      "integrity": "sha512-ZZ1ZRqRwoHEfYpepSozU4HKjvCQ/4PjVt6P391/c0F4ly1i57OUup2h6Pd+l7dUnh9j7fbqUp6CfFk5+99S3Jw==",
+      "dev": true,
+      "dependencies": {
+        "giscus": "^1.3.0"
+      },
+      "peerDependencies": {
+        "vue": ">=3.2.0"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.11",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.11.tgz",
@@ -759,6 +773,21 @@
       "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
       "dev": true
     },
+    "node_modules/@lit-labs/ssr-dom-shim": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.1.2.tgz",
+      "integrity": "sha512-jnOD+/+dSrfTWYfSXBXlo5l5f0q1UuJo3tkbMDCYA2lKUYq79jaxqtGEvnRoh049nt1vdo1+45RinipU6FGY2g==",
+      "dev": true
+    },
+    "node_modules/@lit/reactive-element": {
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.6.3.tgz",
+      "integrity": "sha512-QuTgnG52Poic7uM1AN5yJ09QMe0O28e10XzSvWDz02TJiiKee4stsiownEIadWm8nYzyDAyT+gKzUoZmiWQtsQ==",
+      "dev": true,
+      "dependencies": {
+        "@lit-labs/ssr-dom-shim": "^1.0.0"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -847,6 +876,12 @@
       "integrity": "sha512-7aqorHYgdNO4DM36stTiGO3DvKoex9TQRwsJU6vMaFGyqpBA1MNZkz+PG3gaNUPpTAOYhT1WR7M1JyA3fbS9Cw==",
       "dev": true
     },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "dev": true
+    },
     "node_modules/@types/web-bluetooth": {
       "version": "0.0.18",
       "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.18.tgz",
@@ -1701,6 +1736,18 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/dotenv": {
+      "version": "16.3.1",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.3.1.tgz",
+      "integrity": "sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/motdotla/dotenv?sponsor=1"
+      }
+    },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -2155,6 +2202,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/giscus": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/giscus/-/giscus-1.3.0.tgz",
+      "integrity": "sha512-A3tVLgSmpnh2sX9uGjo9MbzmTTEJirSyFUPRvkipvy37y9rhxUYDoh9kO37QVrP7Sc7QuJ+gihB6apkO0yDyTw==",
+      "dev": true,
+      "dependencies": {
+        "lit": "^2.7.5"
+      }
+    },
     "node_modules/glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -2545,6 +2601,37 @@
         "node": ">=16.0.0"
       }
     },
+    "node_modules/lit": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/lit/-/lit-2.8.0.tgz",
+      "integrity": "sha512-4Sc3OFX9QHOJaHbmTMk28SYgVxLN3ePDjg7hofEft2zWlehFL3LiAuapWc4U/kYwMYJSh2hTCPZ6/LIC7ii0MA==",
+      "dev": true,
+      "dependencies": {
+        "@lit/reactive-element": "^1.6.0",
+        "lit-element": "^3.3.0",
+        "lit-html": "^2.8.0"
+      }
+    },
+    "node_modules/lit-element": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.3.3.tgz",
+      "integrity": "sha512-XbeRxmTHubXENkV4h8RIPyr8lXc+Ff28rkcQzw3G6up2xg5E8Zu1IgOWIwBLEQsu3cOVFqdYwiVi0hv0SlpqUA==",
+      "dev": true,
+      "dependencies": {
+        "@lit-labs/ssr-dom-shim": "^1.1.0",
+        "@lit/reactive-element": "^1.3.0",
+        "lit-html": "^2.8.0"
+      }
+    },
+    "node_modules/lit-html": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.8.0.tgz",
+      "integrity": "sha512-o9t+MQM3P4y7M7yNzqAyjp7z+mQGa4NS4CxiyLqFPyFWyc4O+nodLrkrxSaCTrla6M5YOLaT3RpbbqjszB5g3Q==",
+      "dev": true,
+      "dependencies": {
+        "@types/trusted-types": "^2.0.2"
+      }
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
diff --git a/package.json b/package.json
index 152143f..3321757 100644
--- a/package.json
+++ b/package.json
@@ -30,9 +30,11 @@
   },
   "homepage": "https://github.com/Octobug/blog#readme",
   "devDependencies": {
+    "@giscus/vue": "^2.3.0",
     "@types/node": "^20.8.10",
     "@typescript-eslint/eslint-plugin": "^6.7.2",
     "@typescript-eslint/parser": "^6.7.2",
+    "dotenv": "^16.3.1",
     "eslint": "^8.50.0",
     "eslint-plugin-vue": "^9.17.0",
     "husky": "^8.0.3",