diff --git a/astro.config.mjs b/astro.config.mjs
index 9fe7578..f6720f0 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -4,7 +4,7 @@ export default {
   // dist: './dist',       // When running `astro build`, path to final static output
   // public: './public',   // A folder of static files Astro will copy to the root. Useful for favicons, images, and other files that don’t need processing.
   buildOptions: {
-    // site: 'http://example.com',           // Your public domain, e.g.: https://my-site.dev/. Used to generate sitemaps and canonical URLs.
+    site: 'https://astro-blog-template.netlify.app',           // Your public domain, e.g.: https://my-site.dev/. Used to generate sitemaps and canonical URLs.
     sitemap: true,         // Generate sitemap (set to "false" to disable)
   },
   devOptions: {
diff --git a/src/pages/blog/posts/hello-world.md b/src/data/blog-posts/hello-world.md
similarity index 73%
rename from src/pages/blog/posts/hello-world.md
rename to src/data/blog-posts/hello-world.md
index 518039b..97d3a83 100644
--- a/src/pages/blog/posts/hello-world.md
+++ b/src/data/blog-posts/hello-world.md
@@ -1,6 +1,4 @@
 ---
-setup: |
-  import Layout from '../../../layouts/BlogPostLayout.astro'
 title: Hello World 👋
 publishDate: 30 Nov 2021
 description: Every blog starts with a single post. This is yours. Make it great.
diff --git a/src/pages/blog/posts/markdown-test.md b/src/data/blog-posts/markdown-test.md
similarity index 99%
rename from src/pages/blog/posts/markdown-test.md
rename to src/data/blog-posts/markdown-test.md
index 391f4f3..75db7cf 100644
--- a/src/pages/blog/posts/markdown-test.md
+++ b/src/data/blog-posts/markdown-test.md
@@ -1,6 +1,4 @@
 ---
-setup: |
-  import Layout from '../../../layouts/BlogPostLayout.astro'
 title: Markdown Test Page
 publishDate: 01 Dec 2021
 description: A sample page with the most common elements of an article, including headings, paragraphs, lists, and images. Use it as a starting point for applying your own styles.
diff --git a/src/pages/about.astro b/src/pages/about.astro
index b7b5e60..63d4d75 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -3,7 +3,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
 
 const title = 'About';
 const description = 'About your blog.';
-const permalink = 'https://example.com/about';
+const permalink = `${Astro.site.href}about`;
 ---
 
 <BaseLayout title={title} description={description} permalink={permalink} current="about">
diff --git a/src/layouts/BlogPostLayout.astro b/src/pages/blog/[slug].astro
similarity index 51%
rename from src/layouts/BlogPostLayout.astro
rename to src/pages/blog/[slug].astro
index db40b43..1361a5d 100644
--- a/src/layouts/BlogPostLayout.astro
+++ b/src/pages/blog/[slug].astro
@@ -1,9 +1,18 @@
 ---
-import BaseLayout from './BaseLayout.astro';
-import Bio from '../components/Bio.astro';
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import Bio from '../../components/Bio.astro';
 
-const {content} = Astro.props;
-const {title, description, publishDate, author, heroImage, permalink, alt} = content;
+export function getStaticPaths() {
+  const posts = Astro.fetchContent('../../data/blog-posts/*.md');
+  return posts.map(p => ({
+    params: { slug: p.file.pathname.split('/').pop().split('.').shift() },
+    props: { post: p },
+  }));
+}
+
+const { Content, title, description, publishDate, heroImage } = Astro.props.post;
+const slug = Astro.props.post.file.pathname.split('/').pop().split('.').shift();
+const permalink = `${Astro.site.href}${slug}`;
 ---
 
 <BaseLayout title={title} description={description} permalink={permalink} current="blog">
@@ -14,7 +23,7 @@ const {title, description, publishDate, author, heroImage, permalink, alt} = con
   </header>
   <div class="container">
     <article class="content">
-      <slot />
+      <Content />
     </article>
     <hr />
     <Bio />
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index 5ebcab6..82b9c4b 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -3,29 +3,32 @@ import BaseLayout from '../../layouts/BaseLayout.astro';
 
 const title = 'Blog';
 const description = 'Latest articles.';
-const permalink = 'https://example.com/blog';
+const permalink = `${Astro.site.href}blog`;
 
-let allPosts = await Astro.fetchContent('./posts/*.md');
+let allPosts = await Astro.fetchContent('../../data/blog-posts/*.md');
 allPosts = allPosts.sort((a, b) => new Date(b.publishDate).valueOf() - new Date(a.publishDate).valueOf());
 ---
 
 <BaseLayout title={title} description={description} permalink={permalink} current="blog">
   <div class="container">
     <h1>Blog</h1>
-    {allPosts.map((post, index) => (
-      <div>
-        { index !== 0 && <hr /> }
-        <div class="post-item">
-          <h2>
-            <a href={post.url}>{post.title}</a>
-          </h2>
-          <p>{post.description}</p>
-          <div class="post-item-footer">
-            <span class="post-item-date">— {post.publishDate}</span>
+    {allPosts.map((post, index) => {
+      const href = `/blog/${post.file.pathname.split('/').pop().split('.').shift()}`;
+      return (
+        <div>
+          { index !== 0 && <hr /> }
+          <div class="post-item">
+            <h2>
+              <a href={href}>{post.title}</a>
+            </h2>
+            <p>{post.description}</p>
+            <div class="post-item-footer">
+              <span class="post-item-date">— {post.publishDate}</span>
+            </div>
           </div>
         </div>
-      </div>
-    ))}
+      )
+    })}
   </div>
 </BaseLayout>
 
diff --git a/src/pages/index.astro b/src/pages/index.astro
index febf343..de4744e 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -3,7 +3,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
 
 const title = 'My Astro Blog';
 const description = 'The perfect starter for your perfect blog.';
-const permalink = 'https://example.com/';
+const permalink = Astro.site.href;
 ---
 
 <BaseLayout title={title} description={description} permalink={permalink}>