diff --git a/layouts/index.html b/layouts/index.html
index 6f37a5f..4aecdd4 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -20,34 +20,7 @@
     {{/* pagination */}}
     <div class="postlist {{ if .Site.Params.gridView }}gridView{{ end }}" id="postlist">
     {{ range $pagination }}
-        <article class="card postlistitem {{ if .Site.Params.discreteCards }}discrete{{ end }}">
-            <div>
-                <h2>
-                    <a href="{{ .Permalink }}">{{ .Title }}</a>
-                </h2>
-                <p class="date">
-                <span title="Date"> </span>
-                {{ .Date.Format "2006-01-02" }}
-                {{ if .Params.tags }}
-                    | <!-- Pipe character as visual separator between date and tags-->
-                    <span title="Tags"> </span>
-                    {{ range .Params.tags }}
-                        <a href="/tags/{{ . }}">#{{ . }}</a>
-                    {{ end }}
-                {{ end }}
-                </p>
-                {{ if .Site.Params.imageInArticlePreview }}
-                    {{ if .Params.Image }}
-                        <img src="{{ .Params.Image }}" />
-                    {{ end }}
-                {{end}}
-                <div class="articlePreview">
-                    <p>{{ .Summary }}</p>
-                    <p><a href="{{ .Permalink }}">Continue reading </a></p>
-                </div>
-            </div>
-            <hr />
-        </article>
+        {{- partial "article_card.html" . -}}
     {{ end }}
     </div>
     <div id="getNextBtnContainer"></div>
diff --git a/layouts/partials/article_card.html b/layouts/partials/article_card.html
new file mode 100644
index 0000000..aaf07d3
--- /dev/null
+++ b/layouts/partials/article_card.html
@@ -0,0 +1,28 @@
+<article class="card postlistitem {{ if .Site.Params.discreteCards }}discrete{{ end }}">
+    <div>
+        <h2>
+            <a href="{{ .Permalink }}">{{ .Title }}</a>
+        </h2>
+        <p class="date">
+        <span title="Date"> </span>
+        {{ .Date.Format "2006-01-02" }}
+        {{ if .Params.tags }}
+            | <!-- Pipe character as visual separator between date and tags-->
+            <span title="Tags"> </span>
+            {{ range .Params.tags }}
+                <a href="/tags/{{ . }}">#{{ . }}</a>
+            {{ end }}
+        {{ end }}
+        </p>
+        {{ if .Site.Params.imageInArticlePreview }}
+            {{ if .Params.Image }}
+                <img src="{{ .Params.Image }}" />
+            {{ end }}
+        {{end}}
+        <div class="articlePreview">
+            <p>{{ .Summary }}</p>
+            <p><a href="{{ .Permalink }}">Continue reading </a></p>
+        </div>
+    </div>
+    <hr />
+</article>
diff --git a/layouts/partials/related_articles.html b/layouts/partials/related_articles.html
index 2faad2f..2379fb6 100644
--- a/layouts/partials/related_articles.html
+++ b/layouts/partials/related_articles.html
@@ -1,40 +1,16 @@
 {{ if and (.Site.Params.enableRelatedArticles | default false) .Params.tags }}
+    {{ $postsList :=
+        where (
+            where site.RegularPages "Params.tags" "!=" nil
+        ) "Params.tags" "intersect" .Params.tags
+    }}
     <div class="relatedArticlesContainer">
         <hr />
         <h2>More posts like this</h2>
-        <div id="relatedArticles"></div>
+        <div class="postlist {{ if .Site.Params.gridView }}gridView{{ end }}">
+            {{ range first (.Site.Params.relatedArticlesNum | default 2) $postsList }}
+                {{- partial "article_card.html" . -}}
+            {{ end }}
+        </div>
     </div>
-    {{- partial "js_paginator.html" . -}}
-    <script>
-        function hasAnyTags(articleTags, targetTags) {
-            for (let atag of articleTags) {
-                if (targetTags.includes(atag)) return true;
-            }
-            return false;
-        }
-        function getRelatedArticles() {
-            let currentTags = {{ .Params.tags }};
-            let targetContainer = document.getElementById('relatedArticles');
-            targetContainer.innerHTML = '';
-            fetch('/search/index.json').then(res => res.json())
-            .then(res => {
-                let candidates = res.pages.filter(
-                            a => hasAnyTags(a.tags, currentTags) && a.link != "{{ .Permalink }}"
-                );
-                let targetNum = Math.min(
-                    {{ .Site.Params.relatedArticlesNum | default 2 }},
-                    candidates.length
-                );
-                if (candidates.length <= 0) {
-                    Array.from(
-                        document.getElementsByClassName('relatedArticlesContainer')
-                    ).map(e => e.style.display = 'none');
-                }
-                for (let i=0; i<targetNum; i++) {
-                    targetContainer.innerHTML += renderSingleArticle(candidates[i]);
-                }
-            });
-        }
-        getRelatedArticles();
-    </script>
 {{ end }}