diff --git a/public/blockstart.css b/public/blockstart/blockstart.css
similarity index 100%
rename from public/blockstart.css
rename to public/blockstart/blockstart.css
diff --git a/public/demos/asana.html b/public/blockstart/demos/asana.html
similarity index 98%
rename from public/demos/asana.html
rename to public/blockstart/demos/asana.html
index 22dd388..f37e186 100644
--- a/public/demos/asana.html
+++ b/public/blockstart/demos/asana.html
@@ -6,7 +6,7 @@
 
   <title>Blockstart Demo Asana</title>
 
-  <link rel="stylesheet" href="/blockstart.css">
+  <link rel="stylesheet" href="/blockstart/blockstart.css">
 
 <style>
 </style>
diff --git a/public/demos/canva.html b/public/blockstart/demos/canva.html
similarity index 99%
rename from public/demos/canva.html
rename to public/blockstart/demos/canva.html
index 24f9189..796aba2 100644
--- a/public/demos/canva.html
+++ b/public/blockstart/demos/canva.html
@@ -6,7 +6,7 @@
 
   <title>Blockstart Demo Canva</title>
 
-  <link rel="stylesheet" href="/blockstart.css">
+  <link rel="stylesheet" href="/blockstart/blockstart.css">
 
 <style>
 </style>
diff --git a/public/demos/index.html b/public/blockstart/demos/index.html
similarity index 62%
rename from public/demos/index.html
rename to public/blockstart/demos/index.html
index d28f169..16a6746 100644
--- a/public/demos/index.html
+++ b/public/blockstart/demos/index.html
@@ -4,7 +4,7 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>blockstart.css Demos</title>
-  <link rel="stylesheet" href="/blockstart.css">
+  <link rel="stylesheet" href="/blockstart/blockstart.css">
 <style>
 </style>
 </head>
@@ -13,17 +13,17 @@
   <block class="horizontal pad" style="border-bottom: 1px solid var(--value6); --spacing: space-around; width: unset;">
     <div>blockstart.css</div>
     <div class="horizontal" style="--spacing: end;">
-      <a href="/#about">About</a>  &nbsp;|&nbsp;
-      <a href="/#docs">Docs</a>  &nbsp;|&nbsp;
-      <a href="/demos/">Demos</a> &nbsp;|&nbsp;
-      <a href="/blockstart.css">Download</a>
+      <a href="/blockstart/#about">About</a>  &nbsp;|&nbsp;
+      <a href="/blockstart/#docs">Docs</a>  &nbsp;|&nbsp;
+      <a href="/blockstart/demos/">Demos</a> &nbsp;|&nbsp;
+      <a href="/blockstart/blockstart.css">Download</a>
     </div>
   </block>
 
   <content class="pad center" style="--pad: 2rem;">
     <h1>Demos</h1>
 
-    <p>Here are a few simple demos of using <a href="/blockstart.css">blockstart.css</a> to create copies of landing pages.  Copying other websites is a great way to learn web development.  The text in the demos is either taken from the "inspiration" site, or is from <a href="https://hipsum.co/">hipster ipsum</a>.</p>
+    <p>Here are a few simple demos of using <a href="/blockstart/blockstart.css">blockstart.css</a> to create copies of landing pages.  Copying other websites is a great way to learn web development.  The text in the demos is either taken from the "inspiration" site, or is from <a href="https://hipsum.co/">hipster ipsum</a>.</p>
 
     <grid class="center" style="--gap: 1rem; --cols: 1fr 1fr 1fr; --text: 9">
       <shape style="--w: 150px; --h: 150px;"><a href="asana.html">Asana</a></shape>
diff --git a/public/demos/todoist.html b/public/blockstart/demos/todoist.html
similarity index 98%
rename from public/demos/todoist.html
rename to public/blockstart/demos/todoist.html
index bddc380..b328c6a 100644
--- a/public/demos/todoist.html
+++ b/public/blockstart/demos/todoist.html
@@ -7,7 +7,7 @@
 
   <title>Blockstart Demo todoist</title>
 
-  <link rel="stylesheet" href="/blockstart.css">
+  <link rel="stylesheet" href="/blockstart/blockstart.css">
 
 <style>
 </style>
diff --git a/public/index.html b/public/blockstart/index.html
similarity index 88%
rename from public/index.html
rename to public/blockstart/index.html
index c90fdc9..50158b5 100644
--- a/public/index.html
+++ b/public/blockstart/index.html
@@ -6,7 +6,7 @@
 
   <title>blockstart.css</title>
 
-  <link rel="stylesheet" href="/blockstart.css">
+  <link rel="stylesheet" href="/blockstart/blockstart.css">
 
 <style>
   code, pre {
@@ -27,10 +27,10 @@
   <block class="horizontal pad" style="border-bottom: 1px solid var(--value6); --spacing: space-around; width: unset;">
     <div>blockstart.css</div>
     <div class="horizontal" style="--spacing: end;">
-      <a href="#about">About</a>  &nbsp;|&nbsp;
-      <a href="#docs">Docs</a>  &nbsp;|&nbsp;
-      <a href="/demos/">Demos</a> &nbsp;|&nbsp;
-      <a href="/blockstart.css">Download</a>
+      <a href="/blockstart/#about">About</a>  &nbsp;|&nbsp;
+      <a href="/blockstart/#docs">Docs</a>  &nbsp;|&nbsp;
+      <a href="/blockstart/demos/">Demos</a> &nbsp;|&nbsp;
+      <a href="/blockstart/blockstart.css">Download</a>
     </div>
   </block>
 
@@ -43,7 +43,7 @@
 
   <content class="pad">
     <h1 id="#about">About blockstart.css</h1>
-    <p>The <a href="/blockstart.css">blockstart.css</a> file gives you a simple set of basic layout primitives to get started.  It allows you to follow a simple process:</p>
+    <p>The <a href="/blockstart/blockstart.css">blockstart.css</a> file gives you a simple set of basic layout primitives to get started.  It allows you to follow a simple process:</p>
 
     <ol>
       <li>Create a general monochrome block layout with little to no detail.</li>
@@ -64,7 +64,7 @@
 
     <p>A "statement" is another term from painting which means "an attempt at saying what you want for that stage of the work."  Each step isn't a final complete step, but rather an attempt to say something, which you'll refine later as you try to "say" more.  I like this way of looking at artistic processes because paintings, web pages, and other visual art are a communication medium, and it's usually trying to "state" or "say" something.</p>
 
-    <p>The <a href="/blockstart.css">blockstart.css</a> file helps with the <b>Layout</b> and <b>First statement</b> parts of the process by giving you the minimum necessary blocks to create the first statement.  There is almost nothing in the CSS, making it easy to replace in later stages...if you want. I actually recommend <b>not</b> keeping the markup and CSS from <code>blockstart.css</code>.</p>
+    <p>The <a href="/blockstart/blockstart.css">blockstart.css</a> file helps with the <b>Layout</b> and <b>First statement</b> parts of the process by giving you the minimum necessary blocks to create the first statement.  There is almost nothing in the CSS, making it easy to replace in later stages...if you want. I actually recommend <b>not</b> keeping the markup and CSS from <code>blockstart.css</code>.</p>
 
     <h2 id="docs">Blocks</h2>
 
@@ -117,7 +117,7 @@
 
     <h2>Values</h2>
 
-    <p>What's a value?  A value represents a simple number for the "light" and "dark" of something.  Think of it as a measure of the amount of light produced.  A value 9 object gives off a lot of light, so it's white.  A value 0 object gives off no light, so it's black.  You can do most initial designs with only 5 values, but <a href="/blockstart.css">blockstart.css</a> has 10 (0-9) to help with contrast.  You can usually change the background with <code>--value: 0</code> and the text with <code>--text: 9</code> in most places.</p>
+    <p>What's a value?  A value represents a simple number for the "light" and "dark" of something.  Think of it as a measure of the amount of light produced.  A value 9 object gives off a lot of light, so it's white.  A value 0 object gives off no light, so it's black.  You can do most initial designs with only 5 values, but <a href="/blockstart/blockstart.css">blockstart.css</a> has 10 (0-9) to help with contrast.  You can usually change the background with <code>--value: 0</code> and the text with <code>--text: 9</code> in most places.</p>
 
     <p>We can fix that last block's contrast with value 9 text using <code>style="--text: 9;"</code>:</p>
 
@@ -327,7 +327,7 @@
 
     <h2>Getting Started</h2>
 
-    <p>Once you download the <a href="/blockstart.css">blockstart.css</a> you need a web server.  For people who use Node.js you can run the <a href="https://www.npmjs.com/package/http-server">http-server</a> package to get a simple one.  Here's the commands that I use to get a project started:</p>
+    <p>Once you download the <a href="/blockstart/blockstart.css">blockstart.css</a> you need a web server.  For people who use Node.js you can run the <a href="https://www.npmjs.com/package/http-server">http-server</a> package to get a simple one.  Here's the commands that I use to get a project started:</p>
 
 <pre>
 <code>
@@ -341,7 +341,7 @@ npx http-server -d -c-1 public
 </code>
 </pre>
 
-<p>Once you do that you can place the <a href="/blockstart.css">blockstart.css</a> in the <code>public/</code> directory and start putting your <code>.html</code> files in the same place.  Here's a decen starter template:</p>
+<p>Once you do that you can place the <a href="/blockstart/blockstart.css">blockstart.css</a> in the <code>public/</code> directory and start putting your <code>.html</code> files in the same place.  Here's a decen starter template:</p>
 
 <pre>
 <code>
@@ -361,7 +361,7 @@ npx http-server -d -c-1 public
 </code>
 </pre>
 
-  <p>There's a lot you can add to an HTML page to make it work on different platforms, including all the icons ever invented by Apple, but this file gets you started when using the <a href="/blockstart.css">blockstart.css</a>.
+  <p>There's a lot you can add to an HTML page to make it work on different platforms, including all the icons ever invented by Apple, but this file gets you started when using the <a href="/blockstart/blockstart.css">blockstart.css</a>.
   </p>
 
   </content>
diff --git a/public/template.html b/public/blockstart/template.html
similarity index 79%
rename from public/template.html
rename to public/blockstart/template.html
index e5f8b0e..de20ab9 100644
--- a/public/template.html
+++ b/public/blockstart/template.html
@@ -6,7 +6,7 @@
 
   <title>Blockstart Template</title>
 
-  <link rel="stylesheet" href="/blockstart.css">
+  <link rel="stylesheet" href="/blockstart/blockstart.css">
 
 <style>
 </style>