diff --git a/docs/README.md b/docs/README.md
index 08969a7..8c6c36a 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -60,6 +60,19 @@ Finally serve this directory as a static website:
 - **python**: `python -m SimpleHTTPServer`
 - ...etc, you can use any static file server, for real.
 
+### How Files Are Resolved
+
+If current `location.pathname` is `/`, i.e. the homepage, it fetches `/README.md`.
+
+If current `location.pathname` is `/docs/`, it fetches `/docs/README.md`.
+
+If current `location.pathname` is `/docs/en`, it fetches `/docs/en.md`.
+
+Basically if the pathname ends with a slash, we treat it as a directory and try to load the `README.md` file under that path, you can also use [indexFile](#indexfile) option to change `README.md` to other file if you want. If the pathname does not end with slash, we would fetch `pathname + '.md'`.
+
+You can also use [root](#root) option to set the origin of the files, for example if you want to load files from other domain, you can set `root: 'https://sub.domain.com/data'`.
+
+
 ## Guide
 
 ### Site Title
@@ -318,10 +331,12 @@ interface NavLink {
 - Type: `string`
 - Default: `README.md`
 
+Used for path ending with a slash.
+
 #### root
 
 - Type: `string`
-- Default: `./`
+- Default: `''`
 
 The root path we use to resolve files from.
 
diff --git a/src/components/App.tsx b/src/components/App.tsx
index 5307538..6e11490 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -6,7 +6,7 @@ import { Navbar } from './Navbar'
 import { Sidebar } from './Sidebar'
 import { Main } from './Main'
 import { renderMarkdown, SidebarMenuItem } from '../markdown'
-import { loadLanguages, scrollToHash, updateURLHash, throttle } from '../utils'
+import { loadLanguages, scrollToHash, updateURLHash, throttle, getFileUrl } from '../utils'
 
 const handleScroll = throttle(() => {
   const headings = document.querySelectorAll('.content .heading')
@@ -42,7 +42,7 @@ export const App: FunctionComponent<{ options: InstanceOptions }> = ({
 
   useEffect(() => {
     Promise.all([
-      fetch(`${options.root}${options.indexFile}`),
+      fetch(getFileUrl(options.root, options.indexFile, location.pathname)),
       options.highlightLanguages && loadLanguages(options.highlightLanguages),
     ])
       .then(([res]) => {
diff --git a/src/docup.ts b/src/docup.ts
index 2a60558..d6ec7d1 100644
--- a/src/docup.ts
+++ b/src/docup.ts
@@ -31,7 +31,7 @@ export class Docup {
     this.options = {
       title: options.title || document.title || 'Docup',
       indexFile: 'README.md',
-      root: './',
+      root: '',
       highlight: true,
       ...options,
     }
diff --git a/src/utils.ts b/src/utils.ts
index 2f5fa52..c82ba79 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -95,3 +95,22 @@ export function throttle<T extends Function>(func: T, wait: number) {
     args = undefined
   }
 }
+
+const TRAILING_SLASH_RE = /\/$/
+const MD_RE = /\.md$/
+
+export function getFileUrl(root: string, indexFile: string, pathname: string) {
+  let url = root
+  // Remove trailing slash
+  // Becuase pathname always starts with slash
+  .replace(TRAILING_SLASH_RE, '')
+  // `pathname` ends with slash
+  // this is a directory
+  // use `indexFile`
+  if (TRAILING_SLASH_RE.test(pathname)) {
+    url += `${pathname}${indexFile}`
+  } else if (!MD_RE.test(pathname)) {
+    url += `${pathname}.md`
+  }
+  return url
+}