diff --git a/.gitignore b/.gitignore
index ba53aac..811039c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -32,3 +32,4 @@ tools/dict/error.log
 coverage/
 package-lock.json
 yarn.lock
+.umi/
diff --git a/.umirc.js b/.umirc.js
new file mode 100644
index 0000000..5323b91
--- /dev/null
+++ b/.umirc.js
@@ -0,0 +1,41 @@
+// import { readdirSync } from 'fs';
+// import { join } from 'path';
+import { defineConfig } from 'dumi';
+
+// const headPkgList = [];
+// // utils must build before core
+// // runtime must build before renderer-react
+// const pkgList = readdirSync(join(__dirname, 'packages')).filter(
+//   (pkg) => pkg.charAt(0) !== '.' && !headPkgList.includes(pkg),
+// );
+// const alias = pkgList.reduce((pre, pkg) => {
+//   pre[`@alipay/${pkg}`] = join(__dirname, 'packages', pkg, 'src');
+//   return {
+//     ...pre,
+//   };
+// }, {});
+
+export default defineConfig({
+  title: 'pīnyīn',
+  favicon:
+    'https://gw.alipayobjects.com/mdn/rms_f6322a/afts/img/A*VqPXS4ODZTMAAAAAAAAAAAAAARQnAQ',
+  logo:
+    'https://gw.alipayobjects.com/mdn/rms_f6322a/afts/img/A*bGz9QbNudekAAAAAAAAAAAAAARQnAQ',
+  outputPath: 'docs-dist/dist',
+  mode: 'site',
+  exportStatic: {},
+  hash: true,
+  resolve: {
+    includes: ['.'],
+  },
+  locales: [
+    ['zh-CN', '中文'],
+    ['en-US', 'English'],
+  ],
+  // Because of using GitHub Pages
+  base: '/',
+  publicPath: '/',
+  // alias,
+  mfsu: {},
+  // more config: https://d.umijs.org/config
+});
diff --git a/CHANGELOG.md b/CHANGELOG.md
index a4521d1..88e2c93 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,7 @@
 # CHANGELOG
 
+----
+
 ## 2.10.2 (2021-04-11)
 
 - feat(cli): pinyin cli support group by phrases.
diff --git a/examples/index.md b/EXAMPLE.md
similarity index 55%
rename from examples/index.md
rename to EXAMPLE.md
index 233a33d..2eae1ae 100644
--- a/examples/index.md
+++ b/EXAMPLE.md
@@ -1,12 +1,12 @@
 # 演示文档
 
----
+----
 
 <style>
 textarea{width:90%; height:100px;}
 </style>
 
-### 输入[汉字](?han= 简体中文汉字)
+### 输入[汉字](?han=%E7%AE%80%E4%BD%93%E4%B8%AD%E6%96%87%E6%B1%89%E5%AD%97)
 
 <div>
   <textarea id="input"></textarea>
@@ -31,33 +31,34 @@ textarea{width:90%; height:100px;}
 </div>
 
 
-<script type="text/spm">
-var pinyin = require('pinyin');
-//var Url = require('url');
+```jsx
+import pinyin from 'pinyin';
+import Url from 'aurl';
 
-var $ = function(id){return document.getElementById(id);}
-var styles = document.getElementsByName("style");
-//var han = new Url(location.href).getParam("han");
-var han = "中文"
+setTimeout(function() {
+  var $$ = function(id){return document.getElementById(id);}
+  var styles = document.getElementsByName("style");
+  var han = new Url(location.href).getParam("han") || '中文';
 
-function build(){
-  var han = $("input").value;
-  var style = "STYLE_TONE";
-  for(var i=0,l=styles.length; i<l; i++){
-    if(styles[i].checked){
-      style = styles[i].value;
+  function build(){
+    var han = $$("input").value;
+    var style = "STYLE_TONE";
+    for(var i=0,l=styles.length; i<l; i++){
+      if(styles[i].checked){
+        style = styles[i].value;
+      }
     }
+    $$("output").value = pinyin(han, {
+      style: pinyin[style]
+    }).join(" ");
+  };
+
+  $$("input").onkeyup = build;
+  for(var i=0,l=styles.length; i<l; i++){
+    styles[i].onclick = build;
   }
-  $("output").value = pinyin(han, {
-    style: pinyin[style]
-  }).join(" ");
-};
-
-$("input").onkeyup = build;
-for(var i=0,l=styles.length; i<l; i++){
-  styles[i].onclick = build;
-}
-
-$("input").value = han;
-build();
-</script>
+
+  $$("input").value = han;
+  build();
+}, 100);
+```
diff --git a/README-us_EN.md b/README.en-US.md
similarity index 100%
rename from README-us_EN.md
rename to README.en-US.md
diff --git a/README.md b/README.md
index a5e9502..43ac6c1 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,8 @@
-# 汉字拼音转换工具。
+# README
 
----
+pinyin, 汉字拼音转换工具。
+
+----
 
 [![NPM version][npm-badge]][npm-url]
 [![Build Status][build-badge]][build-url]
@@ -27,7 +29,7 @@
 >
 > Python 版请关注 [mozillazg/python-pinyin](https://github.com/mozillazg/python-pinyin)
 
----
+----
 
 ## 特性
 
@@ -41,7 +43,7 @@
 via npm:
 
 ```bash
-npm install pinyin
+npm install pinyin --save
 ```
 
 ## 用法
@@ -170,7 +172,7 @@ wǒ xǐhuān nǐ
 
 ## Test
 
-```
+```bash
 npm test
 ```
 
@@ -205,7 +207,7 @@ const sortedData = data.sort(pinyin.compare);
 
 如果默认的比较方法不能满足你的需求，你可以自定义 pinyinCompare 方法：
 
-```
+```js
 const pinyin = require('pinyin');
 
 const data = '我要排序'.split('');
diff --git a/assets/pinyin-favicon.png b/assets/pinyin-favicon.png
new file mode 100644
index 0000000..c7b7543
Binary files /dev/null and b/assets/pinyin-favicon.png differ
diff --git a/assets/pinyin.png b/assets/pinyin.png
new file mode 100644
index 0000000..4397d9d
Binary files /dev/null and b/assets/pinyin.png differ
diff --git a/package.json b/package.json
index 0ad538a..7e179e4 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,9 @@
     "url": "https://github.com/hotoo/pinyin/issues"
   },
   "scripts": {
+    "start": "dumi dev",
+    "doc:build": "dumi build",
+    "doc:deploy": "npm run doc:build && node ./scripts/publish-doc.sh",
     "lint": "eslint ./lib/ ./bin/ ./tests/",
     "test-cli": "mocha -R spec --timeout 5000 tests/cli.test.js",
     "test-npm": "istanbul cover _mocha -- --harmony --reporter spec --timeout 2000 --inline-diffs ./tests/test.js",
@@ -49,11 +52,16 @@
     "nodejieba": "^2.2.1"
   },
   "devDependencies": {
+    "aurl": "^1.2.0",
+    "aws-sdk": "^2.1011.0",
     "benchmark": "~1.0.0",
+    "dumi": "^1.1.30",
     "eslint": "~0.24.0",
     "expect.js": "~0.3.1",
     "istanbul": "~0.3.17",
     "mocha": "^8.3.2",
+    "mock-aws-s3": "^4.0.2",
+    "nock": "^13.1.4",
     "request": "~2.68.0"
   },
   "license": "MIT"