diff --git a/libs/client.js b/libs/client.js
new file mode 100644
index 0000000..07e54a2
--- /dev/null
+++ b/libs/client.js
@@ -0,0 +1,6 @@
+import { createClient } from 'microcms-js-sdk';
+
+export const client = createClient({
+  serviceDomain: 'yude',
+  apiKey: process.env.MICROCMS_API_KEY,
+});
\ No newline at end of file
diff --git a/pages/posts.js b/pages/posts.js
new file mode 100644
index 0000000..e89882a
--- /dev/null
+++ b/pages/posts.js
@@ -0,0 +1,54 @@
+// Base layout
+import Layout from "./components/Layout"
+
+// Next.js
+import Link from "next/link";
+
+// i18n
+import { useRouter } from 'next/router'
+import useTranslation from 'next-translate/useTranslation'
+
+// microCMS library
+import { client } from "../libs/client";
+
+// next-seo
+import { NextSeo } from 'next-seo';
+
+export default function Home({ blog }) {
+    const router = useRouter()
+    const { locale, locales, defaultLocale, pathname } = router
+    const { t, lang } = useTranslation("common")
+    return (
+          <>
+          <NextSeo
+            title="記事一覧"
+            description="yude のブログの記事一覧 / yude's blog posts listing"
+          />
+          <Layout title={t('common:post_list')}>
+              <div>
+              <h1 className="text-center">{t('common:post_list')}</h1>
+                <ul>
+                  {blog.map((blog) => (
+                    <li key={blog.id}>
+                      <Link href={`/posts/${blog.id}`}>
+                        <a>{blog.title}</a>
+                      </Link>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+          </Layout>
+          </>
+    );
+}
+
+// Passing data to template
+export const getStaticProps = async () => {
+  const data = await client.get({ endpoint: "blog" });
+
+  return {
+    props: {
+      blog: data.contents,
+    },
+  };
+};
\ No newline at end of file
diff --git a/pages/posts/[id].js b/pages/posts/[id].js
new file mode 100644
index 0000000..cf4da22
--- /dev/null
+++ b/pages/posts/[id].js
@@ -0,0 +1,58 @@
+// Base layout
+import Layout from "../components/Layout"
+
+// microCMS library
+import { client } from "../../libs/client";
+
+// next-seo
+import { NextSeo } from 'next-seo';
+
+// React
+import * as React from "react";
+
+// React Moment
+import Moment from 'react-moment';
+
+export default function BlogId({ blog }) {
+  return (
+    <>
+    <Layout title={blog.title + " - yude.jp"}>
+    <NextSeo
+      title={blog.title + " - yude.jp"}
+      description={blog.publishedAt + "に更新された「" + blog.title + "」というタイトルの記事です。"}
+    />
+        <h1>{blog.title}</h1>
+        <p>
+          <Moment format="YYYY/MM/DD HH:mm">
+          {blog.updated}
+          </Moment>
+        </p>
+        <div
+          dangerouslySetInnerHTML={{
+            __html: `${blog.content}`,
+          }}
+        />
+    </Layout>
+    </>
+  );
+}
+
+// Specify path for static generator
+export const getStaticPaths = async () => {
+  const data = await client.get({ endpoint: "blog" });
+
+  const paths = data.contents.map((content) => `/posts/${content.id}`);
+  return { paths, fallback: false };
+};
+
+// Passing data to template
+export const getStaticProps = async (context) => {
+  const id = context.params.id;
+  const data = await client.get({ endpoint: "blog", contentId: id });
+
+  return {
+    props: {
+      blog: data,
+    },
+  };
+};
\ No newline at end of file