Fresh Blog
This project provides a Fresh Plugin that allows for the easy creation of a blog.
Inspired by https://github.com/lumeland/theme-simple-blog and https://github.com/denoland/deno_blog.
Demo
The tests/fixture
folder within this repository provides an example of this
plugin being used to power a project.
Features
So what does this actually do? It registers one middleware to load the posts and stash them in a global context for later usage. I’m open to PRs on improving this!
Additionally, it provides the following routes:
- an
_app.tsx
for the layout (this should be configurable in the future) - a
blog/[slug]
route for actually showing posts - an
index
route for showing post excerpts and a paginated listing of posts - an
author/[author]
route for showing all posts of a certain author - an
archive
route for showing all posts, with a listing of tags for filtering - an
archive/[tag]
route for showing all posts of a particular tag
Usage
In your main.ts
(or wherever you invoke start
) add an import like the
following:
import {
BlogOptions,
blogPlugin,
} from "https://deno.land/x/fresh_blog@0.0.1/mod.ts";
(Note: you probably want to use the latest version, which isn’t 0.0.1, but don’t
do this: https://deno.land/x/fresh_blog/mod.ts
either.)
You’ll need to configure the plugin. An example could be something like this:
const blogOptions: BlogOptions = {
title: "Reed's Blog",
rootPath: import.meta.url,
navbarItems: {
Archive: "/archive",
About: "/about",
Contact: "/contact",
Projects: "/projects",
},
};
There’s also an option to configure the postsPerPage
which defaults to 10.
Then change your start
invocation like so:
-await start(manifest);
+await start(manifest, { plugins: [blogPlugin(blogOptions)] });
Put your posts in a posts
folder at the root of your project. My personal blog
looks like this:
tree
.
├── README.md
├── deno.json
├── dev.ts
├── fresh.gen.ts
├── main.ts
├── posts
│ └── (lots of posts here)
├── routes
│ ├── about.tsx
│ ├── contact.tsx
│ └── projects.tsx
├── static
│ ├── favicon.ico
│ └── logo.svg
└── twind.config.ts
Note how I’m not providing any index file – that comes from the plugin.
Post Details
Front matter should be in the following format:
---
title: "Collaboration is Great"
date: 2023-6-19 04:38
author:
- Reed von Redwitz
- Guest Author
tags:
- placeholder
---
Note that you can also provide authors and tags as single values:
---
title: "Single Tag"
date: 2023-7-10
author: Single McTag
tags: single-tag-test
---
To get a snippet (excerpt) to appear on the index page, add the following to function as a separator within your content:
<!--more-->