diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk
index abf697a..1546485 100644
--- a/_includes/layouts/base.njk
+++ b/_includes/layouts/base.njk
@@ -5,13 +5,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>{{ title or metadata.title }}</title>
   <meta name="description" content="{{ description or metadata.description }}">
-
-  {#- Uncomment this if you’d like folks to know that you used Eleventy to build your site!  #}
   <meta name="generator" content="{{ eleventy.generator }}">
-
-  <link rel="stylesheet" href="/css/prism-theme.css">
-  <link rel="stylesheet" href="/css/prism-diff.css">
-  <link rel="stylesheet" href="/css/index.css">
+  <link rel="stylesheet" href="{% webpackAsset 'main.css' %}">
   <link rel="alternate" href="/feed/feed.xml" type="application/atom+xml" title="{{ metadata.title }}">
   <link rel="alternate" href="/feed/feed.json" type="application/json" title="{{ metadata.title }}">
   <link rel="icon" href="/img/favicon.svg">
@@ -27,16 +22,10 @@
 <body class="container">
   <header class="main-header">
     <div>
-      <a class="main-header-logo" href="/"><img src="/img/logo.svg" alt="{{ metadata.title }}" width="165" height="33">Blog</a>
-      {#- Read more about `eleventy-navigation` at https://www.11ty.dev/docs/plugins/navigation/ #}
-{#      <nav class="main-menu">#}
-{#        <ul class="nav">#}
-{#          {%- for entry in collections.all | eleventyNavigation %}#}
-{#            <li class="nav-item{% if entry.url == page.url %} nav-item-active{% endif %}"><a#}
-{#                href="{{ entry.url }}">{{ entry.title | i18n }}</a></li>#}
-{#          {%- endfor %}#}
-{#        </ul>#}
-{#      </nav>#}
+      <a class="main-header-logo" href="/">
+        <img src="/img/logo.svg" alt="IT's on us" width="165" height="33">
+        Blog
+      </a>
     </div>
   </header>
 
@@ -59,13 +48,13 @@
       <ul class="footer-links">
         <li>
         <a rel="noopener" href="https://www.linkedin.com/company/itsonus" target="_blank">
-          <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="Linkedin"><title>Accéder à la page LinkedIn de IT's on us</title><path d="M12.6041 20.6838H9.74213V12.0046H12.6041V20.6838ZM11.1716 10.8207C10.2566 10.8207 9.51416 10.1068 9.51416 9.245C9.51416 8.38317 10.2566 7.68384 11.1716 7.68384C12.0865 7.68384 12.8289 8.38317 12.8289 9.245C12.8289 10.1068 12.0865 10.8207 11.1716 10.8207ZM23.3155 20.6838H20.4597V16.4588C20.4597 15.4519 20.4382 14.1606 18.9718 14.1606C17.4838 14.1606 17.2559 15.2546 17.2559 16.3863V20.6838H14.397V12.0046H17.1419V13.1885H17.1819C17.5639 12.5066 18.4974 11.787 19.8898 11.787C22.7856 11.787 23.3186 13.5832 23.3186 15.9162V20.6838H23.3155Z" fill="white"></path><path d="M30.2071 16.1838C30.2071 8.1624 23.799 1.68384 15.9236 1.68384C8.04829 1.68384 1.64014 8.1624 1.64014 16.1838C1.64014 24.2053 8.04829 30.6838 15.9236 30.6838C23.799 30.6838 30.2071 24.2053 30.2071 16.1838Z" stroke="white" stroke-width="2"></path>
+          <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" aria-labelledby="title-linkedin"><title id="title-linkedin">Accéder à la page LinkedIn de IT's on us</title><path d="M12.6041 20.6838H9.74213V12.0046H12.6041V20.6838ZM11.1716 10.8207C10.2566 10.8207 9.51416 10.1068 9.51416 9.245C9.51416 8.38317 10.2566 7.68384 11.1716 7.68384C12.0865 7.68384 12.8289 8.38317 12.8289 9.245C12.8289 10.1068 12.0865 10.8207 11.1716 10.8207ZM23.3155 20.6838H20.4597V16.4588C20.4597 15.4519 20.4382 14.1606 18.9718 14.1606C17.4838 14.1606 17.2559 15.2546 17.2559 16.3863V20.6838H14.397V12.0046H17.1419V13.1885H17.1819C17.5639 12.5066 18.4974 11.787 19.8898 11.787C22.7856 11.787 23.3186 13.5832 23.3186 15.9162V20.6838H23.3155Z" fill="white"></path><path d="M30.2071 16.1838C30.2071 8.1624 23.799 1.68384 15.9236 1.68384C8.04829 1.68384 1.64014 8.1624 1.64014 16.1838C1.64014 24.2053 8.04829 30.6838 15.9236 30.6838C23.799 30.6838 30.2071 24.2053 30.2071 16.1838Z" stroke="white" stroke-width="2"></path>
           </svg>
         </a>
         </li>
         <li>
         <a href="/feed/feed.xml" download>
-          <svg width="32" height="32" viewBox="0 0 461.432 461.432" xmlns="http://www.w3.org/2000/svg" aria-label="RSS"><title>Accéder au flux RSS du blog</title><g fill="#fff"><path d="M125.896 398.928c0 33.683-27.308 60.999-61.022 60.999-33.684 0-61.006-27.316-61.006-60.999 0-33.729 27.322-61.038 61.006-61.038 33.714 0 61.022 27.308 61.022 61.038zM0 229.636c0 8.441 6.606 15.379 15.036 15.809 60.318 3.076 100.885 25.031 138.248 62.582 36.716 36.864 60.071 89.759 64.082 137.769.686 8.202 7.539 14.524 15.77 14.524h56.701c4.344 0 8.498-1.784 11.488-4.935a15.852 15.852 0 004.333-11.729c-8.074-158.152-130.669-278.332-289.013-286.23a15.846 15.846 0 00-11.709 4.344A15.848 15.848 0 000 173.247v56.389z"/><path d="M0 73.411c0 8.51 6.713 15.482 15.216 15.819 194.21 7.683 350.315 161.798 358.098 355.879.34 8.491 7.32 15.208 15.818 15.208h56.457c4.297 0 8.408-1.744 11.393-4.834a15.857 15.857 0 004.441-11.552C453.181 199.412 261.024 9.27 16.38 1.121A15.844 15.844 0 004.838 5.568 15.842 15.842 0 000 16.954v56.457z"/></g>
+          <svg width="32" height="32" viewBox="0 0 461.432 461.432" xmlns="http://www.w3.org/2000/svg" aria-labelledby="title-rss"><title id="title-rss">Accéder au flux RSS du blog</title><g fill="#fff"><path d="M125.896 398.928c0 33.683-27.308 60.999-61.022 60.999-33.684 0-61.006-27.316-61.006-60.999 0-33.729 27.322-61.038 61.006-61.038 33.714 0 61.022 27.308 61.022 61.038zM0 229.636c0 8.441 6.606 15.379 15.036 15.809 60.318 3.076 100.885 25.031 138.248 62.582 36.716 36.864 60.071 89.759 64.082 137.769.686 8.202 7.539 14.524 15.77 14.524h56.701c4.344 0 8.498-1.784 11.488-4.935a15.852 15.852 0 004.333-11.729c-8.074-158.152-130.669-278.332-289.013-286.23a15.846 15.846 0 00-11.709 4.344A15.848 15.848 0 000 173.247v56.389z"/><path d="M0 73.411c0 8.51 6.713 15.482 15.216 15.819 194.21 7.683 350.315 161.798 358.098 355.879.34 8.491 7.32 15.208 15.818 15.208h56.457c4.297 0 8.408-1.744 11.393-4.834a15.857 15.857 0 004.441-11.552C453.181 199.412 261.024 9.27 16.38 1.121A15.844 15.844 0 004.838 5.568 15.842 15.842 0 000 16.954v56.457z"/></g>
           </svg>
         </a>
         </li>
@@ -75,7 +64,6 @@
       Ceci est le blog du collectif IT's on us. Visitez notre <a href="https://www.itsonus.fr">site</a>.
     </div>
   </footer>
-
-{#    <!-- Current page: {{ page.url | htmlBaseUrl }} --> #}
+{#  <script src="{% webpackAsset 'main.js' %}"></script> Uncomment if JS is needed#}
 </body>
 </html>
diff --git a/babel.config.json b/babel.config.json
new file mode 100644
index 0000000..601d337
--- /dev/null
+++ b/babel.config.json
@@ -0,0 +1,11 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "corejs": 3,
+        "useBuiltIns": "usage"
+      }
+    ]
+  ]
+}
\ No newline at end of file
diff --git a/eleventy.config.js b/eleventy.config.js
index 6b0e8d3..5bf20cd 100644
--- a/eleventy.config.js
+++ b/eleventy.config.js
@@ -1,3 +1,5 @@
+const fs = require("fs");
+const path = require("path");
 const { DateTime } = require("luxon");
 const rosetta = require("rosetta");
 const markdownItAnchor = require("markdown-it-anchor");
@@ -5,18 +7,37 @@ const pluginRss = require("@11ty/eleventy-plugin-rss");
 const pluginSyntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
 const pluginNavigation = require("@11ty/eleventy-navigation");
 const { EleventyI18nPlugin, EleventyHtmlBasePlugin } = require("@11ty/eleventy");
-
 const languageStrings = require("./i18n.js");
 
+const manifestPath = path.resolve(__dirname, "_site", "assets", "manifest.json");
+const manifest = JSON.parse(
+  fs.readFileSync(manifestPath, { encoding: "utf8" })
+);
+
 module.exports = function(eleventyConfig) {
   eleventyConfig.ignores.add("README.md");
 
+  // Adds a universal shortcode to return the URL to a webpack asset. In Nunjack templates:
+  // {% webpackAsset 'main.js' %} or {% webpackAsset 'main.css' %}
+  eleventyConfig.addShortcode("webpackAsset", function(name) {
+    if (!manifest[name]) {
+      throw new Error(`The asset ${name} does not exist in ${manifestPath}`);
+    }
+    return manifest[name];
+  });
+
+  // Copy all images directly to dist.
+  eleventyConfig.addPassthroughCopy({ "public/img": "img" });
+
   // Copy the contents of the `public` folder to the output folder
   // For example, `./public/css/` ends up in `_site/css/`
-  eleventyConfig.addPassthroughCopy({
-    "./public/": "/",
-    "./node_modules/prismjs/themes/prism-okaidia.css": "/css/prism-theme.css",
-  });
+  // eleventyConfig.addPassthroughCopy({
+  //   "./node_modules/prismjs/themes/prism-okaidia.css": "/public/css/prism-theme.css",
+  // });
+  // // Watch our compiled assets for changes
+  // eleventyConfig.addWatchTarget('./src/compiled-assets/main.css');
+  // // Copy src/compiled-assets to /assets
+  // eleventyConfig.addPassthroughCopy({ 'src/compiled-assets': 'assets' });
 
   // Add plugins
   eleventyConfig.addPlugin(pluginRss);
diff --git a/package.json b/package.json
index 3e54dc4..31c1efc 100644
--- a/package.json
+++ b/package.json
@@ -3,22 +3,39 @@
   "version": "1.0.0",
   "description": "Blog IT's on us",
   "scripts": {
-    "build": "npx @11ty/eleventy",
-    "build-ghpages": "npx @11ty/eleventy --pathprefix=/itsonus-blog/",
-    "bench": "DEBUG=Eleventy:Benchmark* npx @11ty/eleventy",
-    "watch": "npx @11ty/eleventy --watch",
-    "serve": "npx @11ty/eleventy --serve",
-    "start": "npx @11ty/eleventy --serve --quiet",
-    "start-ghpages": "npx @11ty/eleventy --serve --quiet --pathprefix=/itsonus-blog/",
-    "debug": "DEBUG=Eleventy* npx @11ty/eleventy"
+    "build": "npm-run-all clean build:assets build:site",
+    "build:assets": "NODE_ENV=production webpack --mode=production",
+    "build:site": "NODE_ENV=production eleventy",
+    "clean": "rm -rf ./_site",
+    "dev": "npm-run-all clean webpack:assets --parallel dev:*",
+    "dev:assets": "npm run webpack:assets --watch",
+    "dev:site": "NODE_ENV=development eleventy --serve",
+    "webpack:assets": "NODE_ENV=development webpack --mode=development"
   },
   "dependencies": {
-    "@11ty/eleventy": "^2.0.0-canary.15",
+    "@11ty/eleventy": "^2.0.0-canary.16",
     "@11ty/eleventy-navigation": "^0.3.5",
     "@11ty/eleventy-plugin-rss": "^1.2.0",
     "@11ty/eleventy-plugin-syntaxhighlight": "^4.1.0",
     "luxon": "^3.0.1",
     "markdown-it-anchor": "^8.6.4",
-    "rosetta": "^1.1.0"
+    "rosetta": "^1.1.0",
+    "@babel/core": "^7.10.2",
+    "@babel/preset-env": "^7.10.2",
+    "autoprefixer": "^9.8.0",
+    "babel-loader": "^8.1.0",
+    "css-loader": "^3.5.3",
+    "cssnano": "^4.1.10",
+    "mini-css-extract-plugin": "^0.9.0",
+    "npm-run-all": "^4.1.5",
+    "postcss-import": "^12.0.1",
+    "postcss-loader": "^3.0.0",
+    "postcss-preset-env": "^6.7.0",
+    "webpack": "^4.43.0",
+    "webpack-cli": "^3.3.11",
+    "webpack-manifest-plugin": "^2.2.0"
+  },
+  "devDependencies": {
+    "prettier": "^2.0.5"
   }
 }
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000..988025d
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,10 @@
+const plugins = [
+  require("postcss-import"),
+  require("postcss-preset-env"),
+];
+
+if (process.env.NODE_ENV === "production") {
+  plugins.push(require("cssnano"));
+}
+
+module.exports = { plugins };
diff --git a/public/css/index.css b/public/css/index.css
index bf48856..4eaa1ae 100644
--- a/public/css/index.css
+++ b/public/css/index.css
@@ -1,3 +1,4 @@
+@import "prismjs/themes/prism-okaidia.min.css";
 /* Defaults */
 :root {
   --font-family: Century Gothic,Avant Garde,Avenir,TeXGyreAdventorRegular,Verdana,sans-serif;
@@ -63,7 +64,6 @@ main {
 }
 
 .right-side {
-  position: -webkit-sticky; /* for Safari */
   position: sticky;
   top: 1rem;
   align-self: flex-start;
@@ -142,30 +142,6 @@ table th {
   padding-right: 1em;
 }
 
-pre,
-code {
-  font-family: var(--font-family-monospace);
-}
-pre,
-pre[class*="language-"] {
-  margin: .5em 0;
-  line-height: 1.375; /* 22px /16 */
-  -moz-tab-size: 2;
-  -o-tab-size: 2;
-  tab-size: 2;
-  -webkit-hyphens: none;
-  -ms-hyphens: none;
-  hyphens: none;
-  direction: ltr;
-  text-align: left;
-  white-space: pre;
-  word-spacing: normal;
-  word-break: normal;
-}
-code {
-  word-break: break-all;
-}
-
 hr {
   margin: 4rem 15vw;
 }
@@ -261,12 +237,6 @@ hr {
   padding: 0;
   margin: 2rem 1rem 0 0;
 }
-/*.post-nav ul li.previous {*/
-/*  list-style: '<';*/
-/*}*/
-/*.post-nav ul li.next {*/
-/*  list-style: '>';*/
-/*}*/
 
 /* Direct Links / Markdown Headers */
 .direct-link {
@@ -335,6 +305,52 @@ a[href].direct-link:focus,
   text-align: center;
 }
 
+/*
+ * New diff- syntax
+ */
+
+pre[class*="language-diff-"] {
+  --eleventy-code-padding: 1.25em;
+  padding-left: var(--eleventy-code-padding);
+  padding-right: var(--eleventy-code-padding);
+}
+.token.deleted {
+  background-color: hsl(0, 51%, 37%);
+  color: inherit;
+}
+.token.inserted {
+  background-color: hsl(126, 31%, 39%);
+  color: inherit;
+}
+
+/* Make the + and - characters unselectable for copy/paste */
+.token.prefix.unchanged,
+.token.prefix.inserted,
+.token.prefix.deleted {
+  -webkit-user-select: none;
+  user-select: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+.token.prefix.inserted,
+.token.prefix.deleted {
+  width: var(--eleventy-code-padding);
+  background-color: rgba(0,0,0,.2);
+}
+
+/* Optional: full-width background color */
+.token.inserted:not(.prefix),
+.token.deleted:not(.prefix) {
+  display: block;
+  margin-left: calc(-1 * var(--eleventy-code-padding));
+  margin-right: calc(-1 * var(--eleventy-code-padding));
+  text-decoration: none; /* override del, ins, mark defaults */
+  color: inherit; /* override del, ins, mark defaults */
+}
+
 @media only screen and (max-width: 1200px) {
   main {
     max-width: 100%;
diff --git a/public/css/prism-diff.css b/public/css/prism-diff.css
deleted file mode 100644
index 9f7e676..0000000
--- a/public/css/prism-diff.css
+++ /dev/null
@@ -1,45 +0,0 @@
-/*
- * New diff- syntax
- */
-
-pre[class*="language-diff-"] {
-	--eleventy-code-padding: 1.25em;
-	padding-left: var(--eleventy-code-padding);
-	padding-right: var(--eleventy-code-padding);
-}
-.token.deleted {
-	background-color: hsl(0, 51%, 37%);
-	color: inherit;
-}
-.token.inserted {
-	background-color: hsl(126, 31%, 39%);
-	color: inherit;
-}
-
-/* Make the + and - characters unselectable for copy/paste */
-.token.prefix.unchanged,
-.token.prefix.inserted,
-.token.prefix.deleted {
-	-webkit-user-select: none;
-	user-select: none;
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	padding-top: 2px;
-	padding-bottom: 2px;
-}
-.token.prefix.inserted,
-.token.prefix.deleted {
-	width: var(--eleventy-code-padding);
-	background-color: rgba(0,0,0,.2);
-}
-
-/* Optional: full-width background color */
-.token.inserted:not(.prefix),
-.token.deleted:not(.prefix) {
-	display: block;
-	margin-left: calc(-1 * var(--eleventy-code-padding));
-	margin-right: calc(-1 * var(--eleventy-code-padding));
-	text-decoration: none; /* override del, ins, mark defaults */
-	color: inherit; /* override del, ins, mark defaults */
-}
diff --git a/public/js/index.js b/public/js/index.js
new file mode 100644
index 0000000..d52773e
--- /dev/null
+++ b/public/js/index.js
@@ -0,0 +1 @@
+// console.log("Elevenpack javascript is loaded");
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644
index 0000000..25e811d
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,42 @@
+const path = require("path");
+const ManifestPlugin = require("webpack-manifest-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+
+const isDev = process.env.NODE_ENV === "development";
+
+const baseFilename = isDev ? "index" : "index.[contenthash]";
+
+module.exports = {
+  mode: isDev ? "development" : "production",
+  entry: [
+    path.resolve(__dirname, "public", "js", "index.js"),
+    path.resolve(__dirname, "public", "css", "index.css"),
+  ],
+  output: {
+    path: path.resolve(__dirname, "_site", "assets"),
+    filename: `${baseFilename}.js`,
+  },
+  module: {
+    rules: [
+      {
+        test: /\.m?js$/,
+        exclude: /(node_modules)/,
+        use: {
+          loader: "babel-loader",
+          options: {
+            presets: ["@babel/preset-env"],
+          },
+        },
+      },
+      {
+        test: /\.css$/,
+        use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"],
+      },
+    ],
+  },
+  devtool: isDev ? "eval" : "source-map",
+  plugins: [
+    new MiniCssExtractPlugin({ filename: `${baseFilename}.css` }),
+    new ManifestPlugin({ publicPath: "/assets/" }),
+  ],
+};
