diff --git a/generate.py b/generate.py
new file mode 100644
index 0000000..a6a93dd
--- /dev/null
+++ b/generate.py
@@ -0,0 +1,45 @@
+from dataclasses import dataclass
+from pathlib import Path
+import re
+
+
+@dataclass
+class Article:
+    path: str
+
+    def read_contents(self) -> str:
+        return Path(self.path).read_text()
+
+
+articles = [
+    Article(
+        "./input/art-001.html",
+    ),
+]
+
+# generate slugs and read articles
+slugs = []
+article_contents = []
+for article in articles:
+    contents = article.read_contents()
+    id_match = re.search(r'<h2 id="(.*?)"', contents)
+    title_match = re.search(r'<h2 id=".*?>(.*?)</h2>', contents)
+    if id_match is None:
+        print("couldn't match id")
+    elif title_match is None:
+        print("Couldn't match title")
+    else:
+        id = id_match.group(1)
+        title = title_match.group(1)
+        article_contents.append(contents)
+        slug = f"""<p><a href="#{id}">{title}</a></p>"""
+        slugs.append(slug)
+
+# plug into template, write to index.html
+template = Path("./input/template.html").read_text()
+template = template.replace(
+    "<div><!--- Articles ---></div>", "\n".join(article_contents)
+)
+template = template.replace("<div><!--- Slugs ---></div>", "\n".join(slugs))
+with open("./index.html", "w", encoding="utf-8") as index_html:
+    index_html.write(template)
diff --git a/index.css b/index.css
new file mode 100644
index 0000000..cbfcff8
--- /dev/null
+++ b/index.css
@@ -0,0 +1,19 @@
+:root {
+  --text-color: #f7f7f7;
+  --bg-color: #19232f;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --text-color: #222430;
+    --bg-color: #f7f7f7;
+  }
+}
+
+@media only screen and (min-width: 768px) {
+  .container {
+    display: grid;
+    grid-template-columns: 2.75fr 1.25fr;
+    margin-top: 2rem;
+  }
+}
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..3bb0d76
--- /dev/null
+++ b/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Page Title</title>
+    <link rel="stylesheet" href="index.css" />
+  </head>
+
+  <body>
+    <header>
+      <h1><a href="#">Page Header</a></h1>
+    </header>
+
+    <div class="container">
+      <div>
+        <article>
+          <h2 id="my-html-id">My Article Title</h2>
+          <p>Any HTML you please</p>
+        </article>
+        <p>Also any HTML you please, I like to put images between articles</p>
+      </div>
+      <div>
+        <p><a href="#my-html-id">My Article Title</a></p>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/input/art-001.html b/input/art-001.html
new file mode 100644
index 0000000..894e46b
--- /dev/null
+++ b/input/art-001.html
@@ -0,0 +1,5 @@
+<article>
+  <h2 id="my-html-id">My Article Title</h2>
+  <p>Any HTML you please</p>
+</article>
+<p>Also any HTML you please, I like to put images between articles</p>
diff --git a/input/template.html b/input/template.html
new file mode 100644
index 0000000..4033343
--- /dev/null
+++ b/input/template.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Page Title</title>
+    <link rel="stylesheet" href="index.css" />
+  </head>
+
+  <body>
+    <header>
+      <h1><a href="#">Page Header</a></h1>
+    </header>
+
+    <div class="container">
+      <div>
+        <div><!--- Articles ---></div>
+      </div>
+      <div>
+        <div><!--- Slugs ---></div>
+      </div>
+    </div>
+  </body>
+</html>
