diff --git a/routes/api/blog-posts.js b/routes/blog.json.js
similarity index 100%
rename from routes/api/blog-posts.js
rename to routes/blog.json.js
diff --git a/routes/blog/[slug].html b/routes/blog/[slug].html
index 2646930..96c4699 100644
--- a/routes/blog/[slug].html
+++ b/routes/blog/[slug].html
@@ -59,7 +59,7 @@
 			// is called [slug].html
 			const { slug } = params;
 
-			return fetch(`/api/blog/${slug}`).then(r => r.json()).then(post => {
+			return fetch(`/blog/${slug}.json`).then(r => r.json()).then(post => {
 				return { post };
 			});
 		}
diff --git a/routes/api/blog/[slug].js b/routes/blog/[slug].json.js
similarity index 93%
rename from routes/api/blog/[slug].js
rename to routes/blog/[slug].json.js
index f1a151f..33fc51e 100644
--- a/routes/api/blog/[slug].js
+++ b/routes/blog/[slug].json.js
@@ -7,7 +7,7 @@ posts.forEach(post => {
 
 export function get(req, res, next) {
 	// the `slug` parameter is available because this file
-	// is called [slug].js
+	// is called [slug].json.js
 	const { slug } = req.params;
 
 	if (lookup.has(slug)) {
diff --git a/routes/api/blog/_posts.js b/routes/blog/_posts.js
similarity index 96%
rename from routes/api/blog/_posts.js
rename to routes/blog/_posts.js
index 0864315..9e1ac88 100644
--- a/routes/api/blog/_posts.js
+++ b/routes/blog/_posts.js
@@ -4,7 +4,7 @@
 // service of obviousness, we're just going to leave it here.
 
 // This file is called `_posts.js` rather than `posts.js`, because
-// we don't want to create an `/api/blog/posts` route — the leading
+// we don't want to create an `/blog/posts` route — the leading
 // underscore tells Sapper not to do that.
 
 const posts = [
@@ -70,7 +70,7 @@ const posts = [
 			<ul>
 				<li>It's powered by <a href='https://svelte.technology'>Svelte</a> instead of React, so it's faster and your apps are smaller</li>
 				<li>Instead of route masking, we encode route parameters in filenames. For example, the page you're looking at right now is <code>routes/blog/[slug].html</code></li>
-				<li>As well as pages (Svelte components, which render on server or client), you can create <em>server routes</em> in your <code>routes</code> directory. These are just <code>.js</code> files that export functions corresponding to HTTP methods, and receive Express <code>request</code> and <code>response</code> objects as arguments. This makes it very easy to, for example, add a JSON API such as the one powering this very page (look in <code>routes/api/blog-posts</code>)</li>
+				<li>As well as pages (Svelte components, which render on server or client), you can create <em>server routes</em> in your <code>routes</code> directory. These are just <code>.js</code> files that export functions corresponding to HTTP methods, and receive Express <code>request</code> and <code>response</code> objects as arguments. This makes it very easy to, for example, add a JSON API such as the one <a href='/blog/how-is-sapper-different-from-next.json'>powering this very page</a></li>
 				<li>Links are just <code>&lt;a&gt;</code> elements, rather than framework-specific <code>&lt;Link&gt;</code> components. That means, for example, that <a href='/blog/how-can-i-get-involved'>this link right here</a>, despite being inside a blob of HTML, works with the router as you'd expect.</li>
 			</ul>
 		`
diff --git a/routes/blog/index.html b/routes/blog/index.html
index 70f17a8..d8deaf5 100644
--- a/routes/blog/index.html
+++ b/routes/blog/index.html
@@ -32,7 +32,7 @@
 		},
 
 		preload({ params, query }) {
-			return fetch(`/api/blog-posts`).then(r => r.json()).then(posts => {
+			return fetch(`/blog.json`).then(r => r.json()).then(posts => {
 				return { posts };
 			});
 		}