Custom Layout!
+$frontmatter variable.
+
+Here’s an example of how you could use it in your Markdown file:
+
+```md
+---
+title: Docs with VitePress
+editLink: true
+---
+
+# {{ $frontmatter.title }}
+
+Guide content
+```
+
+## Alternative frontmatter Formats
+
+VitePress also supports JSON frontmatter syntax, starting and ending in curly braces:
+
+```json
+---
+{
+ "title": "Blogging Like a Hacker",
+ "editLink": true
+}
+---
+```
+
+## Predefined Variables
+
+### title
+
+- Type: `string`
+- Default: `h1_title || siteData.title`
+
+Title of the current page.
+
+### head
+
+- Type: `array`
+- Default: `undefined`
+
+Specify extra head tags to be injected:
+
+```yaml
+---
+head:
+ - - meta
+ - name: description
+ content: hello
+ - - meta
+ - name: keywords
+ content: super duper SEO
+---
+```
+
+### navbar
+
+- Type: `boolean`
+- Default: `undefined`
+
+You can disable the navbar on a specific page with `navbar: false`
+
+### sidebar
+
+- Type: `boolean|'auto'`
+- Default: `undefined`
+
+You can decide to show the sidebar on a specific page with `sidebar: auto` or disable it with `sidebar: false`
+
+### editLink
+
+- Type: `boolean`
+- Default: `undefined`
+
+Define if this page should include an edit link.
diff --git a/docs/guide/getting-started.md b/docs/guide/getting-started.md
new file mode 100644
index 00000000..2b891fd3
--- /dev/null
+++ b/docs/guide/getting-started.md
@@ -0,0 +1,51 @@
+# Getting Started
+
+This section will help you build a basic VitePress documentation site from ground up. If you already have an existing project and would like to keep documentation inside the project, start from Step 3.
+
+- **Step. 1:** Create and change into a new directory.
+
+ ```bash
+ $ mkdir vitepress-starter && cd vitepress-starter
+ ```
+
+- **Step. 2:** Initialize with your preferred package manager.
+
+ ```bash
+ $ yarn init
+ ```
+
+- **Step. 3:** Install VitePress locally.
+
+ ```bash
+ $ yarn add --dev vitepress
+ ```
+
+- **Step. 4:** Create your first document.
+
+ ```bash
+ $ mkdir docs && echo '# Hello VitePress' > docs/index.md
+ ```
+
+- **Step. 5:** Add some scripts to `package.json`.
+
+ ```json
+ {
+ "scripts": {
+ "docs:dev": "vitepress dev docs",
+ "docs:build": "vitepress build docs",
+ "docs:serve": "vitepress serve docs"
+ }
+ }
+ ```
+
+- **Step. 6:** Serve the documentation site in the local server.
+
+ ```bash
+ $ yarn docs:dev
+ ```
+
+ VitePress will start a hot-reloading development server at `http://localhost:3000`.
+
+By now, you should have a basic but functional VitePress documentation site.
+
+When your documentation site starts to take shape, be sure to read the [deployment guide](./deploy).
diff --git a/docs/guide/global-component.md b/docs/guide/global-component.md
new file mode 100644
index 00000000..ce843322
--- /dev/null
+++ b/docs/guide/global-component.md
@@ -0,0 +1,32 @@
+# Global Component
+
+VitePress comes with few built-in component that can be used globally. You may use these components in your markdown or your custom theme configuration.
+
+## Content
+
+The `Content` component displays the rendered markdown contents. Useful [when creating your own theme](./theming).
+
+```vue
+
+ Custom Layout!
+-
+
- + {{ todo.text }} + +
-
+
- {{ todo.text }} +
+
+Custom Layout!
+{{ page }}
+```
+
+**Output**
+
+```json
+{
+ "path": "/using-vue.html",
+ "title": "Using Vue in Markdown",
+ "frontmatter": {}
+}
+```
+
+## Escaping
+
+By default, fenced code blocks are automatically wrapped with `v-pre`. To display raw mustaches or Vue-specific syntax inside inline code snippets or plain text, you need to wrap a paragraph with the `v-pre` custom container:
+
+**Input**
+
+```md
+::: v-pre
+`{{ This will be displayed as-is }}`
+:::
+```
+
+**Output**
+
+::: v-pre
+`{{ This will be displayed as-is }}`
+:::
+
+## Using Components
+
+When you need to have more flexibility, VitePress allows you to extend your authoring toolbox with your own Vue Components.
+
+### Importing components in markdown
+
+If your components are going to be used in only a few places, the recommended way to use them is to importing the components in the file where it is used.
+
+```md
+
+
+# Docs
+
+This is a .md using a custom component
+
+` tag, which will lead to hydration mismatch because `
` does not allow block elements to be placed inside it.
+:::
+
+### Using Components In Headers
# text <Tag/> text
` | `text` |
+| # text \`<Tag/>\` text <Tag/>
` | `text ` will be displayed as-is; only the HTML that is **not** wrapped will be parsed by Vue.
+
+::: tip
+The output HTML is accomplished by [markdown-it](https://github.com/markdown-it/markdown-it), while the parsed headers are handled by VitePress (and used for both the sidebar and document title).
+:::
+
+## Using CSS Pre-processors
+
+VitePress has [built-in support](https://vitejs.dev/guide/features.html#css-pre-processors) for CSS pre-processors: `.scss`, `.sass`, `.less`, `.styl` and `.stylus` files. There is no need to install Vite-specific plugins for them, but the corresponding pre-processor itself must be installed:
+
+```
+# .scss and .sass
+npm install -D sass
+
+# .less
+npm install -D less
+
+# .styl and .stylus
+npm install -D stylus
+```
+
+Then you can use the following in Markdown and theme components:
+
+```vue
+
+```
+
+## Script & Style Hoisting
+
+Sometimes you may need to apply some JavaScript or CSS only to the current page. In those cases, you can directly write root-level `
+
+## Built-In Components
+
+VitePress provides Built-In Vue Components like `ClientOnly` and `OutboundLink`, check out the [Global Component Guide](./global-component) for more information.
+
+**Also see:**
+
+- [Using Components In Headers](#using-components-in-headers)
+
+## Browser API Access Restrictions
+
+Because VitePress applications are server-rendered in Node.js when generating static builds, any Vue usage must conform to the [universal code requirements](https://vuejs.org/guide/scaling-up/ssr.html). In short, make sure to only access Browser / DOM APIs in `beforeMount` or `mounted` hooks.
+
+If you are using or demoing components that are not SSR-friendly (for example, contain custom directives), you can wrap them inside the built-in `` component:
+
+```md
+
+
+```
+
+Note this does not fix components or libraries that access Browser APIs **on import**. To use code that assumes a browser environment on import, you need to dynamically import them in proper lifecycle hooks:
+
+```vue
+
+```
+
+If your module `export default` a Vue component, you can register it dynamically:
+
+```vue
+
+