diff --git a/config.toml b/config.toml
index 55a3bc0..d3b3d51 100644
--- a/config.toml
+++ b/config.toml
@@ -7,6 +7,8 @@ theme = "hello-friend"
 paginate = 10
 enableRobotsTXT = true
 
+# init theme sub module by this command
+# git submodule update --init --recursive  
 [markup.goldmark.renderer]
 unsafe = true #避免MarkDown内嵌的HTML被优化掉，尤其是Typora缩放过的图片
 
diff --git a/layouts/404.html b/layouts/404.html
new file mode 100644
index 0000000..120c7c8
--- /dev/null
+++ b/layouts/404.html
@@ -0,0 +1,266 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset='utf-8'>
+    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
+    <title>404</title>
+    <meta name='viewport' content='width=device-width, initial-scale=1'>
+</head>
+
+<body>
+    <div class="center">
+        <div class="error">
+            <div class="number">4</div>
+            <div class="illustration">
+                <div class="circle"></div>
+                <div class="clip">
+                    <div class="paper">
+                        <div class="face">
+                            <div class="eyes">
+                                <div class="eye eye-left"></div>
+                                <div class="eye eye-right"></div>
+                            </div>
+                            <div class="rosyCheeks rosyCheeks-left"></div>
+                            <div class="rosyCheeks rosyCheeks-right"></div>
+                            <div class="mouth"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="number">4</div>
+        </div>
+
+        <h1 class="text">Oops. The page you're looking for doesn't exist.</h1>
+        <a class="button" href="https://blog.colinx.one">Back To Colin's Blog</a>
+    </div>
+    <div class="by">
+        Illustration by <a class="byLink" href="https://dribbble.com/shots/3965778-Cezan-404-Page-Not-Found"
+            target="_blank">Masoud Ardestani</a>
+    </div>
+
+    <style>
+        html,
+        body {
+            height: 95%;
+            margin: 0;
+        }
+
+        html {
+            font-size: 0.625rem;
+        }
+
+        body {
+            font-family: monospace;
+            font-size: 1.5rem;
+            color: #293b49;
+            text-align: center;
+        }
+
+        a {
+            text-decoration: none;
+        }
+
+        .center {
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+        }
+
+        .error {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            align-content: center;
+        }
+
+        .number {
+            font-weight: 900;
+            font-size: 15rem;
+            line-height: 1;
+        }
+
+        .illustration {
+            position: relative;
+            width: 12.2rem;
+            margin: 0 2.1rem;
+        }
+
+        .circle {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 12.2rem;
+            height: 11.4rem;
+            border-radius: 50%;
+            background-color: #293b49;
+        }
+
+        .clip {
+            position: absolute;
+            bottom: 0.3rem;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+            width: 12.5rem;
+            height: 13rem;
+            border-radius: 0 0 50% 50%;
+        }
+
+        .paper {
+            position: absolute;
+            bottom: -0.3rem;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 9.2rem;
+            height: 12.4rem;
+            border: 0.3rem solid #293b49;
+            background-color: white;
+            border-radius: 0.8rem;
+        }
+
+        .paper::before {
+            content: "";
+            position: absolute;
+            top: -0.7rem;
+            right: -0.7rem;
+            width: 1.4rem;
+            height: 1rem;
+            background-color: white;
+            border-bottom: 0.3rem solid #293b49;
+            transform: rotate(45deg);
+        }
+
+        .face {
+            position: relative;
+            margin-top: 2.3rem;
+        }
+
+        .eyes {
+            position: absolute;
+            top: 0;
+            left: 2.4rem;
+            width: 4.6rem;
+            height: 0.8rem;
+        }
+
+        .eye {
+            position: absolute;
+            bottom: 0;
+            width: 0.8rem;
+            height: 0.8rem;
+            border-radius: 50%;
+            background-color: #293b49;
+            animation-name: eye;
+            animation-duration: 4s;
+            animation-iteration-count: infinite;
+            animation-timing-function: ease-in-out;
+        }
+
+        .eye-left {
+            left: 0;
+        }
+
+        .eye-right {
+            right: 0;
+        }
+
+        @keyframes eye {
+            0% {
+                height: 0.8rem;
+            }
+
+            50% {
+                height: 0.8rem;
+            }
+
+            52% {
+                height: 0.1rem;
+            }
+
+            54% {
+                height: 0.8rem;
+            }
+
+            100% {
+                height: 0.8rem;
+            }
+        }
+
+        .rosyCheeks {
+            position: absolute;
+            top: 1.6rem;
+            width: 1rem;
+            height: 0.2rem;
+            border-radius: 50%;
+            background-color: #fdabaf;
+        }
+
+        .rosyCheeks-left {
+            left: 1.4rem;
+        }
+
+        .rosyCheeks-right {
+            right: 1.4rem;
+        }
+
+        .mouth {
+            position: absolute;
+            top: 3.1rem;
+            left: 50%;
+            width: 1.6rem;
+            height: 0.2rem;
+            border-radius: 0.1rem;
+            transform: translateX(-50%);
+            background-color: #293b49;
+        }
+
+        .text {
+            margin-top: 5rem;
+            margin-bottom: 0;
+            font-weight: 300;
+            color: #293b49;
+            font-size: 1.5rem;
+            line-height: 1rem;
+        }
+
+        .button {
+            margin-top: 4rem;
+            padding: 1.2rem 3rem;
+            color: white;
+            color: #01ac88;
+            /* background-color: #04cba0; */
+            border: #01ac88;
+            border-width: 2px;
+            border-style: solid;
+            transition: all 0.15s ease-in-out
+                /* transition: all 1s ease; */
+
+        }
+
+        .button:hover {
+            color: white;
+            background-color: #01ac88;
+            font-weight: bold;
+        }
+
+        .by {
+            position: absolute;
+            bottom: 0.5rem;
+            left: 0.5rem;
+            text-transform: uppercase;
+            color: #293b49;
+            width: 95%;
+            text-align: center;
+            opacity: 0.1;
+        }
+
+        .byLink {
+            color: #04cba0;
+        }
+    </style>
+</body>
+
+</html>
\ No newline at end of file
