This project shows a sample blog written in Origami language.

View the sample blog

This sample blog is based on the origami-blog-start project. If you'd like to start your own blog like this, you can fork that project.

This project was discussed in a blog post and a follow-up post.

The text for this sample blog is adapted from portions of Walden by Henry David Thoreau.

Requirements

Site tools like static site generators often impose constraints on how you can arrange and structure your source content, but it's extremely common to have your own personal reasons for wanting things set up in a particular way.

This #pondlife blog assumes the following set of requirements:

1. The blog posts go in a top-level /markdown folder.
2. Each markdown post has a name containing a date like 2025-07-04.md; this date should be used as the date for the post. Each post has YAML front matter containing a title property. The body of the post is markdown that should be converted to HTML.
3. The images for the posts go in an /images folder.
4. The site’s static assets go in /src/assets.
5. A standard page template is used for all posts to provide consistent headers, footers, etc.
6. The project output goes in the /build folder.

Structure of the site

The site's starting point are the markdown files in the markdown folder, the images in the images folder, and the stylesheet and other files in the src/assets folder.

The site.ori file orchestrates the transformation of that content into the final tree of resources for the site:

• A series of transformations turns each markdown post into an HTML page in the posts area.
• Posts are grouped into pages of 10 posts each in the pages area.
• The index page shows the same content as pages/1.html.
• Feeds are created for the posts in RSS and JSON Feed format.

Processing markdown posts into data

The posts are written in markdown files with a title property in front matter. A short pipeline at the start of site.ori transforms those files into a form that's ready for the templates to render as HTML.

Documents in Origami are generally represented as a plain JavaScript objects with a @text property containing the document text. Each of the functions in the pipeline manipulates the collection of posts, changing either the keys (names) or values (the actual data) of the posts one step at a time.

The Origami source for the pipeline can be found in src/data.ori.

The pipeline starts with a reference to markdown. In this project, that ends up referring to the markdown folder at the top level of the project. Origami treats folder/file trees and objects the same, so if we were to render the post data at this point in YAML it would look like:

2025-07-04.md:
  title: Hello from the pond!
  @text: **Hey everyone!** Welcome to my very first blog post…
2025-07-07.md:
  title: Tiny home
  @text: When I first decided to move off-grid…
… more posts …

The next line, → =map(_, mdHtml) sends the above to a built-in mapping function called map. Here that will apply the built-in mdHtml to each of the keys and values in the set. That will change the .md extension in the keys to .html, and change the markdown text to HTML. After this step, the post data is:

2025-07-04.html:
  title: Hello from the pond!
  @text: <strong>Hey everyone!</strong> Welcome to my very first blog post…
2025-07-07.html:
  title: Tiny home
  @text: When I first decided to move off-grid…
… more posts …

The next step in the pipeline is another map. This one calls a helper function parseDate.ori written in Origami that extracts the date from a post's key and returns it as a JavaScript Date object. The resulting date is added to the post as a date field so that templates will be able to use it as a date. The data now look like:

2025-07-04.html:
  title: Hello from the pond!
  @text: <strong>Hey everyone!</strong> Welcome to my very first blog post…
  date: Fri Jul 04 2025 12:00:00 GMT-05:00
2025-07-07.html:
  title: Tiny home
  @text: When I first decided to move off-grid…
  date: Fri Jul 07 2025 12:00:00 GMT-05:00
… more posts …

We'd like the page for an individual post to have links to the pages for the next and previous posts, so the next step in the pipeline calls addNextPrevious to add nextKey and previousKey properties to the post data:

2025-07-04.html:
  title: Hello from the pond!
  @text: <strong>Hey everyone!</strong> Welcome to my very first blog post…
  date: Fri Jul 04 2025 12:00:00 GMT-05:00
  nextKey: 2025-07-07.html
2025-07-07.html:
  title: Tiny home
  @text: When I first decided to move off-grid…
  date: Fri Jul 07 2025 12:00:00 GMT-05:00
  nextKey: 2025-07-10.html
  previousKey: 2025-07-04.html
… more posts …

Because the original markdown files have names that start with a date in YYYY-MM-DD format, by default the posts will be in chronological order. We'd like to display the posts in reverse chronological order, so the final step of the pipeline calls reverse to reverse the order of the posts. The posts that were at the beginning will now be at the end of the data:

… more posts …
2025-07-07.html:
  title: Tiny home
  @text: When I first decided to move off-grid…
  date: Fri Jul 07 2025 12:00:00 GMT-05:00
  nextKey: 2025-07-10.html
  previousKey: 2025-07-04.html
2025-07-04.html:
  title: Hello from the pond!
  @text: <strong>Hey everyone!</strong> Welcome to my very first blog post…
  date: Fri Jul 04 2025 12:00:00 GMT-05:00
  nextKey: 2025-07-07.html

This is assigned to the data variable so that it can be rendered into HTML by the other formulas in site.ori.

Other implementations

This project is used as a reference artifact for comparing blog construction in various tools and languages. You might also be interested in these alternate implementations:

• Astro
• Eleventy
• JavaScript
• JavaScript using the async-tree library
• Python
• Zig