diff --git a/docs/markdowns/api-doc/components.md b/docs/markdowns/docs/components.md
similarity index 100%
rename from docs/markdowns/api-doc/components.md
rename to docs/markdowns/docs/components.md
diff --git a/docs/markdowns/api-doc/introduction.md b/docs/markdowns/docs/index.md
similarity index 100%
rename from docs/markdowns/api-doc/introduction.md
rename to docs/markdowns/docs/index.md
diff --git a/docs/markdowns/api-doc/installation.md b/docs/markdowns/docs/installation.md
similarity index 100%
rename from docs/markdowns/api-doc/installation.md
rename to docs/markdowns/docs/installation.md
diff --git a/docs/markdowns/api-doc/references.md b/docs/markdowns/docs/references.md
similarity index 100%
rename from docs/markdowns/api-doc/references.md
rename to docs/markdowns/docs/references.md
diff --git a/docs/pages/components.js b/docs/pages/components.js
deleted file mode 100644
index 916f667a..00000000
--- a/docs/pages/components.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import Link from 'next/link'
-import path from 'path'
-
-import Layout from '../components/layout'
-import Prose from '../components/prose'
-import { formatMD } from '../lib/utils'
-
-export default function Docs({ mdFile }) {
-  return (
-    <Layout title="Portal.js API Documentation">
-      <Prose mdFile={mdFile}>
-        <p className="text-center">
-          <Link href="/components">
-            <button>Next Page</button>
-          </Link>
-        </p>
-      </Prose>
-    </Layout>
-  )
-}
-
-
-export async function getStaticProps() {
-    const mdFilePath = path.join(process.cwd(), "markdowns/api-doc/installation.md")
-    const mdFile = await formatMD(mdFilePath)
-    return {
-        props: {
-            mdFile
-        }
-    }
-}
diff --git a/docs/pages/docs.js b/docs/pages/docs.js
deleted file mode 100644
index b8d60e15..00000000
--- a/docs/pages/docs.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import Link from 'next/link'
-import path from 'path'
-
-import Layout from '../components/layout'
-import Prose from '../components/prose'
-import { formatMD } from '../lib/utils'
-
-export default function Docs({ mdFile }) {
-  return (
-    <Layout title="Portal.js API Documentation">
-      <Prose mdFile={mdFile}>
-        <p className="text-center">
-          <Link href="/installation">
-            <button>Next Page</button>
-          </Link>
-        </p>
-      </Prose>
-    </Layout>
-  )
-}
-
-
-export async function getStaticProps() {
-  const mdFilePath = path.join(process.cwd(), "markdowns/api-doc/introduction.md")
-  const mdFile = await formatMD(mdFilePath)
-  return {
-    props: {
-      mdFile
-    }
-  }
-}
diff --git a/docs/pages/docs/[[...id]].js b/docs/pages/docs/[[...id]].js
new file mode 100644
index 00000000..d963de48
--- /dev/null
+++ b/docs/pages/docs/[[...id]].js
@@ -0,0 +1,57 @@
+import path from 'path'
+import * as fs from 'fs'
+import Link from 'next/link'
+
+import Layout from '../../components/layout'
+import Prose from '../../components/prose'
+import { formatMD } from '../../lib/utils'
+
+export default function Docs({ title, mdFile }) {
+  return (
+    <Layout title="Portal.js Documentation - {title}">
+      <Prose mdFile={mdFile}>
+        <p className="text-center">
+          <Link href="/installation">
+            <button>Next Page</button>
+          </Link>
+        </p>
+      </Prose>
+    </Layout>
+  )
+}
+
+const postsDirectory = 'markdowns/docs'
+
+export async function getStaticProps({params}) {
+  const postId = params.id ? params.id : 'index'
+  const mdFilePath = path.join(postsDirectory, postId + '.md')
+  const mdFile = await formatMD(mdFilePath)
+  return {
+    props: {
+      mdFile
+    }
+  }
+}
+
+export async function getStaticPaths() {
+  const fileNames = fs.readdirSync(postsDirectory)
+  const paths = fileNames.map(fileName => {
+    if (fileName == 'index.md') {
+      return {
+        params: {
+          id: null
+        }
+      }
+    } else {
+      return {
+        params: {
+          id: [ fileName.replace(/\.md$/, '') ]
+        }
+      }
+    }
+  })
+  return {
+    paths: paths,
+    fallback: false
+  }
+}
diff --git a/docs/pages/installation.js b/docs/pages/installation.js
deleted file mode 100644
index 037b8b6f..00000000
--- a/docs/pages/installation.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import Link from 'next/link'
-import path from 'path'
-
-import Layout from '../components/layout'
-import Prose from '../components/prose'
-import { formatMD } from '../lib/utils'
-
-export default function Docs({ mdFile }) {
-  return (
-    <Layout title="Portal.js Installation">
-      <Prose mdFile={mdFile}>
-        <p className="text-center">
-          <Link href="/references">
-            <button>Next Page</button>
-          </Link>
-        </p>
-      </Prose>
-    </Layout>
-  )
-}
-
-
-export async function getStaticProps() {
-    const mdFilePath = path.join(process.cwd(), "markdowns/api-doc/installation.md")
-    const mdFile = await formatMD(mdFilePath)
-    return {
-        props: {
-            mdFile
-        }
-    }
-}
diff --git a/docs/pages/references.js b/docs/pages/references.js
deleted file mode 100644
index 9da8eb2c..00000000
--- a/docs/pages/references.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import Link from 'next/link'
-import path from 'path'
-
-import Layout from '../components/layout'
-import Prose from '../components/prose'
-import { formatMD } from '../lib/utils'
-
-export default function Docs({ mdFile }) {
-  return (
-    <Layout title="Portal.js Reference Documentation">
-      <Prose mdFile={mdFile}>
-      </Prose>
-    </Layout>
-  )
-}
-
-
-
-export async function getStaticProps() {
-    const mdFilePath = path.join(process.cwd(), "markdowns/api-doc/references.md")
-    const mdFile = await formatMD(mdFilePath)
-    return {
-        props: {
-            mdFile
-        }
-    }
-}