This website is a work in progress.

Adding a page from markdown file

Adding a page from markdown file

One homepage is cool, but we might want to add more content. Let's create a markdown file in our content folder.

Place the content below in a new file content/posts/

This is a [Markdown]( file
If you are new to Markdown, you might want to check those links:
- [What is Markdown?](
- [Mastering Markdown, a GitHub guide](
- [](
- [](

Now let's add a simple route to our App.js

export default createApp(() => (
  <Router history={browserHistory}>
    <Route path="/" component={Home} />
    <Route path="/blog/*" component={BlogPostContainer} />

We also need to create a BlogPostContainer component to render the posts.

import { Router, Route, browserHistory, Link } from "react-router";
import {
} from "@phenomic/preset-react-app/lib/client";
// ...
const BlogPost = ({ isLoading, page }) => (
    {isLoading && "Loading..."}
    {!isLoading &&
      page.node && (
      <Link to="/">Go to home</Link>
// ...
export default createApp(() => (
  // ...
const BlogPostContainer = withPhenomicApi(BlogPost, props => ({
  page: query({ path: "content/posts", id: props.params.splat })

In our example above, we are doing a query on the path posts. We are using the id to find a single item. id is the filename, in our case posts/first-post (the .md extension is ignored, and stuff/ being considered as stuff).

Accessing the markdown page

We just created a route and a component to retrieve the markdown file. Now we can access our post by accessing directly http://localhost:3333/blog/first-post/.

Continue tutorial