Vault CMS: Use Obsidian As A Publishing Platform For Your Astro Website
Set up Vault CMS to manage your Astro site's content in Obsidian. The tutorial covers installing Vault CMS, configuring content types and front-matter in Obsidian, updating Astro templates, and using built-in tools like Git sync and SEO audits.
Chapters
How to install Vault CMS. This is a quick setup guide for developers and Astro theme creators. In the future, I'll make more beginner-friendly one. The basic idea here is you can use Obsidian as a way to write and publish blog posts or other content for your Astro website, and it feels very native, and I'm very excited to show you. You can really inject Vault CMS into any existing Astro theme, so I'm going to demonstrate that to you right now. So to start here, let's start with the Astro theme you want to use. In this case, I'm going to demonstrate it on Fuwari, which is a pretty popular Astro theme. I'm going to grab this, uh, getting started command here, and I'm just going to run it in this directory, and it's going to ask me a series of questions. I'll call this Vault CMS demo, call it the same thing for the title, and then say demonstrating Vault CMS as the subtitle, English, and then yes, I do want to install the dependencies. I would ordinarily also initialize with Git, but in this case I'm not going to. So while that runs, I'm going to go back here, and the next thing I'm going to do is run the CLI for Vault CMS. And the options here, you can pick npm, yarn, what have you. I'm partial to pnpm, so I'm going to use that one. And go back to this when it's all finished installing and navigate to the new project directory, in this case vaultcms-demo. And once that's open, I'm going to run this command. You want to run this command from your Astro project root. And so once you do that, it's going to ask you more questions. What's nice about this preset template option, let's say you're using a— you're editing a Starlight Astro website. Well, there's a preset for that, so you can just grab that preset and it's basically completely configured for you. In this case, we're not, so I'm going to say no. Uh, where should we install it? You can install it really anywhere you'd like. I would say generally you want to install it in the source content folder, but you certainly can include it in the root folder as well. But for this instance, I'm going to use the source content folder, and it's going to install and finish pretty quickly. The next step, of course, is opening it in Obsidian. So I'm going to open Obsidian, I'm going to open a folder as a vault, and I'm going to navigate to what I just installed and go to source content and find that.obsidian folder and the _bases folder as well. If you're on a Mac or something that hides, you know, the hidden folders by default, make sure you're aware of that. And the first thing it's going to ask me is, do you trust the author of this vault? And I'm going to say yes, I do trust the author. Enable the plugins and it's going to set up everything for me, including this Welcome to Vault CMS starter. So I'm going to click Get Started here. And it's going to automatically identify the project root and the config file. But if you'd like, you can go in and specify a different one, like if you want to use astro.config.mjs or whatever you think you'll be editing more often. You can also use Astro themes with MDX support by toggling this option here. I'm going to go ahead and skip it. And here I'm going to actually— this is probably more theme specific. Sometimes themes have a designated folder for all your image attachments. Sometimes they're local. For this case, for Fuwari, I'm actually going to use same folder as current file, and I'm going to change this content type of posts from file-based to folder-based. There's some nuance in that. Some of you might know what that is, some of you might not. Generally, you want to use file-based though, and I'm going to use index as the index file name and then use this as the link base path. This also varies from theme to theme. You might want to go to the demo site and check the URLs for the various pages. I happen to know that the posts slugs include /posts with the slug on the end, so I'm going to leave it as /posts with a slash on the end. And then the sec— the second content type that identified is in this spec folder, and that's where the about folder lives. So I'm going to rename this to be more clear. I'm going to call this pages. I'm going to leave it as file-based. And I'm going to change the link base path to simply the slash, which is the root, which means that something like an about page would resolve at yourwebsite.com/about, etc. Once that's configured, I'm going to click next. I'm going to select posts as my default content type. This is really only relevant if you have more than one content type. And then down here, it's going to try to, based on the latest blog post it can find, surmise what the front matter properties should be. Now this won't be foolproof because some posts will have more front matter than others, so you'll have to do a bit of digging sometimes to get this right, but it does a pretty good job of identifying those things. For example, it's actually missed on the published, uh, front matter property here. It doesn't— didn't recognize that as the date property. So let me make sure I map that by typing that in. Does it have a description or summary? This one probably doesn't, but it behooves me to check the documentation and look at it. And look at this, it does have a description right here. So I'm going to go ahead and use this as the description property here, and it filled it in automatically, but you would replace that with whatever yours is in your theme. It also has an image or cover property on the left here. I can see the existence of the image property, so I'm going to go ahead and turn that on. And image is the default option, so I'll leave that. And then there's one last crucial thing you want to do after you update these items. you want to update the template to support it. So on the left here, I can see it's missing description. So let's do that. And publish is actually a string when it should be the date. So for a date variable, you want to insert this. If title is missing, you want to insert the title variable in quotes because that, that'd be a string, right? And then, um, it's also missing the draft status. So, oh no, draft status is actually there. It's missing the language status, but via the documentation it specifies you only need to specify a language if it's separate from your global, uh, setting. The only other one that's missing right now is the image one. So we'll go ahead and use image, we'll pop that in there. So scrolling down, we can see that, um, the pages one is a little odd. There's no property specified for this, so we're just going to click next and not worry about the pages content type. We're not going to worry about the editing toolbar right now either. This is kind of going to tell us the views that are created in our bases view in Obsidian. This is going to explain the Astro Composer configuration, the different content types that are there, the root, that sort of thing. And then what the SEO plugin is going to load to evaluate your score and, you know, run analysis on your site. And then lastly, a health check of all the essential plugins that it recommends for Vault CMS, some nice-to-have ones depending on your theme's capabilities. And then we're going to get to the kind of final step of optimizing your setup for it. Now we already have.gitignore setup to ignore Obsidian workspace files. That can get really messy if you're trying to sync between multiple devices, so that's ignored. And on the, on the Vite side, you want to click configure here to ignore the bases directory and some of the Obsidian files so it doesn't get hung up on those as issues. So then you click next and you're finally done. You click Apply and restart. It's going to do this, and here you have it. Now don't worry about this can't find a valid Git repo warning. That should hopefully not happen to you if you set it up and you initialized it properly. But you can see here, here are all the content types. Here are all the, here are all the posts. The draft example came up as a draft because we specified that front matter property. I can toggle whether or not it's a draft or not by just clicking this. I can hold Shift select multiple items, do bulk actions like set a tag for them all, delete them, whatever you might need. Imagine like this is a content management system. If you want to customize this view, you just go into the particular view that you're in and you go down to, let's say, Property Group 1. And I want to include, let's say, category. Category is another, uh, front matter property I want to look at. You can include side by side You can really customize these cards to show any of the information that you care about. If I go to this pages content type, it's going to show us that about page right here, but it has no front matter properties. And that's just how the theme operates. What I can do is ignore these brat— ignore these brat notifications. It just means I hit the limit because I kept restarting Obsidian. On the left, you can see all the posts here. The, the folder-based content type here is this guide, but then some of them are file-based. And but here it is with all the, with all of the properties and all the content. You can just edit this, and when you're done, you can use git commit and sync to just sync immediately, or you can click this icon, this dedicated icon down here. If you hover over it, it says Get, Commit, and Sync. And you have complete control over this interface. There's a dropdown custom toolbar, editing toolbar here you can enable if you'd like by clicking this button. If you want to create a new post, you just click New Note like you would normally. This is a new blog post. You can make this in title case if you'd like with spaces, and if you do, it's going to automatically create a folder or file name that is kebab case, so the slug is perfectly valid based on your title. You can include a description, you can drag and drop an image, or if you'd like, you can insert an image with Ctrl+Quote or Ctrl+Shift+Quote. In this case, let's say mountains, search for whatever image you want, it'll plop it right in the blog post. You can specify whatever tags you'd like depending on your theme's capabilities. So This is just scratching the surface. Obviously there is so much that you can do. You can edit the Astro config right here with this button. You can do an automatic SEO check. Let's say I want to, you know, check the Markdown extended features for SEO. I can run the SEO audit, and here is the vault-wide audit that I just ran. I can run it on an individual note basis. So if I see there's a lot of issues with one over the other, I can open that one up. It's going to open this one, tell me the title length is too short or whatever it is, and I can go ahead and make those changes. This is a complete content management system for your Astro website right in Obsidian. Pretty much anything you could imagine that you need to do will work inside of here, and I show you how to set it up. So hopefully you have an Astro theme that you love using. Grab it, install this into it, and start using it today. And please leave your feedback. This is an open source project, so do a pull request, create, submit an issue, whatever you would like, and I would love to check it out and try to improve it and make it the best that I can. Of course, a lot of the questions can be answered in the documentation website, which I definitely recommend that you check out. But of course, you can open an issue, pull request, or even join my Discord server and and I'll do my best to assist you. Thank you for taking the time to watch this video. God bless, and I'll catch you on the next one.
