diff --git a/.gitignore b/.gitignore
index 45c1505..10cc505 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
 _site
+.asset-cache
 .sass-cache
 .jekyll-metadata
diff --git a/Gemfile b/Gemfile
index 0b408ae..8bdb6ed 100644
--- a/Gemfile
+++ b/Gemfile
@@ -21,6 +21,7 @@ end
 
 # If you have any plugins, put them here!
 group :jekyll_plugins do
+  gem 'jekyll-assets'
   gem 'jekyll-pants'
   gem 'jekyll-seo-tag'
   gem 'jekyll-sitemap'
diff --git a/Gemfile.lock b/Gemfile.lock
index 595918f..9669da2 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -14,11 +14,15 @@ GEM
       execjs
     coffee-script-source (1.12.2)
     colorator (1.1.0)
+    concurrent-ruby (1.0.5)
     ethon (0.10.1)
       ffi (>= 1.3.0)
     execjs (2.7.0)
+    extras (0.3.0)
+      forwardable-extended (~> 2.5)
     faraday (0.12.1)
       multipart-post (>= 1.2, < 3)
+    fastimage (2.1.0)
     ffi (1.9.18)
     forwardable-extended (2.6.0)
     gemoji (3.0.0)
@@ -85,6 +89,14 @@ GEM
       pathutil (~> 0.9)
       rouge (~> 1.7)
       safe_yaml (~> 1.0)
+    jekyll-assets (2.3.2)
+      concurrent-ruby (~> 1.0)
+      extras (~> 0.2)
+      fastimage (~> 2.0, >= 1.8)
+      jekyll (~> 3.1, >= 3.0)
+      pathutil (>= 0.8)
+      rack (~> 1.6)
+      sprockets (~> 3.3, < 3.8)
     jekyll-avatar (0.4.2)
       jekyll (~> 3.0)
     jekyll-coffeescript (1.0.1)
@@ -177,6 +189,7 @@ GEM
       forwardable-extended (~> 2.6)
     powerpack (0.1.1)
     public_suffix (2.0.5)
+    rack (1.6.8)
     rainbow (2.2.1)
     rake (12.0.0)
     rb-fsevent (0.10.2)
@@ -196,6 +209,9 @@ GEM
     sawyer (0.8.1)
       addressable (>= 2.3.5, < 2.6)
       faraday (~> 0.8, < 1.0)
+    sprockets (3.7.1)
+      concurrent-ruby (~> 1.0)
+      rack (> 1, < 3)
     terminal-table (1.8.0)
       unicode-display_width (~> 1.1, >= 1.1.1)
     thread_safe (0.3.6)
@@ -210,6 +226,7 @@ PLATFORMS
 
 DEPENDENCIES
   github-pages
+  jekyll-assets
   jekyll-pants
   jekyll-seo-tag
   jekyll-sitemap
diff --git a/_sass/base.scss b/_assets/css/_base.scss
similarity index 100%
rename from _sass/base.scss
rename to _assets/css/_base.scss
diff --git a/_sass/side-menu.scss b/_assets/css/_side-menu.scss
similarity index 100%
rename from _sass/side-menu.scss
rename to _assets/css/_side-menu.scss
diff --git a/_assets/css/main.scss b/_assets/css/main.scss
new file mode 100644
index 0000000..d5e35b0
--- /dev/null
+++ b/_assets/css/main.scss
@@ -0,0 +1,2 @@
+@import "side-menu";
+@import "base";
diff --git a/_assets/js/main.js b/_assets/js/main.js
new file mode 100644
index 0000000..afe5bb6
--- /dev/null
+++ b/_assets/js/main.js
@@ -0,0 +1 @@
+// = require ui
diff --git a/_assets/js/ui.js b/_assets/js/ui.js
new file mode 100644
index 0000000..4308341
--- /dev/null
+++ b/_assets/js/ui.js
@@ -0,0 +1,44 @@
+(function (window, document) {
+  var layout = document.getElementById('layout');
+  var menu = document.getElementById('menu');
+  var menuLink = document.getElementById('menuLink');
+  var content = document.getElementById('main');
+
+  function toggleClass (element, className) {
+    var classes = element.className.split(/\s+/);
+    var length = classes.length;
+    var i = 0;
+
+    for (; i < length; i++) {
+      if (classes[i] === className) {
+        classes.splice(i, 1);
+        break;
+      }
+    }
+    // The className is not found
+    if (length === classes.length) {
+      classes.push(className);
+    }
+
+    element.className = classes.join(' ');
+  }
+
+  function toggleAll (e) {
+    var active = 'active';
+
+    e.preventDefault();
+    toggleClass(layout, active);
+    toggleClass(menu, active);
+    toggleClass(menuLink, active);
+  }
+
+  menuLink.onclick = function (e) {
+    toggleAll(e);
+  };
+
+  content.onclick = function (e) {
+    if (menu.className.indexOf('active') !== -1) {
+      toggleAll(e);
+    }
+  };
+}(this, this.document));
diff --git a/_config.yml b/_config.yml
index c5c3b35..db69092 100644
--- a/_config.yml
+++ b/_config.yml
@@ -31,6 +31,7 @@ update:
     diagram: common-flow.svg
 
 gems:
+  - jekyll-assets
   - jekyll-pants
   - jekyll-sitemap
   - jekyll-seo-tag
@@ -42,6 +43,9 @@ defaults:
     values:
       layout: "default"
 
+assets:
+  digest: true
+
 markdown: kramdown
 kramdown:
   input: Pantsdown # disable smart quotes typographic symbols
diff --git a/_layouts/default.html b/_layouts/default.html
index 6356246..3cc7444 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300|Open+Sans:400italic,700italic,400,700' rel='stylesheet' type='text/css'>
     <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
-    <link rel="stylesheet" href="/css/main.css">
+    {% css main %}
     {% seo %}
   </head>
   <body>
@@ -43,6 +43,6 @@
         </div>
       </div>
     </div>
-    <script src="/js/ui.js"></script>
+    {% js main %}
   </body>
 </html>
diff --git a/css/main.scss b/css/main.scss
deleted file mode 100644
index 9f27033..0000000
--- a/css/main.scss
+++ /dev/null
@@ -1,9 +0,0 @@
----
-layout: none
----
-
-// Import partials from `sass_dir` (defaults to `_sass`)
-@import
-    "side-menu",
-    "base"
-;
diff --git a/js/ui.js b/js/ui.js
deleted file mode 100644
index 6d7c20b..0000000
--- a/js/ui.js
+++ /dev/null
@@ -1,46 +0,0 @@
-(function (window, document) {
-
-    var layout   = document.getElementById('layout'),
-        menu     = document.getElementById('menu'),
-        menuLink = document.getElementById('menuLink'),
-        content  = document.getElementById('main');
-
-    function toggleClass(element, className) {
-        var classes = element.className.split(/\s+/),
-            length = classes.length,
-            i = 0;
-
-        for(; i < length; i++) {
-          if (classes[i] === className) {
-            classes.splice(i, 1);
-            break;
-          }
-        }
-        // The className is not found
-        if (length === classes.length) {
-            classes.push(className);
-        }
-
-        element.className = classes.join(' ');
-    }
-
-    function toggleAll(e) {
-        var active = 'active';
-
-        e.preventDefault();
-        toggleClass(layout, active);
-        toggleClass(menu, active);
-        toggleClass(menuLink, active);
-    }
-
-    menuLink.onclick = function (e) {
-        toggleAll(e);
-    };
-
-    content.onclick = function(e) {
-        if (menu.className.indexOf('active') !== -1) {
-            toggleAll(e);
-        }
-    };
-
-}(this, this.document));