diff --git a/package-lock.json b/package-lock.json
index 64957df..cb7cc88 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,7 +20,8 @@
         "katex": "^0.16.6",
         "normalize.css": "^8.0.1",
         "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "react-dom": "^18.2.0",
+        "remark-frontmatter": "^4.0.1"
       },
       "devDependencies": {
         "@bspeice/vite-plugin-blog": "^1.1.0",
@@ -33,6 +34,7 @@
         "rehype-highlight": "^6.0.0",
         "rehype-katex": "^6.0.3",
         "remark-math": "^5.1.1",
+        "remark-mdx-frontmatter": "^3.0.0",
         "typescript": "^4.9.3",
         "vite": "^4.2.0"
       }
@@ -828,7 +830,6 @@
       "version": "3.0.11",
       "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.11.tgz",
       "integrity": "sha512-Y/uImid8aAwrEA24/1tcRZwpxX3pIFTSilcNDKSPn+Y2iDywSEachzRuvgAYYLR3wpGXAsMbv5lvKLDZLeYPAw==",
-      "dev": true,
       "dependencies": {
         "@types/unist": "*"
       }
@@ -890,8 +891,7 @@
     "node_modules/@types/unist": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz",
-      "integrity": "sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==",
-      "dev": true
+      "integrity": "sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ=="
     },
     "node_modules/@vitejs/plugin-react-swc": {
       "version": "3.3.0",
@@ -981,7 +981,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz",
       "integrity": "sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==",
-      "dev": true,
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
@@ -1030,7 +1029,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-2.0.2.tgz",
       "integrity": "sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==",
-      "dev": true,
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
@@ -1148,7 +1146,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.0.2.tgz",
       "integrity": "sha512-O8x12RzrUF8xyVcY0KJowWsmaJxQbmy0/EtnNtHRpsOcT7dFk5W598coHqBVpmWo1oQQfsCqfCmkZN5DJrZVdg==",
-      "dev": true,
       "dependencies": {
         "character-entities": "^2.0.0"
       },
@@ -1286,6 +1283,22 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/estree-util-value-to-estree": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/estree-util-value-to-estree/-/estree-util-value-to-estree-3.0.1.tgz",
+      "integrity": "sha512-b2tdzTurEIbwRh+mKrEcaWfu1wgb8J1hVsgREg7FFiecWwK/PhO8X0kyc+0bIcKNtD4sqxIdNoRy6/p/TvECEA==",
+      "dev": true,
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "is-plain-obj": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/remcohaszing"
+      }
+    },
     "node_modules/estree-util-visit": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/estree-util-visit/-/estree-util-visit-1.2.1.tgz",
@@ -1335,14 +1348,12 @@
     "node_modules/extend": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
-      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
-      "dev": true
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
     },
     "node_modules/fault": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/fault/-/fault-2.0.1.tgz",
       "integrity": "sha512-WtySTkS4OKev5JtpHXnib4Gxiurzh5NCGvWrFaZ34m6JehfTUhKZvn9njTfw48t6JumVQOmrKqpmGcdwxnhqBQ==",
-      "dev": true,
       "dependencies": {
         "format": "^0.2.0"
       },
@@ -1368,7 +1379,6 @@
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/format/-/format-0.2.2.tgz",
       "integrity": "sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==",
-      "dev": true,
       "engines": {
         "node": ">=0.4.x"
       }
@@ -1666,7 +1676,6 @@
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.5.tgz",
       "integrity": "sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -1721,7 +1730,6 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
       "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==",
-      "dev": true,
       "engines": {
         "node": ">=12"
       },
@@ -1801,7 +1809,6 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-3.1.0.tgz",
       "integrity": "sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==",
-      "dev": true,
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
@@ -1881,6 +1888,20 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/mdast-util-frontmatter": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-frontmatter/-/mdast-util-frontmatter-1.0.1.tgz",
+      "integrity": "sha512-JjA2OjxRqAa8wEG8hloD0uTU0kdn8kbtOWpPP94NBkfAlbxn4S8gCGf/9DwFtEeGPXrDcNXdiDjVaRdUFqYokw==",
+      "dependencies": {
+        "@types/mdast": "^3.0.0",
+        "mdast-util-to-markdown": "^1.3.0",
+        "micromark-extension-frontmatter": "^1.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/mdast-util-math": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/mdast-util-math/-/mdast-util-math-2.0.2.tgz",
@@ -1975,7 +1996,6 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/mdast-util-phrasing/-/mdast-util-phrasing-3.0.1.tgz",
       "integrity": "sha512-WmI1gTXUBJo4/ZmSk79Wcb2HcjPJBzM1nlI/OUWA8yk2X9ik3ffNbBGsU+09BFmXaL1IBb9fiuvq6/KMiNycSg==",
-      "dev": true,
       "dependencies": {
         "@types/mdast": "^3.0.0",
         "unist-util-is": "^5.0.0"
@@ -2009,7 +2029,6 @@
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/mdast-util-to-markdown/-/mdast-util-to-markdown-1.5.0.tgz",
       "integrity": "sha512-bbv7TPv/WC49thZPg3jXuqzuvI45IL2EVAr/KxF0BSdHsU0ceFHOmwQn6evxAh1GaoK/6GQ1wp4R4oW2+LFL/A==",
-      "dev": true,
       "dependencies": {
         "@types/mdast": "^3.0.0",
         "@types/unist": "^2.0.0",
@@ -2029,7 +2048,6 @@
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-3.2.0.tgz",
       "integrity": "sha512-V4Zn/ncyN1QNSqSBxTrMOLpjr+IKdHl2v3KVLoWmDPscP4r9GcCi71gjgvUV1SFSKh92AjAG4peFuBl2/YgCJg==",
-      "dev": true,
       "dependencies": {
         "@types/mdast": "^3.0.0"
       },
@@ -2113,6 +2131,21 @@
         "uvu": "^0.5.0"
       }
     },
+    "node_modules/micromark-extension-frontmatter": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-frontmatter/-/micromark-extension-frontmatter-1.1.0.tgz",
+      "integrity": "sha512-0nLelmvXR5aZ+F2IL6/Ed4cDnHLpL/VD/EELKuclsTWHrLI8UgxGHEmeoumeX2FXiM6z2WrBIOEcbKUZR8RYNg==",
+      "dependencies": {
+        "fault": "^2.0.0",
+        "micromark-util-character": "^1.0.0",
+        "micromark-util-symbol": "^1.0.0",
+        "micromark-util-types": "^1.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/micromark-extension-math": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/micromark-extension-math/-/micromark-extension-math-2.1.0.tgz",
@@ -2375,7 +2408,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-1.1.0.tgz",
       "integrity": "sha512-agJ5B3unGNJ9rJvADMJ5ZiYjBRyDpzKAOk01Kpi1TKhlT1APx3XZk6eN7RtSz1erbWHC2L8T3xLZ81wdtGRZzg==",
-      "dev": true,
       "funding": [
         {
           "type": "GitHub Sponsors",
@@ -2455,7 +2487,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/micromark-util-decode-numeric-character-reference/-/micromark-util-decode-numeric-character-reference-1.0.0.tgz",
       "integrity": "sha512-OzO9AI5VUtrTD7KSdagf4MWgHMtET17Ua1fIpXTpuhclCqD8egFWo85GxSGvxgkGS74bEahvtM0WP0HjvV0e4w==",
-      "dev": true,
       "funding": [
         {
           "type": "GitHub Sponsors",
@@ -2474,7 +2505,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/micromark-util-decode-string/-/micromark-util-decode-string-1.0.2.tgz",
       "integrity": "sha512-DLT5Ho02qr6QWVNYbRZ3RYOSSWWFuH3tJexd3dgN1odEuPNxCngTCXJum7+ViRAd9BbdxCvMToPOD/IvVhzG6Q==",
-      "dev": true,
       "funding": [
         {
           "type": "GitHub Sponsors",
@@ -2634,7 +2664,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-1.0.1.tgz",
       "integrity": "sha512-oKDEMK2u5qqAptasDAwWDXq0tG9AssVwAx3E9bBF3t/shRIGsWIRG+cGafs2p/SnDSOecnt6hZPCE2o6lHfFmQ==",
-      "dev": true,
       "funding": [
         {
           "type": "GitHub Sponsors",
@@ -2650,7 +2679,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-1.0.2.tgz",
       "integrity": "sha512-DCfg/T8fcrhrRKTPjRrw/5LLvdGV7BHySf/1LOZx7TzWZdYRjogNtyNq885z3nNallwr3QUKARjqvHqX1/7t+w==",
-      "dev": true,
       "funding": [
         {
           "type": "GitHub Sponsors",
@@ -3090,6 +3118,21 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/remark-frontmatter": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/remark-frontmatter/-/remark-frontmatter-4.0.1.tgz",
+      "integrity": "sha512-38fJrB0KnmD3E33a5jZC/5+gGAC2WKNiPw1/fdXJvijBlhA7RCsvJklrYJakS0HedninvaCYW8lQGf9C918GfA==",
+      "dependencies": {
+        "@types/mdast": "^3.0.0",
+        "mdast-util-frontmatter": "^1.0.0",
+        "micromark-extension-frontmatter": "^1.0.0",
+        "unified": "^10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/remark-math": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/remark-math/-/remark-math-5.1.1.tgz",
@@ -3120,6 +3163,26 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/remark-mdx-frontmatter": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/remark-mdx-frontmatter/-/remark-mdx-frontmatter-3.0.0.tgz",
+      "integrity": "sha512-Tnkz8n/fxZGKMBaFJa5jKumJPpuTr9eZF+u+4UcnlUNmUQP3h8ZwgaTzIvkVb6QjG6QE0itsP5JjWnkEBz8IJw==",
+      "dev": true,
+      "dependencies": {
+        "@types/mdast": "^3.0.0",
+        "estree-util-is-identifier-name": "^2.0.0",
+        "estree-util-value-to-estree": "^3.0.0",
+        "toml": "^3.0.0",
+        "unified": "^10.0.0",
+        "yaml": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/remcohaszing"
+      }
+    },
     "node_modules/remark-parse": {
       "version": "10.0.1",
       "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-10.0.1.tgz",
@@ -3315,6 +3378,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/toml": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/toml/-/toml-3.0.0.tgz",
+      "integrity": "sha512-y/mWCZinnvxjTKYhJ+pYxwD0mRLVvOtdS2Awbgxln6iEnt4rk0yBxeSBHkGJcPucRiG0e55mwWp+g/05rsrd6w==",
+      "dev": true
+    },
     "node_modules/trim-lines": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz",
@@ -3329,7 +3398,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/trough/-/trough-2.1.0.tgz",
       "integrity": "sha512-AqTiAOLcj85xS7vQ8QkAV41hPDIJ71XJB4RCUrzo/1GM2CQwhkJGaf9Hgr7BOugMRpgGUrqRg/DrBDl4H40+8g==",
-      "dev": true,
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
@@ -3352,7 +3420,6 @@
       "version": "10.1.2",
       "resolved": "https://registry.npmjs.org/unified/-/unified-10.1.2.tgz",
       "integrity": "sha512-pUSWAi/RAnVy1Pif2kAoeWNBa3JVrx0MId2LASj8G+7AiHWoKZNTomq6LG326T68U7/e263X6fTdcXIy7XnF7Q==",
-      "dev": true,
       "dependencies": {
         "@types/unist": "^2.0.0",
         "bail": "^2.0.0",
@@ -3395,7 +3462,6 @@
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-5.2.1.tgz",
       "integrity": "sha512-u9njyyfEh43npf1M+yGKDGVPbY/JWEemg5nH05ncKPfi+kBbKBJoTdsogMu33uhytuLlv9y0O7GH7fEdwLdLQw==",
-      "dev": true,
       "dependencies": {
         "@types/unist": "^2.0.0"
       },
@@ -3448,7 +3514,6 @@
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-3.0.3.tgz",
       "integrity": "sha512-k5GzIBZ/QatR8N5X2y+drfpWG8IDBzdnVj6OInRNWm1oXrzydiaAT2OQiA8DPRRZyAKb9b6I2a6PxYklZD0gKg==",
-      "dev": true,
       "dependencies": {
         "@types/unist": "^2.0.0"
       },
@@ -3461,7 +3526,6 @@
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-4.1.2.tgz",
       "integrity": "sha512-MSd8OUGISqHdVvfY9TPhyK2VdUrPgxkUtWSuMHF6XAAFuL4LokseigBnZtPnJMu+FbynTkFNnFlyjxpVKujMRg==",
-      "dev": true,
       "dependencies": {
         "@types/unist": "^2.0.0",
         "unist-util-is": "^5.0.0",
@@ -3476,7 +3540,6 @@
       "version": "5.1.3",
       "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-5.1.3.tgz",
       "integrity": "sha512-x6+y8g7wWMyQhL1iZfhIPhDAs7Xwbn9nRosDXl7qoPTSCy0yNxnKc+hWokFifWQIDGi154rdUqKvbCa4+1kLhg==",
-      "dev": true,
       "dependencies": {
         "@types/unist": "^2.0.0",
         "unist-util-is": "^5.0.0"
@@ -3508,7 +3571,6 @@
       "version": "5.3.7",
       "resolved": "https://registry.npmjs.org/vfile/-/vfile-5.3.7.tgz",
       "integrity": "sha512-r7qlzkgErKjobAmyNIkkSpizsFPYiUPuJb5pNW1RB4JcYVZhs4lIbVqk8XPk033CV/1z8ss5pkax8SuhGpcG8g==",
-      "dev": true,
       "dependencies": {
         "@types/unist": "^2.0.0",
         "is-buffer": "^2.0.0",
@@ -3538,7 +3600,6 @@
       "version": "3.1.4",
       "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-3.1.4.tgz",
       "integrity": "sha512-fa0Z6P8HUrQN4BZaX05SIVXic+7kE3b05PWAtPuYP9QLHsLKYR7/AlLW3NtOrpXRLeawpDLMsVkmk5DG0NXgWw==",
-      "dev": true,
       "dependencies": {
         "@types/unist": "^2.0.0",
         "unist-util-stringify-position": "^3.0.0"
@@ -3628,11 +3689,19 @@
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
       "dev": true
     },
+    "node_modules/yaml": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.2.2.tgz",
+      "integrity": "sha512-CBKFWExMn46Foo4cldiChEzn7S7SRV+wqiluAb6xmueD/fGyRHIhX8m14vVGgeFWjN540nKCNVj6P21eQjgTuA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/zwitch": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
       "integrity": "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==",
-      "dev": true,
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
diff --git a/package.json b/package.json
index 956002e..72ccb11 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,8 @@
     "katex": "^0.16.6",
     "normalize.css": "^8.0.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "remark-frontmatter": "^4.0.1"
   },
   "devDependencies": {
     "@bspeice/vite-plugin-blog": "^1.1.0",
@@ -35,6 +36,7 @@
     "rehype-highlight": "^6.0.0",
     "rehype-katex": "^6.0.3",
     "remark-math": "^5.1.1",
+    "remark-mdx-frontmatter": "^3.0.0",
     "typescript": "^4.9.3",
     "vite": "^4.2.0"
   }
diff --git a/pages/LayoutBase.tsx b/pages/LayoutBase.tsx
index 6f52c01..1bdd837 100644
--- a/pages/LayoutBase.tsx
+++ b/pages/LayoutBase.tsx
@@ -1,22 +1,7 @@
 import { PropsWithChildren, StrictMode } from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faHome, faUser } from "@fortawesome/free-solid-svg-icons";
 
 import "./style.css";
-
-const Navbar: React.FC = () => (
-  <span className="navbar">
-    <a href="/">
-      <FontAwesomeIcon icon={faHome} className="icon" />
-      Home
-    </a>
-    <span>/</span>
-    <a href="/about">
-      <FontAwesomeIcon icon={faUser} className="icon" />
-      About
-    </a>
-  </span>
-);
+import Navbar from "./Navbar";
 
 const Layout: React.FC<PropsWithChildren> = ({ children }) => (
   <StrictMode>
diff --git a/pages/Navbar.tsx b/pages/Navbar.tsx
new file mode 100644
index 0000000..a9796e2
--- /dev/null
+++ b/pages/Navbar.tsx
@@ -0,0 +1,18 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faHome, faUser } from "@fortawesome/free-solid-svg-icons";
+
+const Navbar: React.FC = () => (
+  <span className="navbar">
+    <a href="/">
+      <FontAwesomeIcon icon={faHome} className="icon" />
+      Home
+    </a>
+    <span>/</span>
+    <a href="/about">
+      <FontAwesomeIcon icon={faUser} className="icon" />
+      About
+    </a>
+  </span>
+);
+
+export default Navbar;
diff --git a/posts/2019/02/the-whole-world.mdx b/posts/2019/02/the-whole-world.mdx
index 7a75288..28e4590 100644
--- a/posts/2019/02/the-whole-world.mdx
+++ b/posts/2019/02/the-whole-world.mdx
@@ -1,9 +1,11 @@
+---
+title: "Global Memory Usage: The Whole World"
+description: Static considered slightly less harmful.
+published: 2019-02-05
+---
+
 import Blog from "../../LayoutBlog";
-export default Blog({
-  title: "Global Memory Usage: The Whole World",
-  description: "Static considered slightly less harmful.",
-  published: "2019-02-05",
-});
+export default Blog(frontmatter);
 
 $m_at^h$
 
diff --git a/vite.config.ts b/vite.config.ts
index 239e3c4..7fcbed8 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -4,7 +4,9 @@ import mdx from "@mdx-js/rollup";
 import react from "@vitejs/plugin-react-swc";
 import rehypeHighlight from "rehype-highlight";
 import rehypeKatex from "rehype-katex";
+import remarkFrontmatter from "remark-frontmatter";
 import remarkMath from "remark-math";
+import remarkMdxFrontmatter from "remark-mdx-frontmatter";
 
 export default defineConfig({
   build: {
@@ -19,7 +21,7 @@ export default defineConfig({
       "/2019/02/the-whole-world": "/posts/2019/02/the-whole-world.mdx",
     }),
     mdx({
-      remarkPlugins: [remarkMath],
+      remarkPlugins: [remarkFrontmatter, remarkMath, remarkMdxFrontmatter],
       rehypePlugins: [rehypeHighlight, rehypeKatex],
       providerImportSource: "@mdx-js/react",
     }),