diff --git a/docs/_config.yml b/docs/_config.yml
index b8dfaf0b..afb36b84 100644
--- a/docs/_config.yml
+++ b/docs/_config.yml
@@ -8,11 +8,28 @@ host: 0.0.0.0
 
 # Navigation
 navigation:
- - text: About
-   url: /about/
+  -
+    text: Documentation
+    url: /documentation/
+  -
+    text: About
+    url: /about/
 
 # Build settings
 markdown: kramdown
+kramdown:
+  input: GFM
+  hard_wrap: false
+
+  auto_ids:       true
+  footnote_nr:    1
+  entity_output:  as_char
+  smart_quotes:   lsquo,rsquo,ldquo,rdquo
+  enable_coderay: true
+
+  coderay_wrap: div
+  coderay_line_numbers: nil
+  coderay_css: style
 
 # Assets
 sass:
diff --git a/docs/_includes/header.html b/docs/_includes/header.html
index c0b5e67b..11b9f2b1 100644
--- a/docs/_includes/header.html
+++ b/docs/_includes/header.html
@@ -3,11 +3,19 @@
   <nav class="navbar navbar-default  navbar-inverse">
     <div class="container-fluid">
       <div class="navbar-header">
-        <a id="logo" href="/docsearch/"><img src='./img/algolia-logo.svg'></a>
+        <a id="logo" href="{{ site.baseurl }}/">
+          <img src="{{site.baseurl}}/img/algolia-logo.svg" alt="Algolia" />
+        </a>
         presents
       </div>
       <div class="navbar-collapse collapse">
         <ul class="nav navbar-nav navbar-right">
+          {% assign url = page.url %}
+          {% for link in site.navigation %}
+            <li {% if url == link.url %}class="active"{% endif %}>
+              <a href="{{ site.baseurl }}{{ link.url }}" title="{{ link.title }}">{{ link.text }}</a>
+            </li>
+          {% endfor %}
           <li>
             <a class="navbar-github-link" href="//github.com/algolia/docsearch"><i class="fa fa-github"></i></a>
           </li>
@@ -15,4 +23,4 @@
       </div>
     </div>
   </nav>
-</header>
\ No newline at end of file
+</header>
diff --git a/docs/css/_page.scss b/docs/css/_page.scss
index a8be2de0..0de75bce 100644
--- a/docs/css/_page.scss
+++ b/docs/css/_page.scss
@@ -1,4 +1,12 @@
 .page-content {
   font-size: 1.1em;
-  line-height: 1.5em; }
+  line-height: 1.5em;
+}
 
+code {
+  color: #FF2E6C;
+}
+
+.CodeRay .code pre * {
+  background: transparent !important;
+}
diff --git a/docs/documentation.md b/docs/documentation.md
new file mode 100644
index 00000000..1467cdc9
--- /dev/null
+++ b/docs/documentation.md
@@ -0,0 +1,38 @@
+---
+layout: page
+title: Documentation
+permalink: /documentation/
+---
+
+# Usage
+
+```html
+<link rel="stylesheet" href="//cdn.jsdelivr.net/docsearch.js/0/docsearch.min.css" />
+<script src="//cdn.jsdelivr.net/docsearch.js/0/docsearch.min.js"></script>
+```
+
+```js
+documentationSearch({
+  apiKey: apiKey, // Mandatory
+  indexName: indexName, // Mandatory
+  inputSelector: '#search-input' // Mandatory
+});
+```
+
+
+# How do I get an `apiKey` and `indexName`?
+
+Send us [an email](mailto:docsearch@algolia.com) with the url of
+the documentation website you would like to add search to.
+
+
+# How does it work?
+
+The JavaScript library is a wrapper on top of our
+[autocomplete.js](https://github.com/algolia/autocomplete.js) library, along
+with default CSS styling of the dropdown.
+
+The indexing of the website data itself is currently done by an internal tool (to be released).
+
+Indexing of websites using docsearch takes places every day.
+
diff --git a/package.json b/package.json
index c9eec2ae..2cb1b515 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "build": "./scripts/build",
     "build:css": "./scripts/build-css",
     "build:js": "./scripts/build-js",
+    "build:docs": "./scripts/build-docs",
     "release": "./scripts/release",
     "release:beta": "./scripts/release-beta",
     "lint": "eslint .",
diff --git a/scripts/build b/scripts/build
index 87972d40..69c90b0a 100755
--- a/scripts/build
+++ b/scripts/build
@@ -7,3 +7,6 @@ rm -rf dist
 # JavaScript
 npm run build:js
 npm run build:css
+
+# Documentation
+npm run build:docs
diff --git a/scripts/build-docs b/scripts/build-docs
new file mode 100755
index 00000000..df11c7e1
--- /dev/null
+++ b/scripts/build-docs
@@ -0,0 +1,40 @@
+#!/usr/bin/env bash
+
+set -o nounset
+set -o errexit
+
+readonly SOURCE=README.md
+readonly OUTPUT=docs/documentation.md
+readonly SECTIONS=(
+  'Usage'
+  'How do I get an `apiKey` and `indexName`?'
+  'How does it work?'
+)
+
+function escape_regex {
+  echo "$@" | sed -e 's/[]\/$*.^|[]/\\&/g'
+}
+
+function extract {
+  local section=${1}
+
+  echo
+  sed -n "/^#\s*$(escape_regex $section)\s*$/,/^#[^#]/p" \
+    | head -n -1
+}
+
+function main {
+  rm -rf $OUTPUT && touch $OUTPUT
+
+  echo "---" >> $OUTPUT
+  echo "layout: page" >> $OUTPUT
+  echo "title: Documentation" >> $OUTPUT
+  echo "permalink: /documentation/" >> $OUTPUT
+  echo "---" >> $OUTPUT
+
+  for section in "${SECTIONS[@]}"; do
+    cat $SOURCE | extract "$section" >> $OUTPUT
+  done
+}
+
+main