diff --git a/.github/workflows/deploy_github_pages.yml b/.github/workflows/deploy_github_pages.yml
new file mode 100644
index 0000000..ad9fabc
--- /dev/null
+++ b/.github/workflows/deploy_github_pages.yml
@@ -0,0 +1,53 @@
+name: 'Deploy GitHub Pages'
+run-name: 'Deploy GitHub Pages'
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - main
+    paths-ignore:
+      - '**.md'
+
+jobs:
+
+  code-analysis:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: subosito/flutter-action@v2
+        with:
+          channel: 'stable'
+      - name: Prepare dependencies
+        run: |
+          flutter --version
+          flutter pub get
+          cd example
+      - name: Check Dart code formatting
+        run: |
+          dart format . -o none --set-exit-if-changed
+      - name: Analyze Dart code
+        run: |
+          flutter analyze .
+
+  deploy:
+    needs: [code-analysis]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: subosito/flutter-action@v2
+        with:
+          channel: 'stable'
+      - name: Prepare dependencies
+        run: |
+          flutter --version
+          flutter pub get
+          cd example
+      - name: Build web (CanvasKit)
+        run: |
+          flutter build web --web-renderer canvaskit --release
+      - name: Deploy
+        uses: JamesIves/github-pages-deploy-action@v4
+        with:
+          branch: 'github-pages'
+          folder: 'example/build/web'
\ No newline at end of file
diff --git a/README-ZH.md b/README-ZH.md
index 317cda3..58857e3 100644
--- a/README-ZH.md
+++ b/README-ZH.md
@@ -1,7 +1,8 @@
 [![GitHub stars](https://img.shields.io/github/stars/amoshuke/flutter_mosaic?style=social&logo=github&logoColor=1F2328&label=stars)](https://github.com/amoshuke/flutter_mosaic)
 [![Pub.dev likes](https://img.shields.io/pub/likes/flutter_mosaic?style=social&logo=flutter&logoColor=168AFD&label=likes)](https://pub.dev/packages/flutter_mosaic)
 
-📓 语言：[English](README.md) | 中文
+📓 语言：[English](README.md) | 中文  
+🎁 查看：[在线示例][]  
 
 <br/><br/>
 
@@ -25,7 +26,7 @@
 <div align="center">
   <img alt="preview1.gif" src="https://raw.githubusercontent.com/amoshuke/flutter_mosaic/main/README/preview1.gif" />
 
-  [[flutter_mosaic/example][]]
+  查看 [在线示例][]
 
 </div>
 
@@ -147,4 +148,5 @@ Mosaic(
 © AmosHuKe
 
 
+[在线示例]: https://amoshuke.github.io/flutter_mosaic
 [flutter_mosaic/example]: https://github.com/amoshuke/flutter_mosaic/tree/main/example
diff --git a/README.md b/README.md
index fe8ce8e..e0aa5cf 100644
--- a/README.md
+++ b/README.md
@@ -2,6 +2,7 @@
 [![Pub.dev likes](https://img.shields.io/pub/likes/flutter_mosaic?style=social&logo=flutter&logoColor=168AFD&label=likes)](https://pub.dev/packages/flutter_mosaic)
 
 📓 Language: English | [中文](README-ZH.md)  
+🎁 Check out the [Live Demo][].  
 
 <br/><br/>
 
@@ -25,7 +26,7 @@
 <div align="center">
   <img alt="preview1.gif" src="https://raw.githubusercontent.com/amoshuke/flutter_mosaic/main/README/preview1.gif" />
 
-  [[flutter_mosaic/example][]]
+  Check out the [Live Demo][]
 
 </div>
 
@@ -147,4 +148,5 @@ Open sourced under the MIT license.
 © AmosHuKe
 
 
+[Live Demo]: https://amoshuke.github.io/flutter_mosaic
 [flutter_mosaic/example]: https://github.com/amoshuke/flutter_mosaic/tree/main/example
diff --git a/example/pubspec.yaml b/example/pubspec.yaml
index fe579d5..842eaa3 100644
--- a/example/pubspec.yaml
+++ b/example/pubspec.yaml
@@ -1,5 +1,5 @@
-name: example
-description: "A new Flutter project."
+name: flutter_mosaic_example
+description: Flutter Mosaic - Examples of the flutter_mosaic package.
 # The following line prevents the package from being accidentally published to
 # pub.dev using `flutter pub publish`. This is preferred for private packages.
 publish_to: 'none' # Remove this line if you wish to publish to pub.dev
@@ -34,10 +34,6 @@ dependencies:
   flutter_mosaic:
     path: ..
 
-  # The following adds the Cupertino Icons font to your application.
-  # Use with the CupertinoIcons class for iOS style icons.
-  cupertino_icons: ^1.0.6
-
 dev_dependencies:
   flutter_test:
     sdk: flutter
diff --git a/example/web/flutter_bootstrap.js b/example/web/flutter_bootstrap.js
new file mode 100644
index 0000000..4cc5603
--- /dev/null
+++ b/example/web/flutter_bootstrap.js
@@ -0,0 +1,18 @@
+{{flutter_js}}
+{{flutter_build_config}}
+
+_flutter.loader.load({
+  config: {
+    assetBase: '/flutter_mosaic/',
+    renderer: 'canvaskit',
+    canvasKitVariant: 'full',
+    canvasKitBaseUrl: '/flutter_mosaic/canvaskit/'
+  },
+  serviceWorkerSettings: {
+    serviceWorkerVersion: {{flutter_service_worker_version}},
+  },
+  onEntrypointLoaded: async function (engineInitializer) {
+    const appRunner = await engineInitializer.initializeEngine();
+    await appRunner.runApp();
+  },
+});
\ No newline at end of file
diff --git a/example/web/index.html b/example/web/index.html
index 1aa025d..fe027b9 100644
--- a/example/web/index.html
+++ b/example/web/index.html
@@ -14,22 +14,22 @@
     This is a placeholder for base href that will be replaced by the value of
     the `--base-href` argument provided to `flutter build`.
   -->
-  <base href="$FLUTTER_BASE_HREF">
+  <base href="/flutter_mosaic/">
 
   <meta charset="UTF-8">
   <meta content="IE=Edge" http-equiv="X-UA-Compatible">
-  <meta name="description" content="A new Flutter project.">
+  <meta name="description" content="Flutter Mosaic - Examples of the flutter_mosaic package.">
 
   <!-- iOS meta tags & icons -->
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="black">
-  <meta name="apple-mobile-web-app-title" content="example">
+  <meta name="apple-mobile-web-app-title" content="Flutter Mosaic">
   <link rel="apple-touch-icon" href="icons/Icon-192.png">
 
   <!-- Favicon -->
   <link rel="icon" type="image/png" href="favicon.png"/>
 
-  <title>example</title>
+  <title>Flutter Mosaic</title>
   <link rel="manifest" href="manifest.json">
 </head>
 <body>