How does this tech work ?MarkdownSSRJAMstackTechAutomation
My first idea was to have both this and the previous post in a single one,
but it just outgrew my expectations (Maybe I'm not as straight to the point as I thought I would be 🤔)
Let's get to it!
I wanted some sort of system that I could just add a markdown file for each post (simple
JAMStack case), but I would prefer not to have to remember to always add that entry to the list of posts, and rather have that autogenerated based on the markdown files of a given folder.
Given a bit of research I bumped into this blog post highlighting exactly that architecture. Perfect!
@jackfranklin/rollup-plugin-markdownthis rollup plugin allows you to parse markdown metadata on import, like the following code.
title: Why a Blog ? summary: This is my first blog post, so let's start off with the why's about this blog and the stack of choice. date: 2020-05-27 author: Marcelo Tokarnia authorPic: https://res.cloudinary.com/marcelotokarnia/image/upload/c_thumb,g_face:center,r_max,h_150,w_150,f_auto,q_auto/v1590609457/profile/A54I1782_qa84qz.jpg tags: Sapper,Svelte,SSR,JAMstack First of all, I'm very excited to be writing this very first blog post, which is going to be about the blog itself, so let's say it's a meta post 😆 ...
- Then you can import all posts with wildcards due to this plugin
rollup-plugin-glob, like the following code
import posts from './*.md' const parsedPosts = // some transformations, including sort by date export default parsedPosts
On my index.svelte (aka, blog posts list page) I can just render them order by date (one of the metadata of each .md file)
To remove it, I just have to delete it.
To reorganize it, I just have to update the date metadata.
And it is all automatically deployed by Vercel with a git integration, so a simple push to master will deploy a new version to Production.
And this architecture is very easily replicable to any other project.