diff --git a/.gitignore b/.gitignore
index 51652dcc1..40ec3b651 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,3 +5,4 @@ yarn.lock
 .DS_Store
 yarn-error.log
 package-lock.json
+tmp
diff --git a/src/assets/style.css b/src/assets/style.css
index c5f6a1bdf..eee7f7901 100644
--- a/src/assets/style.css
+++ b/src/assets/style.css
@@ -86,6 +86,34 @@ header .links a:hover {
   padding:1em;
 }
 
+.search-input {
+  display: inline-block;
+  padding: 2px 8px;
+  width: 90px;
+  border: none;
+  border-radius: 50px;
+  font-family: "Gill Sans", "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: inherit;
+  margin: 0 20px;
+  transition: all 250ms;
+  background: rgba(255, 255, 255, 0);
+  color: #E7DACB;
+}
+
+.search-input::placeholder {
+  color: #E7DACB;
+}
+
+.search-input:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.search-input:focus {
+  width: 200px;
+  background: rgba(255, 255, 255, 0.2);
+  outline: none;
+}
+
 nav {
   width: 250px;
   font-family: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
diff --git a/src/i18n/en/layout/page.html b/src/i18n/en/layout/page.html
index 84e9a67f0..aedcdcc3c 100644
--- a/src/i18n/en/layout/page.html
+++ b/src/i18n/en/layout/page.html
@@ -10,12 +10,15 @@
   <link type="text/css" rel="stylesheet" href="assets/hljs-github.min.css"/>
   <link rel="shortcut icon" href="assets/favicon.ico" type="image/x-icon">
   <script async src="https://www.googletagmanager.com/gtag/js?id=UA-110647385-1"></script>
-  <script>
+  <script type="text/javascript">
+    var LANGUAGE = 'en';
+    
     window.dataLayer = window.dataLayer || [];
     function gtag(){dataLayer.push(arguments);}
     gtag('js', new Date());
     gtag('config', 'UA-110647385-1');
   </script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
 </head>
 <body>
   <header>
@@ -24,6 +27,7 @@
       <img class="type" src="assets/logo.svg" alt="Parcel">
     </a>
     <div class="links">
+      <input type="text" id="search-input" class="search-input" placeholder="Search..." />
       <form class="languages">
         <select class="language-dropdown" onchange="location = this.options[this.selectedIndex].value;">
           <option class="en" value="https://en.parceljs.org" selected>English</option>
@@ -68,12 +72,24 @@ <h3>Advanced</h3>
       {{~> content}}
     </main>
   </div>
-  <script>
+  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+  <script type="text/javascript">
     (function () {
       var pathname = window.location.pathname.substr(1);
       var activeLink = document.querySelector('a[href="' + pathname + '"]');
 
       activeLink.classList.add('selected');
+
+      docsearch({
+        apiKey: '8b6be780425a72d1a1683abea2636778',
+        indexName: 'parceljs',
+        inputSelector: '#search-input',
+        algoliaOptions: {
+          'facetFilters': [
+            `lang:${LANGUAGE}`
+          ]
+        }
+      });
     })();
   </script>
 </body>
diff --git a/src/i18n/es/layout/page.html b/src/i18n/es/layout/page.html
index 7e920b501..afa2c7763 100644
--- a/src/i18n/es/layout/page.html
+++ b/src/i18n/es/layout/page.html
@@ -10,12 +10,15 @@
   <link type="text/css" rel="stylesheet" href="assets/hljs-github.min.css"/>
   <link rel="shortcut icon" href="assets/favicon.ico" type="image/x-icon">
   <script async src="https://www.googletagmanager.com/gtag/js?id=UA-110647385-1"></script>
-  <script>
+  <script type="text/javascript">
+    var LANGUAGE = 'es';
+    
     window.dataLayer = window.dataLayer || [];
     function gtag(){dataLayer.push(arguments);}
     gtag('js', new Date());
     gtag('config', 'UA-110647385-1');
   </script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
 </head>
 <body>
   <header>
@@ -24,6 +27,7 @@
       <img class="type" src="assets/logo.svg" alt="Parcel">
     </a>
     <div class="links">
+      <input type="text" id="search-input" class="search-input" placeholder="Buscar..." />
       <form class="languages">
         <select class="language-dropdown" onchange="location = this.options[this.selectedIndex].value;">
           <option class="en" value="https://en.parceljs.org">English</option>
@@ -64,12 +68,24 @@ <h3>Advanced</h3>
       {{~> content}}
     </main>
   </div>
-  <script>
+  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+  <script type="text/javascript">
     (function () {
       var pathname = window.location.pathname.substr(1);
       var activeLink = document.querySelector('a[href="' + pathname + '"]');
 
       activeLink.classList.add('selected');
+
+      docsearch({
+        apiKey: '8b6be780425a72d1a1683abea2636778',
+        indexName: 'parceljs',
+        inputSelector: '#search-input',
+        algoliaOptions: {
+          'facetFilters': [
+            `lang:${LANGUAGE}`
+          ]
+        }
+      });
     })();
   </script>
 </body>
diff --git a/src/i18n/fr/layout/page.html b/src/i18n/fr/layout/page.html
index 89774f445..a5505a69e 100644
--- a/src/i18n/fr/layout/page.html
+++ b/src/i18n/fr/layout/page.html
@@ -10,12 +10,15 @@
   <link type="text/css" rel="stylesheet" href="assets/hljs-github.min.css"/>
   <link rel="shortcut icon" href="assets/favicon.ico" type="image/x-icon">
   <script async src="https://www.googletagmanager.com/gtag/js?id=UA-110647385-1"></script>
-  <script>
+  <script type="text/javascript">
+    var LANGUAGE = 'fr';
+    
     window.dataLayer = window.dataLayer || [];
     function gtag(){dataLayer.push(arguments);}
     gtag('js', new Date());
     gtag('config', 'UA-110647385-1');
   </script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
 </head>
 <body>
   <header>
@@ -24,6 +27,7 @@
       <img class="type" src="assets/logo.svg" alt="Parcel">
     </a>
     <div class="links">
+      <input type="text" id="search-input" class="search-input" placeholder="Chercher..." />
       <form class="languages">
         <select class="language-dropdown" onchange="location = this.options[this.selectedIndex].value;">
           <option class="en" value="https://en.parceljs.org">English</option>
@@ -68,12 +72,24 @@ <h3>Avancée</h3>
       {{~> content}}
     </main>
   </div>
-  <script>
+  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+  <script type="text/javascript">
     (function () {
       var pathname = window.location.pathname.substr(1);
       var activeLink = document.querySelector('a[href="' + pathname + '"]');
 
       activeLink.classList.add('selected');
+
+      docsearch({
+        apiKey: '8b6be780425a72d1a1683abea2636778',
+        indexName: 'parceljs',
+        inputSelector: '#search-input',
+        algoliaOptions: {
+          'facetFilters': [
+            `lang:${LANGUAGE}`
+          ]
+        }
+      });
     })();
   </script>
 </body>
diff --git a/src/i18n/it/layout/page.html b/src/i18n/it/layout/page.html
index 72a3b43e3..3ee208c4a 100644
--- a/src/i18n/it/layout/page.html
+++ b/src/i18n/it/layout/page.html
@@ -10,12 +10,15 @@
   <link type="text/css" rel="stylesheet" href="assets/hljs-github.min.css"/>
   <link rel="shortcut icon" href="assets/favicon.ico" type="image/x-icon">
   <script async src="https://www.googletagmanager.com/gtag/js?id=UA-110647385-1"></script>
-  <script>
+  <script type="text/javascript">
+    var LANGUAGE = 'it';
+    
     window.dataLayer = window.dataLayer || [];
     function gtag(){dataLayer.push(arguments);}
     gtag('js', new Date());
     gtag('config', 'UA-110647385-1');
   </script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
 </head>
 <body>
   <header>
@@ -24,6 +27,7 @@
       <img class="type" src="assets/logo.svg" alt="Parcel">
     </a>
     <div class="links">
+      <input type="text" id="search-input" class="search-input" placeholder="Ricerca..." />
       <form class="languages">
         <select class="language-dropdown" onchange="location = this.options[this.selectedIndex].value;">
           <option class="en" value="https://en.parceljs.org">English</option>
@@ -66,12 +70,24 @@ <h3>Avanzate</h3>
       {{~> content}}
     </main>
   </div>
-  <script>
+  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+  <script type="text/javascript">
     (function () {
       var pathname = window.location.pathname.substr(1);
       var activeLink = document.querySelector('a[href="' + pathname + '"]');
 
       activeLink.classList.add('selected');
+
+      docsearch({
+        apiKey: '8b6be780425a72d1a1683abea2636778',
+        indexName: 'parceljs',
+        inputSelector: '#search-input',
+        algoliaOptions: {
+          'facetFilters': [
+            `lang:${LANGUAGE}`
+          ]
+        }
+      });
     })();
   </script>
 </body>
diff --git a/src/i18n/ko/layout/page.html b/src/i18n/ko/layout/page.html
index 3a09cd8d6..dc42c5be8 100644
--- a/src/i18n/ko/layout/page.html
+++ b/src/i18n/ko/layout/page.html
@@ -11,12 +11,15 @@
   <link type="text/css" rel="stylesheet" href="assets/hljs-github.min.css"/>
   <link rel="shortcut icon" href="assets/favicon.ico" type="image/x-icon">
   <script async src="https://www.googletagmanager.com/gtag/js?id=UA-110647385-1"></script>
-  <script>
+  <script type="text/javascript">
+    var LANGUAGE = 'ko';
+    
     window.dataLayer = window.dataLayer || [];
-    function gtag() { dataLayer.push(arguments); }
+    function gtag(){dataLayer.push(arguments);}
     gtag('js', new Date());
     gtag('config', 'UA-110647385-1');
   </script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
 </head>
 
 <body>
@@ -26,6 +29,7 @@
       <img class="type" src="assets/logo.svg" alt="Parcel">
     </a>
     <div class="links">
+      <input type="text" id="search-input" class="search-input" placeholder="수색..." />
       <form class="languages">
         <select class="language-dropdown" onchange="location = this.options[this.selectedIndex].value;">
           <option class="en" value="https://en.parceljs.org">English</option>
@@ -94,12 +98,24 @@ <h3>Advanced</h3>
       {{~> content}}
     </main>
   </div>
-  <script>
+  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+  <script type="text/javascript">
     (function () {
       var pathname = window.location.pathname.substr(1);
       var activeLink = document.querySelector('a[href="' + pathname + '"]');
 
       activeLink.classList.add('selected');
+
+      docsearch({
+        apiKey: '8b6be780425a72d1a1683abea2636778',
+        indexName: 'parceljs',
+        inputSelector: '#search-input',
+        algoliaOptions: {
+          'facetFilters': [
+            `lang:${LANGUAGE}`
+          ]
+        }
+      });
     })();
   </script>
 </body>
diff --git a/src/i18n/pl/layout/page.html b/src/i18n/pl/layout/page.html
index a80a7a12f..43cb98283 100644
--- a/src/i18n/pl/layout/page.html
+++ b/src/i18n/pl/layout/page.html
@@ -10,12 +10,15 @@
   <link type="text/css" rel="stylesheet" href="assets/hljs-github.min.css"/>
   <link rel="shortcut icon" href="assets/favicon.ico" type="image/x-icon">
   <script async src="https://www.googletagmanager.com/gtag/js?id=UA-110647385-1"></script>
-  <script>
+  <script type="text/javascript">
+    var LANGUAGE = 'pl';
+    
     window.dataLayer = window.dataLayer || [];
     function gtag(){dataLayer.push(arguments);}
     gtag('js', new Date());
     gtag('config', 'UA-110647385-1');
   </script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
 </head>
 <body>
   <header>
@@ -24,6 +27,7 @@
       <img class="type" src="assets/logo.svg" alt="Parcel">
     </a>
     <div class="links">
+      <input type="text" id="search-input" class="search-input" placeholder="Szukaj..." />
       <form class="languages">
         <select class="language-dropdown" onchange="location = this.options[this.selectedIndex].value;">
           <option class="en" value="https://en.parceljs.org">English</option>
@@ -64,12 +68,24 @@ <h3>Advanced</h3>
       {{~> content}}
     </main>
   </div>
-  <script>
+  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+  <script type="text/javascript">
     (function () {
       var pathname = window.location.pathname.substr(1);
       var activeLink = document.querySelector('a[href="' + pathname + '"]');
 
       activeLink.classList.add('selected');
+
+      docsearch({
+        apiKey: '8b6be780425a72d1a1683abea2636778',
+        indexName: 'parceljs',
+        inputSelector: '#search-input',
+        algoliaOptions: {
+          'facetFilters': [
+            `lang:${LANGUAGE}`
+          ]
+        }
+      });
     })();
   </script>
 </body>
diff --git a/src/i18n/pt/layout/page.html b/src/i18n/pt/layout/page.html
index f2cb34d43..8c69c4848 100644
--- a/src/i18n/pt/layout/page.html
+++ b/src/i18n/pt/layout/page.html
@@ -10,12 +10,15 @@
   <link type="text/css" rel="stylesheet" href="assets/hljs-github.min.css"/>
   <link rel="shortcut icon" href="assets/favicon.ico" type="image/x-icon">
   <script async src="https://www.googletagmanager.com/gtag/js?id=UA-110647385-1"></script>
-  <script>
+  <script type="text/javascript">
+    var LANGUAGE = 'pt';
+    
     window.dataLayer = window.dataLayer || [];
     function gtag(){dataLayer.push(arguments);}
     gtag('js', new Date());
     gtag('config', 'UA-110647385-1');
   </script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
 </head>
 <body>
   <header>
@@ -24,6 +27,7 @@
       <img class="type" src="assets/logo.svg" alt="Parcel">
     </a>
     <div class="links">
+      <input type="text" id="search-input" class="search-input" placeholder="Pesquisa..." />
       <form class="languages">
         <select class="language-dropdown" onchange="location = this.options[this.selectedIndex].value;">
           <option class="en" value="https://en.parceljs.org">English</option>
@@ -67,12 +71,24 @@ <h3>Avançado</h3>
       {{~> content}}
     </main>
   </div>
-  <script>
+  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+  <script type="text/javascript">
     (function () {
       var pathname = window.location.pathname.substr(1);
       var activeLink = document.querySelector('a[href="' + pathname + '"]');
 
       activeLink.classList.add('selected');
+
+      docsearch({
+        apiKey: '8b6be780425a72d1a1683abea2636778',
+        indexName: 'parceljs',
+        inputSelector: '#search-input',
+        algoliaOptions: {
+          'facetFilters': [
+            `lang:${LANGUAGE}`
+          ]
+        }
+      });
     })();
   </script>
 </body>
diff --git a/src/i18n/ru/layout/page.html b/src/i18n/ru/layout/page.html
index 4115ec8f1..1a50c7fbb 100644
--- a/src/i18n/ru/layout/page.html
+++ b/src/i18n/ru/layout/page.html
@@ -10,12 +10,15 @@
   <link type="text/css" rel="stylesheet" href="assets/hljs-github.min.css"/>
   <link rel="shortcut icon" href="assets/favicon.ico" type="image/x-icon">
   <script async src="https://www.googletagmanager.com/gtag/js?id=UA-110647385-1"></script>
-  <script>
+  <script type="text/javascript">
+    var LANGUAGE = 'ru';
+    
     window.dataLayer = window.dataLayer || [];
     function gtag(){dataLayer.push(arguments);}
     gtag('js', new Date());
     gtag('config', 'UA-110647385-1');
   </script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
 </head>
 <body>
   <header>
@@ -24,6 +27,7 @@
       <img class="type" src="assets/logo.svg" alt="Parcel">
     </a>
     <div class="links">
+      <input type="text" id="search-input" class="search-input" placeholder="поиск..." />
       <form class="languages">
         <select class="language-dropdown" onchange="location = this.options[this.selectedIndex].value;">
           <option class="en" value="https://en.parceljs.org">English</option>
@@ -64,12 +68,24 @@ <h3>Advanced</h3>
       {{~> content}}
     </main>
   </div>
-  <script>
+  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+  <script type="text/javascript">
     (function () {
       var pathname = window.location.pathname.substr(1);
       var activeLink = document.querySelector('a[href="' + pathname + '"]');
 
       activeLink.classList.add('selected');
+
+      docsearch({
+        apiKey: '8b6be780425a72d1a1683abea2636778',
+        indexName: 'parceljs',
+        inputSelector: '#search-input',
+        algoliaOptions: {
+          'facetFilters': [
+            `lang:${LANGUAGE}`
+          ]
+        }
+      });
     })();
   </script>
 </body>
diff --git a/src/i18n/uk/layout/page.html b/src/i18n/uk/layout/page.html
index bf9eab322..e43b5b158 100644
--- a/src/i18n/uk/layout/page.html
+++ b/src/i18n/uk/layout/page.html
@@ -10,12 +10,15 @@
   <link type="text/css" rel="stylesheet" href="assets/hljs-github.min.css"/>
   <link rel="shortcut icon" href="assets/favicon.ico" type="image/x-icon">
   <script async src="https://www.googletagmanager.com/gtag/js?id=UA-110647385-1"></script>
-  <script>
+  <script type="text/javascript">
+    var LANGUAGE = 'uk';
+    
     window.dataLayer = window.dataLayer || [];
     function gtag(){dataLayer.push(arguments);}
     gtag('js', new Date());
     gtag('config', 'UA-110647385-1');
   </script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
 </head>
 <body>
   <header>
@@ -24,6 +27,7 @@
       <img class="type" src="assets/logo.svg" alt="Parcel">
     </a>
     <div class="links">
+      <input type="text" id="search-input" class="search-input" placeholder="пошук..." />
       <form class="languages">
         <select class="language-dropdown" onchange="location = this.options[this.selectedIndex].value;">
           <option class="en" value="https://en.parceljs.org">English</option>
@@ -68,12 +72,24 @@ <h3>Advanced</h3>
       {{~> content}}
     </main>
   </div>
-  <script>
+  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+  <script type="text/javascript">
     (function () {
       var pathname = window.location.pathname.substr(1);
       var activeLink = document.querySelector('a[href="' + pathname + '"]');
 
       activeLink.classList.add('selected');
+
+      docsearch({
+        apiKey: '8b6be780425a72d1a1683abea2636778',
+        indexName: 'parceljs',
+        inputSelector: '#search-input',
+        algoliaOptions: {
+          'facetFilters': [
+            `lang:${LANGUAGE}`
+          ]
+        }
+      });
     })();
   </script>
 </body>
diff --git a/src/i18n/zh/layout/page.html b/src/i18n/zh/layout/page.html
index 8a83c79b5..3fe6036c2 100755
--- a/src/i18n/zh/layout/page.html
+++ b/src/i18n/zh/layout/page.html
@@ -9,22 +9,16 @@
   <link type="text/css" rel="stylesheet" href="assets/pilcrow.css" />
   <link type="text/css" rel="stylesheet" href="assets/hljs-github.min.css"/>
   <link rel="shortcut icon" href="assets/favicon.ico" type="image/x-icon">
-  <!-- <script async src="https://www.googletagmanager.com/gtag/js?id=UA-110647385-1"></script>
-  <script>
+  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-110647385-1"></script>
+  <script type="text/javascript">
+    var LANGUAGE = 'zh';
+    
     window.dataLayer = window.dataLayer || [];
     function gtag(){dataLayer.push(arguments);}
     gtag('js', new Date());
     gtag('config', 'UA-110647385-1');
-  </script> -->
-  <script>
-    var _hmt = _hmt || [];
-    (function() {
-      var hm = document.createElement("script");
-      hm.src = "https://hm.baidu.com/hm.js?6b5f065a80e0af3ff54139cf0ae94d47";
-      var s = document.getElementsByTagName("script")[0];
-      s.parentNode.insertBefore(hm, s);
-    })();
   </script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
 </head>
 <body>
   <header>
@@ -33,6 +27,7 @@
       <img class="type" src="assets/logo.svg" alt="Parcel">
     </a>
     <div class="links">
+      <input type="text" id="search-input" class="search-input" placeholder="搜索..." />
       <form class="languages">
         <select class="language-dropdown" onchange="location = this.options[this.selectedIndex].value;">
           <option class="en" value="https://en.parceljs.org">English</option>
@@ -75,12 +70,24 @@ <h3>进阶</h3>
       {{~> content}}
     </main>
   </div>
-  <script>
+  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+  <script type="text/javascript">
     (function () {
       var pathname = window.location.pathname.substr(1);
       var activeLink = document.querySelector('a[href="' + pathname + '"]');
 
       activeLink.classList.add('selected');
+
+      docsearch({
+        apiKey: '8b6be780425a72d1a1683abea2636778',
+        indexName: 'parceljs',
+        inputSelector: '#search-input',
+        algoliaOptions: {
+          'facetFilters': [
+            `lang:${LANGUAGE}`
+          ]
+        }
+      });
     })();
   </script>
 </body>
