diff --git a/gatsby/CreatePages.js b/gatsby/CreatePages.js
index ae02f6fd1d..57e3e25be0 100644
--- a/gatsby/CreatePages.js
+++ b/gatsby/CreatePages.js
@@ -27,6 +27,8 @@ module.exports = ({ actions, graphql }) => {
               tags
               description
               headerImage
+              year: date(formatString: "YYYY")
+              month: date(formatString: "MM")
             }
           }
         }
@@ -40,6 +42,9 @@ module.exports = ({ actions, graphql }) => {
     const { edges = [] } = result.data.allMarkdownRemark;
 
     const tagSet = new Set();
+    const years = new Set();
+    const yearMonths = new Set();
+    const periodTemplate = path.resolve('src/templates/period-summary.js');
 
     createPaginatedPages({
       edges,
@@ -60,7 +65,7 @@ module.exports = ({ actions, graphql }) => {
 
     edges.forEach(({ node }, index) => {
       const { id, frontmatter, fields } = node;
-      const { slug, tags, templateKey } = frontmatter;
+      const { slug, tags, templateKey, year, month } = frontmatter;
 
       // tag
       if (tags) {
@@ -72,9 +77,10 @@ module.exports = ({ actions, graphql }) => {
       if (slug) {
         $path = slug;
       }
+      years.add(year);
+      yearMonths.add(`${year}/${month}`);
 
       const component = templateKey || 'blog-post';
-
       createPage({
         path: $path,
         tags,
@@ -87,6 +93,40 @@ module.exports = ({ actions, graphql }) => {
       });
     });
 
+    // 年別ページ
+    years.forEach(year => {
+      createPage({
+        path: `/${year}/`,
+        component: periodTemplate,
+        context: {
+          displayYear: year,
+          periodStartDate: `${year}-01-01T00:00:00.000Z`,
+          periodEndDate: `${year}-12-31T23:59:59.999Z`,
+        },
+      });
+    });
+
+    // 月別ページ
+    yearMonths.forEach(yearMonth => {
+      const [year, month] = yearMonth.split('/');
+      const startDate = `${year}-${month}-01T00:00:00.000Z`;
+      const newStartDate = new Date(startDate);
+      // 月末日を取得
+      const endDate = new Date(
+        new Date(newStartDate.setMonth(newStartDate.getMonth() + 1)).getTime() - 1).toISOString();
+
+      createPage({
+        path: `/${year}/${month}/`,
+        component: periodTemplate,
+        context: {
+          displayYear: year,
+          displayMonth: month,
+          periodStartDate: startDate,
+          periodEndDate: endDate,
+        },
+      });
+    });
+
 
     return tagSet.forEach((tag) => {
       createPage({
diff --git a/src/components/Sidebar/Archive/index.js b/src/components/Sidebar/Archive/index.js
new file mode 100644
index 0000000000..6755f7397e
--- /dev/null
+++ b/src/components/Sidebar/Archive/index.js
@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+
+import './index.scss';
+
+
+const Archive = () => (
+  <div className="archive">
+    <p><FontAwesomeIcon icon={['far', 'calendar-alt']} />&nbsp;Archives</p>
+    <a href="/2020/">2020</a>
+    <a href="/2019/">2019</a>
+    <a href="/2018/">2018</a>
+    <a href="/2017/">2017</a>
+  </div>
+);
+
+export default Archive;
diff --git a/src/components/Sidebar/Archive/index.scss b/src/components/Sidebar/Archive/index.scss
new file mode 100644
index 0000000000..54cfd61cc0
--- /dev/null
+++ b/src/components/Sidebar/Archive/index.scss
@@ -0,0 +1,7 @@
+@import '../../../styles/colors';
+
+.friend {
+  a {
+    color: $black;
+  }
+}
diff --git a/src/components/Sidebar/Information/index.js b/src/components/Sidebar/Information/index.js
index 6e59a99805..21ab7891a3 100644
--- a/src/components/Sidebar/Information/index.js
+++ b/src/components/Sidebar/Information/index.js
@@ -1,5 +1,6 @@
 import React from 'react';
 // import Friend from '../Friend';
+import Archive from '../Archive';
 import LatestPost from '../LatestPost';
 import './index.scss';
 
@@ -8,8 +9,9 @@ const Information = ({ totalCount, posts }) => (
     <hr />
     <LatestPost posts={posts} totalCount={totalCount} />
     <hr />
+    <Archive />
     {/* <Friend /> */}
-    {/* <hr /> */}
+    <hr />
   </div>
 );
 
diff --git a/src/templates/period-summary.js b/src/templates/period-summary.js
new file mode 100644
index 0000000000..6275797888
--- /dev/null
+++ b/src/templates/period-summary.js
@@ -0,0 +1,77 @@
+import React from 'react';
+import { graphql } from 'gatsby';
+import SEO from '../components/SEO';
+import Sidebar from '../components/Sidebar';
+
+const PeriodSummary = ({ data, pageContext }) => {
+  const { displayMonth, displayYear } = pageContext;
+  const { edges, totalCount } = data.allMarkdownRemark;
+  return (
+    <div className="container">
+      <div
+        className="row"
+        style={{
+          margin: 15,
+        }}
+      >
+        <Sidebar />
+
+        <div className="col-xl-10 col-lg-7 col-md-12 col-xs-12 order-2">
+          <h2>
+            {displayYear}年{displayMonth}月の記事 ({totalCount})
+          </h2>
+          <ul>
+            {edges.map(({ node }) => {
+              const { title, url, yyyymmdd } = node.frontmatter;
+              return (
+                <li key={url}>
+                  {yyyymmdd}&nbsp;&nbsp;<a href={`/${url}`}>{title}</a>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+
+        <div className="col-xl-2 col-lg-1 order-3" />
+      </div>
+
+      <SEO
+        title={`${displayYear}年${displayMonth}月の記事`}
+        url={`https://blog.tubone-project24.xyz/${displayYear}/${displayMonth}`}
+        siteTitleAlt="tubone BOYAKI"
+        isPost={false}
+        description={`${displayYear}年${displayMonth}月の記事`}
+        tag=""
+        image="https://i.imgur.com/StLyXdu.png"
+      />
+    </div>
+  );
+};
+
+export default PeriodSummary;
+
+export const pageQuery = graphql`
+    query PeriodQuery($periodStartDate: Date, $periodEndDate: Date) {
+        allMarkdownRemark(
+            sort: { order: DESC, fields: frontmatter___date }
+            filter: { frontmatter: { date: { gte: $periodStartDate, lt: $periodEndDate } } }
+        ) {
+            totalCount
+            edges {
+                node {
+                    id
+                    frontmatter {
+                        id
+                        url: slug
+                        title
+                        date
+                        yyyymmdd: date(formatString: "YYYY-MM-DD")
+                        tags
+                        headerImage
+                        description
+                    }
+                }
+            }
+        }
+    }
+`;