\ No newline at end of file
diff --git a/site/assets/style/_base.scss b/site/assets/style/_base.scss
new file mode 100644
index 0000000..05e71db
--- /dev/null
+++ b/site/assets/style/_base.scss
@@ -0,0 +1,70 @@
+// Body resets
+//
+// Update the foundational and global aspects of the page.
+
+* {
+ box-sizing: border-box;
+}
+
+body {
+ margin: 0;
+ font-family: var(--body-font);
+ font-size: var(--body-font-size);
+ line-height: var(--body-line-height);
+ color: var(--body-color);
+ background-color: var(--body-bg);
+ -webkit-text-size-adjust: 100%;
+ -ms-text-size-adjust: 100%;
+}
+
+// No `:visited` state is required by default (browsers will use `a`)
+a {
+ color: var(--link-color);
+
+ // `:focus` is linked to `:hover` for basic accessibility
+ &:hover,
+ &:focus {
+ color: var(--link-hover-color);
+ }
+
+ strong {
+ color: inherit;
+ }
+}
+
+img {
+ display: block;
+ max-width: 100%;
+ margin-bottom: var(--spacer);
+ border-radius: var(--border-radius);
+}
+
+table {
+ margin-bottom: 1rem;
+ width: 100%;
+ border: 0 solid var(--border-color);
+ border-collapse: collapse;
+}
+
+td,
+th {
+ padding: .25rem .5rem;
+ border-color: inherit;
+ border-style: solid;
+ border-width: 0;
+ border-bottom-width: 1px;
+}
+
+th {
+ text-align: left;
+}
+
+thead th {
+ border-bottom-color: currentColor;
+}
+
+mark {
+ padding: .15rem;
+ background-color: var(--yellow-100);
+ border-radius: .125rem;
+}
diff --git a/site/assets/style/_code.scss b/site/assets/style/_code.scss
new file mode 100644
index 0000000..edb007d
--- /dev/null
+++ b/site/assets/style/_code.scss
@@ -0,0 +1,58 @@
+// Code
+//
+// Inline and block-level code snippets. Includes tweaks to syntax highlighted
+// snippets from Pygments/Rouge and Gist embeds.
+
+code,
+pre {
+ font-family: var(--code-font);
+}
+
+code {
+ font-size: 85%;
+}
+
+pre {
+ display: block;
+ margin-top: 0;
+ margin-bottom: var(--spacer-3);
+ overflow: auto;
+}
+
+.highlight {
+ padding: var(--spacer);
+ margin-bottom: var(--spacer);
+ background-color: var(--code-bg);
+ border-radius: var(--border-radius);
+
+ pre {
+ margin-bottom: 0;
+ }
+
+ // Triple backticks (code fencing) doubles the .highlight elements
+ .highlight {
+ padding: 0;
+ }
+}
+
+.rouge-table {
+ margin-bottom: 0;
+ font-size: 100%;
+
+ &,
+ td,
+ th {
+ border: 0;
+ }
+
+ .gutter {
+ vertical-align: top;
+ user-select: none;
+ opacity: .25;
+ }
+}
+
+// Gist via GitHub Pages
+.gist .markdown-body {
+ padding: 15px !important;
+}
diff --git a/site/assets/style/_layout.scss b/site/assets/style/_layout.scss
new file mode 100644
index 0000000..8e74c0e
--- /dev/null
+++ b/site/assets/style/_layout.scss
@@ -0,0 +1,16 @@
+// Layout
+//
+// Styles for managing the structural hierarchy of the site.
+
+.container {
+ max-width: 45rem;
+ padding-left: var(--spacer-2);
+ padding-right: var(--spacer-2);
+ margin-left: auto;
+ margin-right: auto;
+}
+
+footer {
+ margin-top: var(--spacer-3);
+ margin-bottom: var(--spacer-3);
+}
diff --git a/site/assets/style/_masthead.scss b/site/assets/style/_masthead.scss
new file mode 100644
index 0000000..096abb7
--- /dev/null
+++ b/site/assets/style/_masthead.scss
@@ -0,0 +1,23 @@
+// Masthead
+//
+// Super small header above the content for site name and short description.
+
+.masthead {
+ padding-top: var(--spacer);
+ padding-bottom: var(--spacer);
+ margin-bottom: var(--spacer-3);
+}
+
+.masthead-title {
+ margin-bottom: 0;
+
+ a {
+ color: inherit;
+ text-decoration: none;
+ }
+
+ small {
+ font-weight: 400;
+ opacity: .5;
+ }
+}
diff --git a/site/assets/style/_message.scss b/site/assets/style/_message.scss
new file mode 100644
index 0000000..ac1d93b
--- /dev/null
+++ b/site/assets/style/_message.scss
@@ -0,0 +1,12 @@
+// Messages
+//
+// Show alert messages to users. You may add it to single elements like a `
`,
+// or to a parent if there are multiple elements to show.
+
+.message {
+ padding: var(--spacer);
+ margin-bottom: var(--spacer);
+ color: var(--gray-900);
+ background-color: var(--yellow-100);
+ border-radius: var(--border-radius);
+}
diff --git a/site/assets/style/_pagination.scss b/site/assets/style/_pagination.scss
new file mode 100644
index 0000000..6ef79b3
--- /dev/null
+++ b/site/assets/style/_pagination.scss
@@ -0,0 +1,52 @@
+// Pagination
+//
+// Super lightweight (HTML-wise) blog pagination. `span`s are provide for when
+// there are no more previous or next posts to show.
+
+.pagination {
+ display: flex;
+ margin: 0 -1.5rem var(--spacer);
+ color: var(--gray-500);
+ text-align: center;
+}
+
+// Pagination items can be `span`s or `a`s
+.pagination-item {
+ display: block;
+ padding: var(--spacer);
+ text-decoration: none;
+ border: solid var(--border-color);
+ border-width: 1px 0;
+
+ &:first-child {
+ margin-bottom: -1px;
+ }
+}
+
+// Only provide a hover state for linked pagination items
+a.pagination-item:hover {
+ background-color: var(--border-color);
+}
+
+@media (min-width: 30em) {
+ .pagination {
+ margin: var(--spacer-3) 0;
+ }
+
+ .pagination-item {
+ float: left;
+ width: 50%;
+ border-width: 1px;
+
+ &:first-child {
+ margin-bottom: 0;
+ border-top-left-radius: var(--border-radius);
+ border-bottom-left-radius: var(--border-radius);
+ }
+ &:last-child {
+ margin-left: -1px;
+ border-top-right-radius: var(--border-radius);
+ border-bottom-right-radius: var(--border-radius);
+ }
+ }
+}
diff --git a/site/assets/style/_posts.scss b/site/assets/style/_posts.scss
new file mode 100644
index 0000000..1ef5201
--- /dev/null
+++ b/site/assets/style/_posts.scss
@@ -0,0 +1,67 @@
+// Posts and pages
+//
+// Each post is wrapped in `.post` and is used on default and post layouts. Each
+// page is wrapped in `.page` and is only used on the page layout.
+
+.page,
+.post {
+ margin-bottom: 4em;
+
+ li + li {
+ margin-top: .25rem;
+ }
+}
+
+// Blog post or page title
+.page-title,
+.post-title {
+ color: var(--heading-color);
+}
+.page-title,
+.post-title {
+ margin-top: 0;
+}
+.post-title a {
+ color: inherit;
+ text-decoration: none;
+
+ &:hover,
+ &:focus {
+ text-decoration: underline;
+ }
+}
+
+// Meta data line below post title
+.post-date {
+ display: block;
+ margin-top: -.5rem;
+ margin-bottom: var(--spacer);
+ color: var(--gray-600);
+}
+
+
+// Related posts
+.related {
+ padding-top: var(--spacer-2);
+ padding-bottom: var(--spacer-2);
+ margin-bottom: var(--spacer-2);
+ border-top: 1px solid var(--border-color);
+ border-bottom: 1px solid var(--border-color);
+}
+
+.related-posts {
+ padding-left: 0;
+ list-style: none;
+
+ h3 {
+ margin-top: 0;
+ }
+
+ a {
+ text-decoration: none;
+
+ small {
+ color: var(--gray-600);
+ }
+ }
+}
diff --git a/site/assets/style/_syntax.scss b/site/assets/style/_syntax.scss
new file mode 100644
index 0000000..15ad797
--- /dev/null
+++ b/site/assets/style/_syntax.scss
@@ -0,0 +1,65 @@
+.highlight .hll { background-color: #ffc; }
+.highlight .c { color: #999; } /* Comment */
+.highlight .err { color: #a00; background-color: #faa } /* Error */
+.highlight .k { color: #069; } /* Keyword */
+.highlight .o { color: #555 } /* Operator */
+.highlight .cm { color: #09f; font-style: italic } /* Comment.Multiline */
+.highlight .cp { color: #099 } /* Comment.Preproc */
+.highlight .c1 { color: #999; } /* Comment.Single */
+.highlight .cs { color: #999; } /* Comment.Special */
+.highlight .gd { background-color: #fcc; border: 1px solid #c00 } /* Generic.Deleted */
+.highlight .ge { font-style: italic } /* Generic.Emph */
+.highlight .gr { color: #f00 } /* Generic.Error */
+.highlight .gh { color: #030; } /* Generic.Heading */
+.highlight .gi { background-color: #cfc; border: 1px solid #0c0 } /* Generic.Inserted */
+.highlight .go { color: #aaa } /* Generic.Output */
+.highlight .gp { color: #009; } /* Generic.Prompt */
+.highlight .gs { } /* Generic.Strong */
+.highlight .gu { color: #030; } /* Generic.Subheading */
+.highlight .gt { color: #9c6 } /* Generic.Traceback */
+.highlight .kc { color: #069; } /* Keyword.Constant */
+.highlight .kd { color: #069; } /* Keyword.Declaration */
+.highlight .kn { color: #069; } /* Keyword.Namespace */
+.highlight .kp { color: #069 } /* Keyword.Pseudo */
+.highlight .kr { color: #069; } /* Keyword.Reserved */
+.highlight .kt { color: #078; } /* Keyword.Type */
+.highlight .m { color: #f60 } /* Literal.Number */
+.highlight .s { color: #d44950 } /* Literal.String */
+.highlight .na { color: #4f9fcf } /* Name.Attribute */
+.highlight .nb { color: #366 } /* Name.Builtin */
+.highlight .nc { color: #0a8; } /* Name.Class */
+.highlight .no { color: #360 } /* Name.Constant */
+.highlight .nd { color: #99f } /* Name.Decorator */
+.highlight .ni { color: #999; } /* Name.Entity */
+.highlight .ne { color: #c00; } /* Name.Exception */
+.highlight .nf { color: #c0f } /* Name.Function */
+.highlight .nl { color: #99f } /* Name.Label */
+.highlight .nn { color: #0cf; } /* Name.Namespace */
+.highlight .nt { color: #2f6f9f; } /* Name.Tag */
+.highlight .nv { color: #033 } /* Name.Variable */
+.highlight .ow { color: #000; } /* Operator.Word */
+.highlight .w { color: #bbb } /* Text.Whitespace */
+.highlight .mf { color: #f60 } /* Literal.Number.Float */
+.highlight .mh { color: #f60 } /* Literal.Number.Hex */
+.highlight .mi { color: #f60 } /* Literal.Number.Integer */
+.highlight .mo { color: #f60 } /* Literal.Number.Oct */
+.highlight .sb { color: #c30 } /* Literal.String.Backtick */
+.highlight .sc { color: #c30 } /* Literal.String.Char */
+.highlight .sd { color: #c30; font-style: italic } /* Literal.String.Doc */
+.highlight .s2 { color: #c30 } /* Literal.String.Double */
+.highlight .se { color: #c30; } /* Literal.String.Escape */
+.highlight .sh { color: #c30 } /* Literal.String.Heredoc */
+.highlight .si { color: #a00 } /* Literal.String.Interpol */
+.highlight .sx { color: #c30 } /* Literal.String.Other */
+.highlight .sr { color: #3aa } /* Literal.String.Regex */
+.highlight .s1 { color: #c30 } /* Literal.String.Single */
+.highlight .ss { color: #fc3 } /* Literal.String.Symbol */
+.highlight .bp { color: #366 } /* Name.Builtin.Pseudo */
+.highlight .vc { color: #033 } /* Name.Variable.Class */
+.highlight .vg { color: #033 } /* Name.Variable.Global */
+.highlight .vi { color: #033 } /* Name.Variable.Instance */
+.highlight .il { color: #f60 } /* Literal.Number.Integer.Long */
+
+.css .o,
+.css .o + .nt,
+.css .nt + .nt { color: #999; }
diff --git a/site/assets/style/_toc.scss b/site/assets/style/_toc.scss
new file mode 100644
index 0000000..f004db7
--- /dev/null
+++ b/site/assets/style/_toc.scss
@@ -0,0 +1,16 @@
+// Table of Contents
+
+#markdown-toc {
+ padding: var(--spacer-2) var(--spacer-3);
+ margin-bottom: var(--spacer-2);
+ border: solid var(--border-color);
+ border-width: 1px 0;
+
+ &::before {
+ display: block;
+ margin-left: calc(var(--spacer-3) * -1);
+ content: "Contents";
+ font-size: 85%;
+ font-weight: 500;
+ }
+}
diff --git a/site/assets/style/_type.scss b/site/assets/style/_type.scss
new file mode 100644
index 0000000..a26964f
--- /dev/null
+++ b/site/assets/style/_type.scss
@@ -0,0 +1,115 @@
+// Typography
+//
+// Headings, body text, lists, and other misc typographic elements.
+
+h1, h2, h3, h4, h5, h6 {
+ margin-bottom: .5rem;
+ font-weight: 600;
+ line-height: 1.25;
+ color: var(--heading-color);
+}
+
+h1 {
+ font-size: 2rem;
+}
+
+h2 {
+ margin-top: 1rem;
+ font-size: 1.5rem;
+}
+
+h3 {
+ margin-top: 1.5rem;
+ font-size: 1.25rem;
+}
+
+h4, h5, h6 {
+ margin-top: 1rem;
+ font-size: 1rem;
+}
+
+p {
+ margin-top: 0;
+ margin-bottom: 1rem;
+}
+
+ul, ol, dl {
+ margin-top: 0;
+ margin-bottom: 1rem;
+}
+
+dt {
+ font-weight: bold;
+}
+
+dd {
+ margin-bottom: .5rem;
+}
+
+hr {
+ position: relative;
+ margin: var(--spacer-2) 0;
+ border: 0;
+ border-top: 1px solid var(--border-color);
+}
+
+abbr {
+ font-size: 85%;
+ font-weight: bold;
+ color: var(--gray-600);
+ text-transform: uppercase;
+
+ &[title] {
+ cursor: help;
+ border-bottom: 1px dotted var(--border-color);
+ }
+}
+
+blockquote {
+ padding: .5rem 1rem;
+ margin: .8rem 0;
+ color: var(--gray-500);
+ border-left: .25rem solid var(--border-color);
+
+ p:last-child {
+ margin-bottom: 0;
+ }
+
+ @media (min-width: 30em) {
+ padding-right: 5rem;
+ padding-left: 1.25rem;
+ }
+}
+
+figure {
+ margin: 0;
+}
+
+
+// Markdown footnotes
+//
+// See the example content post for an example.
+
+// Footnote number within body text
+a[href^="#fn:"],
+// Back to footnote link
+a[href^="#fnref:"] {
+ display: inline-block;
+ margin-left: .1rem;
+ font-weight: bold;
+}
+
+// List of footnotes
+.footnotes {
+ margin-top: 2rem;
+ font-size: 85%;
+}
+
+// Custom type
+//
+// Extend paragraphs with `.lead` for larger introductory text.
+
+.lead {
+ font-size: 1.25rem;
+ font-weight: 300;
+}
diff --git a/site/assets/style/_variables.scss b/site/assets/style/_variables.scss
new file mode 100644
index 0000000..7d443cc
--- /dev/null
+++ b/site/assets/style/_variables.scss
@@ -0,0 +1,66 @@
+:root {
+ --gray-000: #f8f9fa;
+ --gray-100: #f1f3f5;
+ --gray-200: #e9ecef;
+ --gray-300: #dee2e6;
+ --gray-400: #ced4da;
+ --gray-500: #adb5bd;
+ --gray-600: #868e96;
+ --gray-700: #495057;
+ --gray-800: #343a40;
+ --gray-900: #212529;
+
+ --red: #fa5252;
+ --pink: #e64980;
+ --grape: #be4bdb;
+ --purple: #7950f2;
+ --indigo: #4c6ef5;
+ --blue: #228be6;
+ --cyan: #15aabf;
+ --teal: #12b886;
+ --green: #40c057;
+ --yellow: #fab005;
+ --orange: #fd7e14;
+
+ --blue-300: #74c0fc;
+ --blue-400: #4dabf7;
+ --yellow-100: #fff3bf;
+
+ --body-font: "Geist Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+ --body-font-size: 16px;
+ --body-line-height: 1.5;
+ --body-color: var(--gray-700);
+ --body-bg: #fff;
+
+ --link-color: var(--blue);
+ --link-hover-color: #1c7ed6;
+
+ --heading-color: var(--gray-900);
+
+ --border-color: var(--gray-300);
+ --border-radius: .25rem;
+
+ --code-font: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+ --code-color: var(--grape);
+ --code-bg: var(--gray-000);
+
+ --spacer: 1rem;
+ --spacer-2: calc(var(--spacer) * 1.5);
+ --spacer-3: calc(var(--spacer) * 3);
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --body-color: var(--gray-300);
+ --body-bg: var(--gray-800);
+
+ --heading-color: #fff;
+
+ --link-color: var(--blue-300);
+ --link-hover-color: var(--blue-400);
+
+ --border-color: rgba(255,255,255,.15);
+
+ --code-bg: var(--gray-900);
+ }
+}
diff --git a/site/assets/style/styles.scss b/site/assets/style/styles.scss
new file mode 100644
index 0000000..a390e15
--- /dev/null
+++ b/site/assets/style/styles.scss
@@ -0,0 +1,42 @@
+//
+// ___
+// /\_ \
+// _____ ___ ___\//\ \ __
+// /\ '__`\ / __`\ / __`\\ \ \ /'__`\
+// \ \ \_\ \/\ \_\ \/\ \_\ \\_\ \_/\ __/
+// \ \ ,__/\ \____/\ \____//\____\ \____\
+// \ \ \/ \/___/ \/___/ \/____/\/____/
+// \ \_\
+// \/_/
+//
+// Designed, built, and released under MIT license by @mdo. Learn more at
+// https://github.com/poole/poole.
+
+@import "variables";
+@import "base";
+@import "type";
+@import "syntax";
+@import "code";
+@import "layout";
+@import "masthead";
+@import "posts";
+@import "pagination";
+@import "message";
+@import "toc";
+
+// Sass for creating the swatches
+.colors {
+ display: grid;
+ grid-template-columns: max-content 1fr;
+
+ dt {
+ width: 3rem;
+ height: 3rem;
+ border-radius: var(--border-radius);
+ box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);
+ }
+
+ dd {
+ margin-left: var(--spacer);
+ }
+}
\ No newline at end of file
diff --git a/site/diary/dag_watching.vox b/site/diary/dag_watching.vox
new file mode 100644
index 0000000..7a7a4df
--- /dev/null
+++ b/site/diary/dag_watching.vox
@@ -0,0 +1,112 @@
+---
+title = "DAG Visualisation & Watching"
+date = 2024-05-29T00:00:00+00:00
+layout = "post"
+permalink = "date"
+---
+
+{% markdown %}
+
+# Notes
+I've been using two particular terminal invocations frequently.
+
+## Linting & formatting
+```sh
+cargo fix --edition --edition-idioms --allow-dirty; cargo clippy --fix -Z unstable-options --allow-dirty; cargo fix --edition --edition-idioms --bin vox --features="cli" --allow-dirty; cargo clippy --fix -Z unstable-options --bin vox --features="cli" --allow-dirty; cargo fmt
+```
+
+These commands lint Vox, check it for errors, and then format its code.
+
+## Installing the local copy of Vox
+```sh
+cargo install --path . --features="cli"
+```
+
+This command allows me to use the `vox` CLI built with my latest local changes.
+
+---
+
+# Goals
+
+Today, I'm concerned with:
+- Colouring pages differently when visualising the DAG; currently, the same colour is used for all pages.
+- Adding an optional path parameter to the CLI; currently, the current working directory is used by the CLI.
+- Finishing up the watching feature; currently, this feature is untested and certainly broken.
+- Putting together this development diary.
+- Adding a `meta` templating context.
+
+## DAG Visualisation
+Colouring should be done based on the node's label.
+To me, beige (ie, a light orange) is the colour of layouts, and a light blue complement is appropriate for collection-less pages.
+- If the page is a layout page, set its colour to beige ().
+- If the page is a page in a collection, set its colour to light green ().
+- If the page is a page not in a collection, set its colour to light blue ().
+
+## CLI Path Parameter
+The CLI should take an `Option`. If this path is `None`, do nothing. Otherwise, use this path to set the current environment path.
+
+## Watching
+If changes are made, wait until a certain period (eg, five seconds) has elapsed where no further changes have been made.
+When such a period has elapsed, do the following:
+
+1. Build a new DAG.
+2. Obtain the difference between the old and new DAGs; ie, calculate the set of added or modified nodes.
+ - A node is modified if it has the same label, but its page is different (not comparing `url` or `rendered`).
+ - If a node's page is the same (excluding `url` or `rendered`), it is unchanged.
+ - A node is added if its label appears in the new DAG, but not the old one.
+ - A node is removed if its label appears in the old DAG, but not the new one.
+3. Compute which pages need to be rendered, noting their node IDs.
+ - All pages that were modified need to be re-rendered.
+ - Their descendants in the new DAG also need to be rendered.
+ - All pages that were added need to be rendered.
+ - Their descendants in the new DAG also need to be rendered.
+ - Nothing is done with the pages that were removed. Necessary changes are covered by the two cases above.
+4. Merge the DAGs.
+ - In the new DAG, replace all pages not needing rendering with their rendered counterparts from the old DAG.
+5. Render & output the appropriate pages.
+
+## Development Diary
+Maintaining a development diary is important for three primary reasons:
+1. It conveys to others that the project is being developed.
+2. It aids me in returning to the project when my attention temporarily turned away from in-progress work.
+3. It helps me think through the logic before beginning to implement features or bug fixes.
+
+To build this development diary, I'll need to perform the following tasks:
+1. Find design inspiration for the site.
+2. Put together the layouts for the site (and write the `global.toml`).
+3. Put together the stylesheet for the site.
+4. Write the index page of the diary.
+
+To publish this development diary, I'll use a GitHub workflow similar to the one I wrote for [`vox-basic`](https://github.com/emmyoh/vox-basic).
+
+## `meta` Context
+The `meta` context comprises the following:
+- `meta.date`, being the current date-time of the build.
+- `meta.builder`, being the name of the software building the site ('Vox').
+- `meta.version`, being the current version number of Vox.
+
+
+Regarding `meta.builder`: I envision Vox as the reference implementation of a standard way of putting static sites together.
+Often, static site generators offer benefits & tradeoffs that are unrelated to the variation in the user experience. Users should be able to migrate their sites between implementations of what is ultimately the same class of software without needing to rewrite everything.
+This makes Vox (and the abstract 'standard' it describes) very opinionated; it specifies TOML as the frontmatter language (and `---` as the frontmatter delimiters) and Liquid as the templating language. I've come to the conclusion that these choices make sense for any future static site generator anyway, but am of course cognisant of the fact that if too many significantly disagree, then I've simply created [yet another way](https://xkcd.com/927) of building static sites.
+
+---
+
+# Future Goals
+
+In the future, this tool needs:
+1. A blog pertaining to the project, very similar in appearance to the development diary, but different in scope.
+ - Posts regarding the project's milestones, and perhaps more 'philosophical' posts about static site generators belong here. Essentially, this blog will be public-facing, while the development diary is intended for those working on Vox.
+2. Documentation on usage, essentially doubling as a specification of the 'standard' I described earlier.
+3. A friendly introduction to Vox and what it can do, including the following resources:
+ - Installation instructions.
+ - Previously mentioned usage documentation.
+ - Previously mentioned blog.
+ - Previously mentioned development diary.
+ - The code documentation generated using the Rust toolchain.
+
+Additionally, it'd be useful if I documented the CLI code. While such documentation would not be public-facing (ie, not in the generated code documentation on the site), it would be useful to have while developing the CLI.
+
+That's all for now. Thanks for reading!
+
+{% endmarkdown %}
\ No newline at end of file
diff --git a/site/global.toml b/site/global.toml
new file mode 100644
index 0000000..29651ab
--- /dev/null
+++ b/site/global.toml
@@ -0,0 +1,6 @@
+title = "Vox"
+description = "A performant static site generator built to scale."
+author = "Emil Sayahi"
+locale = "en_US"
+url = "https://emmyoh.github.io/vox"
+# url = "http://localhost:80"
\ No newline at end of file
diff --git a/site/index.vox b/site/index.vox
new file mode 100644
index 0000000..d8a3e40
--- /dev/null
+++ b/site/index.vox
@@ -0,0 +1,36 @@
+---
+layout = "default"
+permalink = "index.html"
+---
+
+{% markdown %}
+
+Vox is a static site generator that leverages technologies you know & love to build & deploy sites faster than any other static site generator available today.
+
+## Features
+* Fast build times ({% math %}<0.5{% endmath %} seconds for a medium-sized site).
+* Intelligent rebuilding.
+* Flexible data model, perfect for any static site.
+* Industry-standard languages (Liquid & TOML).
+* Comes as a single binary, able to build or serve sites.
+* Built site can be deployed anywhere.
+
+## Resources
+* Developer Diary
+* [Developer Documentation](https://emmyoh.github.io/vox/vox/)
+
+## Overview
+{% raw %}
+Sites have the following structure:
+- A `global.toml` file. Anything here defines the `{{ global }}` context.
+- `.vox` files:
+ - Inside the `layouts` folder, defining pages which other pages can use as a template; layout pages provide the `{{ layout }}` context to their child pages.
+ - Inside any other subdirectory, defining pages inside a collection; a collection provides its own context, referred to by the name of the subdirectory.
+ - Inside the root folder, defining pages not inside a collection.
+- `.voxs` files:
+ - Inside the `snippets` folder, defining partial pages which can be embedded in other pages.
+- Anything else is simply ignored.
+All of the items above are optional; even the `global.toml` file is optional if no page requires it.
+{% endraw %}
+
+{% endmarkdown %}
\ No newline at end of file
diff --git a/site/layouts/default.vox b/site/layouts/default.vox
new file mode 100644
index 0000000..9fce31b
--- /dev/null
+++ b/site/layouts/default.vox
@@ -0,0 +1,24 @@
+---
+---
+
+
+ {% include head.voxs %}
+
+