diff --git a/aio/package.json b/aio/package.json
index 7ff69839ff..0c0bfcec4f 100644
--- a/aio/package.json
+++ b/aio/package.json
@@ -88,6 +88,7 @@
     "classlist.js": "^1.1.20150312",
     "core-js": "^2.4.1",
     "jasmine": "^2.6.0",
+    "klaw-sync": "^5.0.0",
     "mkdirp": "^0.5.1",
     "ng-pwa-tools": "^0.0.10",
     "rxjs": "6.0.0-uncanny-rc.7",
diff --git a/aio/tools/translator/bin/ssr.ts b/aio/tools/translator/bin/ssr.ts
index dfc680f478..c26f27c794 100644
--- a/aio/tools/translator/bin/ssr.ts
+++ b/aio/tools/translator/bin/ssr.ts
@@ -1,33 +1,55 @@
 import * as fs from 'fs';
 import * as mkdirp from 'mkdirp';
 import * as path from 'path';
+import * as klawSync from 'klaw-sync';
 
-function buildInnerPages(): void {
+const rootElementPattern = /<aio-shell\b[\s\S]*<\/aio-shell>/;
+
+const indexTemplate = fs.readFileSync('./dist/index.html', 'utf-8');
+const aioShellTemplate = fs.readFileSync(__dirname + '/../assets/aio-shell-template.html');
+const pageTemplate = indexTemplate.replace(rootElementPattern, `${aioShellTemplate}`);
+
+function composePage(url) {
+  const { title, contents } = JSON.parse(fs.readFileSync(`./dist/generated/docs/${url}.json`, 'utf-8'));
+
+  if (!contents) {
+    return;
+  }
+  const ssrContent = contents.replace(/href="(?!http)(.{2,}?)"/gi, 'href="/$1"');
+  const pageContent = pageTemplate
+    .replace('<title>Angular Docs</title>', `<title>${title} - Angular 官方文档</title>`)
+    .replace('<aio-page-content-placeholder></aio-page-content-placeholder>', ssrContent);
+  mkdirp.sync(path.dirname(`./dist/${url}`));
+  fs.writeFileSync(`./dist/${url}.html`, pageContent, 'utf-8');
+}
+
+function buildGuidePages(): void {
   const navigation = fs.readFileSync('./content/navigation.json', 'utf-8');
-  const indexTemplate = fs.readFileSync('./dist/index.html', 'utf-8');
-  const aioShellTemplate = fs.readFileSync(__dirname + '/../assets/aio-shell-template.html');
-  const pageTemplate = indexTemplate.replace('<aio-shell></aio-shell>', `${aioShellTemplate}`);
-  const urls = navigation.match(/"url": "(.*?)"/g)
+  navigation.match(/"url": "(.*?)"/g)
     .map((entry) => entry.replace(/^"url": "(.*?)".*$/, '$1'))
     .filter(url => url.slice(0, 4) !== 'http')
-    .forEach(url => {
-      const generated: { title: string, contents: string } = JSON.parse(fs.readFileSync(`./dist/generated/docs/${url}.json`, 'utf-8'));
+    .forEach(url => composePage(url));
+}
 
-      const content = generated.contents.replace(/href="(?!http)(.{2,}?)"/gi, 'href="/$1"');
-      const pageContent = pageTemplate
-        .replace('<title>Angular Docs</title>', `<title>${generated.title} - Angular 官方文档</title>`)
-        .replace('<aio-page-content-placeholder></aio-page-content-placeholder>', content);
-      mkdirp.sync(path.dirname(`./dist/${url}`));
-      fs.writeFileSync(`./dist/${url}.html`, pageContent, 'utf-8');
-    });
+function buildApiPages(): void {
+  const apiList = klawSync('./dist/generated/docs/api', { nodir: true })
+    .map(file => file.path.replace(/^.*generated\/docs(\/.*).json$/, '$1'));
+  apiList.forEach(url => composePage(url));
+
+  const links = apiList.map(url => `<a href="${url}">${url}</a>`).join('\n');
+  const apiListContent = fs.readFileSync('./dist/api.html', 'utf-8')
+    .replace(rootElementPattern, `<aio-shell><h3>API List</h3>${links}</aio-shell>`);
+
+  fs.writeFileSync(`./dist/api.html`, apiListContent, 'utf-8');
 }
 
 function buildIndexPage(): void {
   const indexTemplate = fs.readFileSync('./dist/index.html', 'utf-8');
   const aioShellIndex = fs.readFileSync(__dirname + '/../assets/aio-shell-index.html');
-  const content = indexTemplate.replace('<aio-shell></aio-shell>', `${aioShellIndex}`);
+  const content = indexTemplate.replace(rootElementPattern, `${aioShellIndex}`);
   fs.writeFileSync(`./dist/index.html`, content, 'utf-8');
 }
 
-buildInnerPages();
+buildGuidePages();
+buildApiPages();
 buildIndexPage();
diff --git a/aio/yarn.lock b/aio/yarn.lock
index dc6ca0a7c4..844145fb44 100644
--- a/aio/yarn.lock
+++ b/aio/yarn.lock
@@ -6245,6 +6245,12 @@ kind-of@^6.0.0, kind-of@^6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.2.tgz#01146b36a6218e64e58f3a8d66de5d7fc6f6d051"
 
+klaw-sync@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/klaw-sync/-/klaw-sync-5.0.0.tgz#b8db1249f96a82751c311ee8a626a319db119904"
+  dependencies:
+    graceful-fs "^4.1.11"
+
 klaw@^1.0.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/klaw/-/klaw-1.3.1.tgz#4088433b46b3b1ba259d78785d8e96f73ba02439"
@@ -6974,13 +6980,7 @@ mkdirp-promise@^5.0.0:
   dependencies:
     mkdirp "*"
 
-mkdirp@*, mkdirp@0.5.1, mkdirp@0.5.x, mkdirp@0.x.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@~0.5.0:
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
-  dependencies:
-    minimist "0.0.8"
-
-mkdirp@^0.5.1:
+mkdirp@*, mkdirp@0.5.1, mkdirp@0.5.x, mkdirp@0.x.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0:
   version "0.5.1"
   resolved "http://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
   dependencies: