diff --git a/.gitpod.yml b/.gitpod.yml
index 1f68bc2f..8113b45a 100644
--- a/.gitpod.yml
+++ b/.gitpod.yml
@@ -1,3 +1,10 @@
 tasks:
-  - init: npm install && npm run build
+  - command: gp await-port 3000 && sleep 3 && gp preview $(gp url 3000)
+  - init: npm install
     command: npm run dev
+ports:
+  - port: 3000
+    onOpen: ignore
+vscode:
+  extensions:
+    - sysoev.language-stylus@1.11.0:xX39oruAJ5UQzTNVRdbBaQ==
\ No newline at end of file
diff --git a/README.md b/README.md
index 46c29971..fdef0a95 100644
--- a/README.md
+++ b/README.md
@@ -18,6 +18,7 @@
   <a href="https://www.npmjs.com/package/docsify"><img alt="npm" src="https://img.shields.io/npm/v/docsify.svg?style=flat-square"></a>
   <a href="https://github.com/QingWei-Li/donate"><img alt="donate" src="https://img.shields.io/badge/%24-donate-ff69b4.svg?style=flat-square"></a>
   <a href="https://gitter.im/docsifyjs/Lobby?utm_source=share-link&utm_medium=link&utm_campaign=share-link"><img alt="gitter" src="https://img.shields.io/gitter/room/docsifyjs/docsify.svg?style=flat-square"></a>
+  <a href="https://gitpod.io/#https://github.com/docsifyjs/docsify"><img src="https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod" alt="Gitpod Ready-to-Code"></a>
 </p>
 
 <p align="center">Gold Sponsor via <a href="https://opencollective.com/docsify">Open Collective</a></p>
@@ -69,6 +70,16 @@ Move to [awesome-docsify](https://github.com/docsifyjs/awesome-docsify#showcase)
 
 ## Contributing
 
+### Online one-click setup for Contributing
+
+You can use Gitpod(A free online VS Code-like IDE) for contributing. With single click it'll launch a workspace and automatically:
+
+- clone the docsify repo.
+- install the dependencies.
+- start `npm run dev`.
+
+So that you can start straight away.
+
 [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/docsifyjs/docsify)
 
 - Fork it!