Skip to main content

← All videos

Contentstack Automate Magic: Markdown pages to entries

June 27, 20257:31
ContentstackCMSAPI designContent opsCloud & infraFrontend

In this video @timbenniks shows how he uses a simple automation to migrate his Markdown blogposts to Contentstack entries including Taxonomies, native Contentstack image assets and JSON for the rich text editor field.

Join the Discord community at https://community.contentstack.com Learn at our Academy: https://contentstack.com/academy Try out a kickstart: https://www.contentstack.com/marketplace/kickstart-next-js

Transcript

This is Tim from ContentStack and I have a bunch of markdown files as my blog post from uh when I built my website before I worked at content stack. But I want to get these blog posts that are now markdown files into content stack without like doing all this manual work for like 35 blog posts or maybe in your case 1,600. We don't know. And so I want to show you the power and the magic of content automate to make this happen. So um this is my website and then here I have a bunch of writing and I want to get all this stuff including its code blocks and images and tags and publish and reading time all that stuff. I want to get this into content stack without having to do too much manual work. And so for that we can actually do automations in content stack. And so I created an automation which I'll go through in a second which actually does it all for me. I didn't really have to do any much coding at least not in my code editor. I did some coding here. There's a there's a bunch of like smaller code blocks here. Um so let's do it first. And so there's an HTTP trigger to call this automation which I have here. I already put it here. So I actually want a URL. So I just go to GitHub because my website is open source and this is one of those markdown files, right? This is this is actually this blog post. So let's grab that. Let's go for raw. So we get the blob from GitHub and we just paste it here. So now it just said, oh, I just triggered something. But what actually happened? This automation just ran. And so what we can actually have a look at is the execution log. And this just happened. And so it looks like everything was successful. Well, let's have a look at my CMS. And let's refresh. And let's see if there's actually an article. There it is. And so now we went from markdown to this whole thing. So we have the title, we have the URL, which is the slug. We have the canonical URL. It added the AI as a tonomy term. I have description, date, it updated an image and it uploaded that and it got it actually from here and then uploaded it into content stack and we can see that here. Here's my asset. And then it also has the JSON rich text which is actually very important because go to go from markdown to the rich text editor in content stack is not too easy sometimes because this has this gets JSON as input and it's JSON as output that you can then later make HTML again. And so this automation did all of this. So let's dive in how I actually did this. So, let's go back to my automation and I turn it off for the moment so we can actually look at what I've whatever I you could call it coded or vibed a little bit because lots of the JavaScript in here I just did with AI. So, we make an HTTP request trigger. For now, I'm literally just running this manual because I only have 35, but you could of course make a list of those and then go over it with some script if you have that. Um then I get that URL because what actually is coming in we can actually hit test. So what comes out is a query parameter with the URL that goes directly to my GitHub. This could be any URL with markdown for you. Um then I actually query that. So I get all the information, right? So I'm literally just fetching it and getting the text back and giving that back to my automation. And then here, let's fix that typo, shall we? Here I actually now have a bunch of fancy stuff going on and this I actually fcoded with JG GPT in this case. So I get my markdown from my previous response when I query that markdown file and then I have a function to split my front matter. I have a function to parse the the YAML or YML I don't know how people say this um from the front matter which is essentially this stuff because there's a bunch of meta data here in this file um then I well that does a bunch of stuff then I clean image URLs because the image URL is actually hosted let's see I don't even know in this case the image comes from def.2 2 where originally my image was uh hosted. Um so I clean that up. I have a very simple markdown to HTML function here that I just fcoded and then I grab all that information and I return my meta data and my content which is parsed markdown and that markdown then actually became HTML. So then I actually map my tags that I get from here. Currently it's only AI to a taxonomy in content stack. So I have my taxonomy set up already with everything in there. So I just kind of whatever amount I get in my tags, I map it to a content tax t taxonomy here. Um then there is an action that is able to format whatever HTML you give it to the rich text editor JSON format that our rich text editor needs. And so I just get back whatever HTML I have from my previous step. And then I actually convert that to the JSON that the rich text editor likes to read. And so that is then done. Then I grab the image. I take the URL of the image and say create me a new asset in content stack with the management API which is the contact management create an asset. I give it the URL. That's literally this one here from the third step. And it just uploads it for me. And then I create a new article. And so there's this really handy button that I won't click now, but you can. If you click this here, you fetch the schema for a new article. And so all the things for these previous steps that I have, right? So from step number three, I got like the metadata for the title, the slug, canonical, things like that. Um, I'll actually have to probably put a date here. That's correct. So now I can actually go to step three. Where's my date? There it is. Right. So now I just added that variable for the date in there. Then my thumbnail is the item I made in step number six. Just before this, I just add the UID. Then I get the reading time is again from the step three meta. Then the content that we just converted from HTML to rich text JSON. And then it tonomies from the other step. And then when we test this action, well, right now it already exists because this is exactly the same one we just looked at. And then you can go here and it works. And so this was probably the fastest way I've ever explained an automation. But this was mainly to show you how incredibly versatile our automation library is. And imagine when we release AI agents, agents will be able to create these types of automations using our MCP server. So it really knows exactly what APIs do what, how can I make steps for my automations. And so you get so much power through that. So stay tuned for when we release that soon. Um, happy coding or not coding as much and doing more automations. Cheers.