diff --git a/Makefile b/Makefile
new file mode 100644
index 0000000000000..c4b8438044db1
--- /dev/null
+++ b/Makefile
@@ -0,0 +1,28 @@
+all:
+	make build_frontend
+	make build_backend
+
+build_init:
+	cd ./web/ && pnpm i --frozen-lockfile && cd ../
+
+build_proto:
+	cd ./proto/ && npx buf generate && cd ../
+
+build_frontend:
+	cd ./web/ && pnpm run build && cd ../
+	sed -i "s|<script type=\"module\" crossorigin src=\"|&{{ .baseurl }}|g"   ./web/dist/index.html
+	sed -i "s|<link rel=\"stylesheet\" crossorigin href=\"|&{{ .baseurl }}|g" ./web/dist/index.html
+	rm -rf ./server/router/frontend/dist/*
+	cp -R ./web/dist/* ./server/router/frontend/dist/
+
+build_backend:
+	CGO_ENABLED=0 go build -o memos ./bin/memos/main.go
+
+build_backend_armv7l:
+	CGO_ENABLED=0 GOOS=linux GOARCH=arm GOARM=7 go build -o memos.armv7l ./bin/memos/main.go
+
+build_backend_arm64:
+	CGO_ENABLED=0 GOOS=linux GOARCH=arm64 go build -o memos.arm64 ./bin/memos/main.go
+
+clean_frontend:
+	rm -rf ./web/dist/
diff --git a/README.md b/README.md
index aaa2caa46236b..3d8c65963cbb2 100644
--- a/README.md
+++ b/README.md
@@ -35,6 +35,43 @@ docker run -d --name memos -p 5230:5230 -v ~/.memos/:/var/opt/memos neosmemo/mem
 
 Learn more about [other installation methods](https://www.usememos.com/docs/install).
 
+## Deploy under a subdirectory of the domain
+
+1. If you want to deploy memos to a subdirectory, you need to configure base-url (via environment variables or parameters when executing memos).
+For example, if you want to deploy memos in the /memos subdirectory of the domain, run the following command(memos is installed in /usr/local/bin):
+```bash
+MEMOS_MODE="prod" MEMOS_PORT=5230 /usr/local/bin/memos --base-url /memos
+```
+or
+```bash
+MEMOS_MODE="prod" MEMOS_PORT=5230 MEMOS_BASE_URL=/memos /usr/local/bin/memos
+```
+
+2. nginx need add config item, like this:
+```
+location ^~ /memos/ {
+    # Note: The reverse proxy backend URL needs to have a path symbol at the end
+    proxy_pass http://127.0.0.1:5230/;
+
+    proxy_set_header Host $host;
+    proxy_set_header X-Real-IP $remote_addr;
+    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+    proxy_set_header REMOTE-HOST $remote_addr;
+    proxy_set_header X-Forwarded-For $remote_addr; # Set the request source address
+    proxy_set_header X-Forwarded-Proto $scheme; # Set Http protocol
+    proxy_set_header Upgrade $http_upgrade;
+    proxy_set_header Connection "upgrade";
+    add_header X-Cache $upstream_cache_status;
+    add_header Cache-Control no-cache;
+} 
+```
+
+Of course, there is a slight requirement when compiling the memos frontend. You need to execute the sed command to modify the index.html of the frontend after compiling the frontend (the corresponding command is already included in the Makefile).
+```bash
+sed -i "s|<script type=\"module\" crossorigin src=\"|&{{ .baseurl }}|g"   ./web/dist/index.html
+sed -i "s|<link rel=\"stylesheet\" crossorigin href=\"|&{{ .baseurl }}|g" ./web/dist/index.html
+```
+
 ## Contribution
 
 Contributions are what make the open-source community such an amazing place to learn, inspire, and create. We greatly appreciate any contributions you make. Thank you for being a part of our community! 🥰
diff --git a/bin/memos/main.go b/bin/memos/main.go
index 4e0f7709348e4..53a0bc5bdd13e 100644
--- a/bin/memos/main.go
+++ b/bin/memos/main.go
@@ -44,6 +44,7 @@ var (
 				DSN:         viper.GetString("dsn"),
 				InstanceURL: viper.GetString("instance-url"),
 				Version:     version.GetCurrentVersion(viper.GetString("mode")),
+				BaseURL:     viper.GetString("base-url"),
 			}
 			if err := instanceProfile.Validate(); err != nil {
 				panic(err)
@@ -110,6 +111,7 @@ func init() {
 	rootCmd.PersistentFlags().String("driver", "sqlite", "database driver")
 	rootCmd.PersistentFlags().String("dsn", "", "database source name(aka. DSN)")
 	rootCmd.PersistentFlags().String("instance-url", "", "the url of your memos instance")
+	rootCmd.PersistentFlags().String("base-url", "", "the base url of your memos instance")
 
 	if err := viper.BindPFlag("mode", rootCmd.PersistentFlags().Lookup("mode")); err != nil {
 		panic(err)
@@ -132,12 +134,18 @@ func init() {
 	if err := viper.BindPFlag("instance-url", rootCmd.PersistentFlags().Lookup("instance-url")); err != nil {
 		panic(err)
 	}
+	if err := viper.BindPFlag("base-url", rootCmd.PersistentFlags().Lookup("base-url")); err != nil {
+		panic(err)
+	}
 
 	viper.SetEnvPrefix("memos")
 	viper.AutomaticEnv()
 	if err := viper.BindEnv("instance-url", "MEMOS_INSTANCE_URL"); err != nil {
 		panic(err)
 	}
+	if err := viper.BindEnv("base-url", "MEMOS_BASE_URL"); err != nil {
+		panic(err)
+	}
 }
 
 func printGreetings(profile *profile.Profile) {
@@ -150,8 +158,9 @@ addr: %s
 port: %d
 mode: %s
 driver: %s
+baseurl: %s
 ---
-`, profile.Version, profile.Data, profile.DSN, profile.Addr, profile.Port, profile.Mode, profile.Driver)
+`, profile.Version, profile.Data, profile.DSN, profile.Addr, profile.Port, profile.Mode, profile.Driver, profile.BaseURL)
 
 	print(greetingBanner)
 	if len(profile.Addr) == 0 {
diff --git a/server/profile/profile.go b/server/profile/profile.go
index e6bbaf28b7457..5d5050c0317ce 100644
--- a/server/profile/profile.go
+++ b/server/profile/profile.go
@@ -30,6 +30,8 @@ type Profile struct {
 	Version string
 	// InstanceURL is the url of your memos instance.
 	InstanceURL string
+	// BaseURL is the base url of your memos instance.
+	BaseURL string
 }
 
 func (p *Profile) IsDev() bool {
diff --git a/server/router/frontend/frontend.go b/server/router/frontend/frontend.go
index 81285b3840019..9b151d21e8c3c 100644
--- a/server/router/frontend/frontend.go
+++ b/server/router/frontend/frontend.go
@@ -3,6 +3,8 @@ package frontend
 import (
 	"context"
 	"embed"
+	"html/template"
+	"io"
 	"io/fs"
 	"net/http"
 
@@ -29,18 +31,69 @@ func NewFrontendService(profile *profile.Profile, store *store.Store) *FrontendS
 	}
 }
 
-func (*FrontendService) Serve(_ context.Context, e *echo.Echo) {
+var baseURL = ""
+
+func indexHander(c echo.Context) error {
+	// open index.html
+	file, err := embeddedFiles.Open("dist/index.html")
+	if err != nil {
+		return c.String(http.StatusInternalServerError, err.Error())
+	}
+	defer file.Close()
+	// render it.
+	b, err := io.ReadAll(file)
+	if err != nil {
+		return c.String(http.StatusInternalServerError, err.Error())
+	}
+
+	c.Response().WriteHeader(http.StatusOK)
+	tmpl, err := template.New("index.html").Parse(string(b))
+	if err != nil {
+		return c.String(http.StatusInternalServerError, err.Error())
+	}
+	err = tmpl.Execute(c.Response().Writer, map[string]any{
+		"baseurl": baseURL,
+	})
+	if err != nil {
+		return c.String(http.StatusInternalServerError, err.Error())
+	}
+
+	return nil
+}
+
+func (f *FrontendService) Serve(_ context.Context, e *echo.Echo) {
 	skipper := func(c echo.Context) bool {
-		return util.HasPrefixes(c.Path(), "/api", "/memos.api.v1")
+		pathTmp := c.Path()
+		return pathTmp == "/" || pathTmp == "/index.html" || util.HasPrefixes(pathTmp, "/api", "/memos.api.v1")
 	}
 
+	e.GET("/", indexHander)
+	e.GET("/index.html", indexHander)
+	// save baseUrl from profile.
+	baseURL = f.Profile.BaseURL
+
 	// Use echo static middleware to serve the built dist folder.
 	// Reference: https://github.com/labstack/echo/blob/master/middleware/static.go
 	e.Use(middleware.StaticWithConfig(middleware.StaticConfig{
-		HTML5:      true,
+		HTML5:      false,
 		Filesystem: getFileSystem("dist"),
 		Skipper:    skipper,
-	}))
+	}), func(skipper middleware.Skipper) echo.MiddlewareFunc {
+		return func(next echo.HandlerFunc) echo.HandlerFunc {
+			return func(c echo.Context) (err error) {
+				// skip
+				if skipper(c) {
+					return next(c)
+				}
+				// skip assets
+				if util.HasPrefixes(c.Path(), "/assets") {
+					return next(c)
+				}
+				// otherwise (NotFound), serve index.html
+				return indexHander(c)
+			}
+		}
+	}(skipper))
 	// Use echo gzip middleware to compress the response.
 	// Reference: https://echo.labstack.com/docs/middleware/gzip
 	e.Group("assets").Use(middleware.GzipWithConfig(middleware.GzipConfig{
diff --git a/web/index.html b/web/index.html
index 2bbab70e75ebd..86ed3cd273cac 100644
--- a/web/index.html
+++ b/web/index.html
@@ -1,15 +1,19 @@
 <!doctype html>
 <html lang="en">
   <head>
+    <base href="{{ .baseurl }}">
     <meta charset="UTF-8" />
-    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
-    <link rel="icon" type="image/webp" href="/logo.webp" />
-    <link rel="manifest" href="/site.webmanifest" />
+    <link rel="apple-touch-icon" sizes="180x180" href="{{ .baseurl }}/apple-touch-icon.png" />
+    <link rel="icon" type="image/webp" href="{{ .baseurl }}/logo.webp" />
+    <link rel="manifest" href="{{ .baseurl }}/site.webmanifest" />
     <meta name="theme-color" media="(prefers-color-scheme: light)" content="#f4f4f5" />
     <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#18181b" />
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
     <!-- memos.metadata.head -->
     <title>Memos</title>
+    <script>
+      window.globalConfig = { BaseUrl: "{{ .baseurl }}"};
+    </script>
     <script>
       // Prevent flash of light mode.
       const appearance = localStorage.getItem("appearance");
diff --git a/web/src/components/MemoActionMenu.tsx b/web/src/components/MemoActionMenu.tsx
index 86aaec46f8044..e87f37818e18e 100644
--- a/web/src/components/MemoActionMenu.tsx
+++ b/web/src/components/MemoActionMenu.tsx
@@ -98,7 +98,7 @@ const MemoActionMenu = (props: Props) => {
   };
 
   const handleCopyLink = () => {
-    copy(`${window.location.origin}/m/${memo.uid}`);
+    copy(`${window.location.origin}` + (window as any).globalConfig.BaseUrl + `/m/${memo.uid}`);
     toast.success(t("message.succeed-copy-link"));
   };
 
diff --git a/web/src/components/UserAvatar.tsx b/web/src/components/UserAvatar.tsx
index 2122861c0588b..66326e9b6f89e 100644
--- a/web/src/components/UserAvatar.tsx
+++ b/web/src/components/UserAvatar.tsx
@@ -11,7 +11,7 @@ const UserAvatar = (props: Props) => {
     <div className={clsx(`w-8 h-8 overflow-clip rounded-xl`, className)}>
       <img
         className="w-full h-auto shadow min-w-full min-h-full object-cover dark:opacity-80"
-        src={avatarUrl || "/full-logo.webp"}
+        src={avatarUrl || (window as any).globalConfig.BaseUrl + "/full-logo.webp"}
         decoding="async"
         loading="lazy"
         alt=""
diff --git a/web/src/grpcweb.ts b/web/src/grpcweb.ts
index abecc81cbad83..b22edff9cd791 100644
--- a/web/src/grpcweb.ts
+++ b/web/src/grpcweb.ts
@@ -12,7 +12,7 @@ import { WorkspaceServiceDefinition } from "./types/proto/api/v1/workspace_servi
 import { WorkspaceSettingServiceDefinition } from "./types/proto/api/v1/workspace_setting_service";
 
 const channel = createChannel(
-  window.location.origin,
+  window.location.origin + (window as any).globalConfig.BaseUrl,
   FetchTransport({
     credentials: "include",
   }),
diff --git a/web/src/layouts/RootLayout.tsx b/web/src/layouts/RootLayout.tsx
index d1394fd47655a..6c01ce25b57ed 100644
--- a/web/src/layouts/RootLayout.tsx
+++ b/web/src/layouts/RootLayout.tsx
@@ -24,7 +24,7 @@ const RootLayout = () => {
   useEffect(() => {
     if (!currentUser) {
       if (([Routes.ROOT, Routes.RESOURCES, Routes.INBOX, Routes.ARCHIVED, Routes.SETTING] as string[]).includes(location.pathname)) {
-        window.location.href = Routes.EXPLORE;
+        window.location.href = (window as any).globalConfig.BaseUrl + Routes.EXPLORE;
         return;
       }
     }
diff --git a/web/src/pages/UserProfile.tsx b/web/src/pages/UserProfile.tsx
index 929529b88e185..551571bd7a58c 100644
--- a/web/src/pages/UserProfile.tsx
+++ b/web/src/pages/UserProfile.tsx
@@ -98,7 +98,7 @@ const UserProfile = () => {
       return;
     }
 
-    copy(`${window.location.origin}/u/${encodeURIComponent(user.username)}`);
+    copy(`${window.location.origin}` + (window as any).globalConfig.BaseUrl + `/u/${encodeURIComponent(user.username)}`);
     toast.success(t("message.copied"));
   };
 
diff --git a/web/src/router/index.tsx b/web/src/router/index.tsx
index 6be39e6bcb60c..df685018666ca 100644
--- a/web/src/router/index.tsx
+++ b/web/src/router/index.tsx
@@ -29,89 +29,94 @@ export enum Routes {
   AUTH = "/auth",
 }
 
-const router = createBrowserRouter([
+const router = createBrowserRouter(
+  [
+    {
+      path: "/",
+      element: <App />,
+      children: [
+        {
+          path: Routes.AUTH,
+          element: <SuspenseWrapper />,
+          children: [
+            {
+              path: "",
+              element: <SignIn />,
+            },
+            {
+              path: "admin",
+              element: <AdminSignIn />,
+            },
+            {
+              path: "signup",
+              element: <SignUp />,
+            },
+            {
+              path: "callback",
+              element: <AuthCallback />,
+            },
+          ],
+        },
+        {
+          path: Routes.ROOT,
+          element: <RootLayout />,
+          children: [
+            {
+              path: "",
+              element: <Home />,
+            },
+            {
+              path: Routes.RESOURCES,
+              element: <Resources />,
+            },
+            {
+              path: Routes.INBOX,
+              element: <Inboxes />,
+            },
+            {
+              path: Routes.ARCHIVED,
+              element: <Archived />,
+            },
+            {
+              path: Routes.SETTING,
+              element: <Setting />,
+            },
+            {
+              path: Routes.EXPLORE,
+              element: <Explore />,
+            },
+            {
+              path: "m/:uid",
+              element: <MemoDetail />,
+            },
+            {
+              path: "u/:username",
+              element: <UserProfile />,
+            },
+            {
+              path: Routes.ABOUT,
+              element: <About />,
+            },
+            {
+              path: "403",
+              element: <PermissionDenied />,
+            },
+            {
+              path: "404",
+              element: <NotFound />,
+            },
+            {
+              path: "*",
+              element: <NotFound />,
+            },
+          ],
+        },
+      ],
+    },
+  ],
   {
-    path: "/",
-    element: <App />,
-    children: [
-      {
-        path: Routes.AUTH,
-        element: <SuspenseWrapper />,
-        children: [
-          {
-            path: "",
-            element: <SignIn />,
-          },
-          {
-            path: "admin",
-            element: <AdminSignIn />,
-          },
-          {
-            path: "signup",
-            element: <SignUp />,
-          },
-          {
-            path: "callback",
-            element: <AuthCallback />,
-          },
-        ],
-      },
-      {
-        path: Routes.ROOT,
-        element: <RootLayout />,
-        children: [
-          {
-            path: "",
-            element: <Home />,
-          },
-          {
-            path: Routes.RESOURCES,
-            element: <Resources />,
-          },
-          {
-            path: Routes.INBOX,
-            element: <Inboxes />,
-          },
-          {
-            path: Routes.ARCHIVED,
-            element: <Archived />,
-          },
-          {
-            path: Routes.SETTING,
-            element: <Setting />,
-          },
-          {
-            path: Routes.EXPLORE,
-            element: <Explore />,
-          },
-          {
-            path: "m/:uid",
-            element: <MemoDetail />,
-          },
-          {
-            path: "u/:username",
-            element: <UserProfile />,
-          },
-          {
-            path: Routes.ABOUT,
-            element: <About />,
-          },
-          {
-            path: "403",
-            element: <PermissionDenied />,
-          },
-          {
-            path: "404",
-            element: <NotFound />,
-          },
-          {
-            path: "*",
-            element: <NotFound />,
-          },
-        ],
-      },
-    ],
+    basename: (window as any).globalConfig.BaseUrl,
   },
-]);
+);
 
 export default router;
diff --git a/web/src/utils/resource.ts b/web/src/utils/resource.ts
index 7bdefa285a786..a6a6c6dd1fabc 100644
--- a/web/src/utils/resource.ts
+++ b/web/src/utils/resource.ts
@@ -5,7 +5,7 @@ export const getResourceUrl = (resource: Resource) => {
     return resource.externalLink;
   }
 
-  return `${window.location.origin}/file/${resource.name}/${resource.filename}`;
+  return `${window.location.origin}` + (window as any).globalConfig.BaseUrl + `/file/${resource.name}/${resource.filename}`;
 };
 
 export const getResourceType = (resource: Resource) => {