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!

In short:

  1. @jackfranklin/rollup-plugin-markdown this 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 😆
...
  1. 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

  1. 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)

  2. And due to the amazing pattern matching of urls provided by Sapper I can map a url to each specific filename slug of each markdown added with no additional code. Check the frontend and the backend

So truly, whenever I want to add a blog post I just need to add a MD file to this folder. Like I'm doing in this very same commit.

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.

Sweet 🎉