diff --git a/.github/workflows/pr-checks.yml b/.github/workflows/pr-checks.yml
index f460a99d..2a56d438 100644
--- a/.github/workflows/pr-checks.yml
+++ b/.github/workflows/pr-checks.yml
@@ -1,4 +1,4 @@
-name: Pull Request Checks
+name: Pull Request Checks
 
 on:
     pull_request:
@@ -21,8 +21,73 @@ jobs:
               with:
                   node-version: '10.x'
 
-            - name: Check Building
+            - uses: actions/github-script@0.9.0
+              name: Prepare preview ⛏
+              env:
+                  RUN_PATH: https://github.com/ElderJames/ant-design-blazor/actions/runs/${{ github.run_id }}
+              with:
+                github-token: ${{ github.token }}
+                script: |
+                  const REPLACE_MARK = '<!-- PREVIEW_UPDATE_COMMENT -->';
+                  const comment = `[<img width="306" src="https://user-images.githubusercontent.com/5378891/72351368-2c979e00-371b-11ea-9652-eb4e825d745e.gif">](${process.env.RUN_PATH})`;
+                  const wrappedComment = `
+                    ${REPLACE_MARK}
+                    ${comment}
+                    `.trim();
+                    
+                  let comments = await github.issues.listComments(context.issue);
+                  // Find my comment
+                  const updateComment = comments.data.find(({ body }) => body.includes(REPLACE_MARK));
+                  // eslint-disable-next-line no-console
+                  console.log('Origin comment:', updateComment);
+                  let res;
+                  if (!updateComment) {
+                    res = await github.issues.createComment({...context.issue, body: wrappedComment })
+                  } else {
+                    res = await github.issues.updateComment({...context.issue, comment_id: updateComment.id, body: wrappedComment })
+                  }
+
+                  console.log(res);
+
+            - name: Check Building ⚙
               run: |
                   npm install
+                  cp -rf scripts/gh-pages/* scripts/gh-pages/.nojekyll scripts/gh-pages/.spa ./site/AntBlazor.Docs.ClientApp/wwwroot
                   dotnet build
-                  dotnet publish -c Release
+                  dotnet publish -c Release -o cargo
+
+            - name: Deploy Preview 🚀
+              env: 
+                  SURGE_TOKEN: ${{ secrets.SURGE_TOKEN }}
+                  DEPLOY_DOMAIN: preview-${{ github.run_id }}-ant-design-blazor.surge.sh
+              run: |
+                  npm install -g surge
+                  surge --project ./cargo/wwwroot --domain $DEPLOY_DOMAIN
+
+            - uses: actions/github-script@0.9.0
+              name: Show preview ⛏
+              env:
+                  DEPLOY_DOMAIN: https://preview-${{ github.run_id }}-ant-design-blazor.surge.sh
+              with:
+                github-token: ${{ github.token }}
+                script: |
+                  const REPLACE_MARK = '<!-- PREVIEW_UPDATE_COMMENT -->';
+                  const comment = `[<img width="306" src="https://user-images.githubusercontent.com/5378891/72400743-23dbb200-3785-11ea-9d13-1a2d92743846.png">](${process.env.DEPLOY_DOMAIN})`;
+                  const wrappedComment = `
+                    ${REPLACE_MARK}
+                    ${comment}
+                    `.trim();
+                    
+                  let comments = await github.issues.listComments(context.issue);
+                  // Find my comment
+                  const updateComment = comments.data.find(({ body }) => body.includes(REPLACE_MARK));
+                  // eslint-disable-next-line no-console
+                  console.log('Origin comment:', updateComment);
+                  let res;
+                  if (!updateComment) {
+                    res = await github.issues.createComment({...context.issue, body: wrappedComment })
+                  } else {
+                    res = await github.issues.updateComment({...context.issue, comment_id: updateComment.id, body: wrappedComment })
+                  }
+
+                  console.log(res);