diff --git a/categories/intro/atom.xml b/categories/intro/atom.xml
new file mode 100644
index 0000000..0dec507
--- /dev/null
+++ b/categories/intro/atom.xml
@@ -0,0 +1,97 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<feed xmlns="http://www.w3.org/2005/Atom" xml:lang="en">
+    <title>DraigerCMS - intro</title>
+    <subtitle>Site with Zola Hook</subtitle>
+    <link rel="self" type="application/atom+xml" href="/categories/intro/atom.xml"/>
+    <link rel="alternate" type="text/html" href="/"/>
+    <generator uri="https://www.getzola.org/">Zola</generator>
+    <updated>2021-07-30T00:00:00+00:00</updated>
+    <id>/categories/intro/atom.xml</id>
+    <entry xml:lang="en">
+        <title>Markdown example</title>
+        <published>2021-07-30T00:00:00+00:00</published>
+        <updated>2021-07-30T00:00:00+00:00</updated>
+        
+        <author>
+          <name>
+            
+              Unknown
+            
+          </name>
+        </author>
+        
+        <link rel="alternate" type="text/html" href="/blog/blog/markdown/"/>
+        <id>/blog/blog/markdown/</id>
+        
+        <content type="html" xml:base="/blog/blog/markdown/">&lt;p&gt;This post is a markdown example.&lt;&#x2F;p&gt;
+&lt;p&gt;Here is &lt;a href=&quot;http:&#x2F;&#x2F;example.com&quot;&gt;a link&lt;&#x2F;a&gt;.&lt;&#x2F;p&gt;
+&lt;p&gt;Some &lt;em&gt;italic text&lt;&#x2F;em&gt; and &lt;strong&gt;bold text&lt;&#x2F;strong&gt; and &lt;del&gt;strikethrough text&lt;&#x2F;del&gt; and &lt;code&gt;inline code&lt;&#x2F;code&gt;. &lt;sup class=&quot;footnote-reference&quot; id=&quot;fr-1-1&quot;&gt;&lt;a href=&quot;#fn-1&quot;&gt;1&lt;&#x2F;a&gt;&lt;&#x2F;sup&gt;&lt;&#x2F;p&gt;
+&lt;pre data-lang=&quot;rust&quot; style=&quot;background-color:#fcf0ca;color:#282828aa;&quot; class=&quot;language-rust &quot;&gt;&lt;code class=&quot;language-rust&quot; data-lang=&quot;rust&quot;&gt;&lt;span style=&quot;font-style:italic;color:#928374;&quot;&gt;&#x2F;&#x2F; Here is a code block
+&lt;&#x2F;span&gt;&lt;span&gt;
+&lt;&#x2F;span&gt;&lt;span style=&quot;color:#9d0006;&quot;&gt;fn &lt;&#x2F;span&gt;&lt;span style=&quot;color:#407959;&quot;&gt;main&lt;&#x2F;span&gt;&lt;span&gt;() {
+&lt;&#x2F;span&gt;&lt;span&gt;    &lt;&#x2F;span&gt;&lt;span style=&quot;color:#b57614;&quot;&gt;println!&lt;&#x2F;span&gt;&lt;span&gt;(&lt;&#x2F;span&gt;&lt;span style=&quot;color:#79740e;&quot;&gt;&amp;quot;Hello world!&amp;quot;&lt;&#x2F;span&gt;&lt;span&gt;);
+&lt;&#x2F;span&gt;&lt;span&gt;}
+&lt;&#x2F;span&gt;&lt;&#x2F;code&gt;&lt;&#x2F;pre&gt;
+&lt;p&gt;Unordered list: &lt;sup class=&quot;footnote-reference&quot; id=&quot;fr-2-1&quot;&gt;&lt;a href=&quot;#fn-2&quot;&gt;2&lt;&#x2F;a&gt;&lt;&#x2F;sup&gt;&lt;&#x2F;p&gt;
+&lt;ul&gt;
+&lt;li&gt;An unordered,&lt;&#x2F;li&gt;
+&lt;li&gt;bulleted list&lt;&#x2F;li&gt;
+&lt;li&gt;of items&lt;&#x2F;li&gt;
+&lt;&#x2F;ul&gt;
+&lt;p&gt;Ordered list:&lt;&#x2F;p&gt;
+&lt;ol&gt;
+&lt;li&gt;An ordered,&lt;&#x2F;li&gt;
+&lt;li&gt;numbered list&lt;&#x2F;li&gt;
+&lt;li&gt;of items&lt;&#x2F;li&gt;
+&lt;&#x2F;ol&gt;
+&lt;blockquote&gt;
+&lt;p&gt;A quote.&lt;&#x2F;p&gt;
+&lt;p&gt;It contains multiple paragraphs.&lt;&#x2F;p&gt;
+&lt;&#x2F;blockquote&gt;
+&lt;h1 id=&quot;heading-1&quot;&gt;Heading 1&lt;&#x2F;h1&gt;
+&lt;h2 id=&quot;heading-2&quot;&gt;Heading 2&lt;&#x2F;h2&gt;
+&lt;h3 id=&quot;heading-3&quot;&gt;Heading 3&lt;&#x2F;h3&gt;
+&lt;h4 id=&quot;heading-4&quot;&gt;Heading 4&lt;&#x2F;h4&gt;
+&lt;h5 id=&quot;heading-5&quot;&gt;Heading 5&lt;&#x2F;h5&gt;
+&lt;h6 id=&quot;heading-6&quot;&gt;Heading 6&lt;&#x2F;h6&gt;
+&lt;p&gt;&lt;img src=&quot;https:&#x2F;&#x2F;plchldr.co&#x2F;i&#x2F;480x360?bg=EB6361&quot; alt=&quot;An example image&quot; &#x2F;&gt;&lt;&#x2F;p&gt;
+&lt;p&gt;&lt;img src=&quot;https:&#x2F;&#x2F;plchldr.co&#x2F;i&#x2F;1280x720?bg=3D8EB9&quot; alt=&quot;A large image&quot; &#x2F;&gt;&lt;&#x2F;p&gt;
+&lt;table&gt;&lt;thead&gt;&lt;tr&gt;&lt;th&gt;Hello world!&lt;&#x2F;th&gt;&lt;th&gt;This is a table.&lt;&#x2F;th&gt;&lt;th&gt;Tables are also supported.&lt;&#x2F;th&gt;&lt;&#x2F;tr&gt;&lt;&#x2F;thead&gt;&lt;tbody&gt;
+&lt;tr&gt;&lt;td&gt;They even&lt;&#x2F;td&gt;&lt;td&gt;have alternating&lt;&#x2F;td&gt;&lt;td&gt;row colors!&lt;&#x2F;td&gt;&lt;&#x2F;tr&gt;
+&lt;tr&gt;&lt;td&gt;Let me add&lt;&#x2F;td&gt;&lt;td&gt;another row so&lt;&#x2F;td&gt;&lt;td&gt;it&#x27;s easier to see.&lt;&#x2F;td&gt;&lt;&#x2F;tr&gt;
+&lt;&#x2F;tbody&gt;&lt;&#x2F;table&gt;
+&lt;section class=&quot;footnotes&quot;&gt;
+&lt;ol class=&quot;footnotes-list&quot;&gt;
+&lt;li id=&quot;fn-1&quot;&gt;
+&lt;p&gt;A footnote. Footnotes can be used for things that could have explanation or extra context, but
+for which the explanation is not relevant or otherwise desirable to have inline. &lt;a href=&quot;#fr-1-1&quot;&gt;↩&lt;&#x2F;a&gt;&lt;&#x2F;p&gt;
+&lt;&#x2F;li&gt;
+&lt;li id=&quot;fn-2&quot;&gt;
+&lt;p&gt;Another footnote. &lt;a href=&quot;#fr-2-1&quot;&gt;↩&lt;&#x2F;a&gt;&lt;&#x2F;p&gt;
+&lt;&#x2F;li&gt;
+&lt;&#x2F;ol&gt;
+&lt;&#x2F;section&gt;
+</content>
+        
+    </entry>
+    <entry xml:lang="en">
+        <title>Hello world</title>
+        <published>2021-07-29T00:00:00+00:00</published>
+        <updated>2021-07-29T00:00:00+00:00</updated>
+        
+        <author>
+          <name>
+            
+              Unknown
+            
+          </name>
+        </author>
+        
+        <link rel="alternate" type="text/html" href="/blog/blog/hello-world/"/>
+        <id>/blog/blog/hello-world/</id>
+        
+        <content type="html" xml:base="/blog/blog/hello-world/">&lt;p&gt;Hello world!&lt;&#x2F;p&gt;
+</content>
+        
+    </entry>
+</feed>
diff --git a/categories/intro/index.html b/categories/intro/index.html
new file mode 100644
index 0000000..310b2d8
--- /dev/null
+++ b/categories/intro/index.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="Site with Zola Hook">
+    <title>DraigerCMS | intro</title>
+    
+    <link rel="stylesheet" href="/style.css?h=c59bf21e289e8d31d2b7">
+    
+    
+        
+            
+                
+                    
+                        <link rel="alternate" type="application/atom+xml" title="DraigerCMS - Atom Feed" href="/atom.xml">
+                    
+                
+            
+        
+    
+</head>
+<body>
+    
+<header class="space">
+    <a href="&#x2F;">&LeftArrow; Home</a>
+</header>
+
+    
+<main>
+    <h1>Categories - intro </h1>
+    <ul>
+        
+        <li>
+            <a href="/blog/blog/markdown/">Markdown example</a>
+            <span class="secondary small">(30 Jul, 2021)</span>
+        </li>
+        
+        <li>
+            <a href="/blog/blog/hello-world/">Hello world</a>
+            <span class="secondary small">(29 Jul, 2021)</span>
+        </li>
+        
+    </ul>
+    <p><a href="&#x2F;categories&#x2F;">All categories</a></p>
+</main>
+
+    <div class="dark-mode-buttons">
+        <button class="dark-mode-button" id="dark-mode-on"><img src="/dark_mode.svg" width="24" height="24" alt="Dark mode" aria-label="dark mode toggle" title="Dark mode"></button>
+        <button class="dark-mode-button" id="dark-mode-off"><img src="/light_mode.svg" width="24" height="24" alt="Light mode" aria-label="light mode toggle" title="Light mode"></button>
+    </div>
+    <script>
+        const cls = document.querySelector("html").classList;
+        const sessionTheme = sessionStorage.getItem("theme");
+
+        function setDark() {
+            cls.add("dark-mode");
+            cls.remove("light-mode");
+            sessionStorage.setItem("theme", "dark");
+        }
+        function setLight() {
+            cls.add("light-mode");
+            cls.remove("dark-mode");
+            sessionStorage.setItem("theme", "light");
+        }
+
+        if (sessionTheme === "dark") {
+            setDark();
+        } else if (sessionTheme === "light") {
+            setLight();
+        } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+            setDark();
+        }
+
+        document.getElementById("dark-mode-on").addEventListener("click", function(e) {
+            setDark();
+        });
+        document.getElementById("dark-mode-off").addEventListener("click", function(e) {
+            setLight();
+        });
+    </script>
+    <noscript>
+        <style>
+            .dark-mode-buttons {
+                display: none;
+            }
+        </style>
+    </noscript>
+</body>
+</html>