How to Build a Blog with Obsidian and Astro (Vault CMS Full Course)

This is the definitive guide to Vault CMS, the open-source headless content management system that's powered by Obsidian and Astro. By the end of this video, you'll know how to set up your own website from scratch, get it online, and use Obsidian to start publishing. I'll show you 3 different ways to get started at all varying skill levels. But first, why Vault CMS? Well, there are 3 main benefits: ownership, performance, and flexibility. With the ownership angle, you are in control of where you host your files and get to build something with your own name on it that's truly yours, not a Substack or a Medium subdomain. From a performance standpoint, since you're using Astro, you'll get a fast modern website without any of the bloat or baggage of services like WordPress or Squarespace or Wix. Your site will look great and load fast on any device. Flexibility-wise, you have access to thousands of Astro themes and can even make your own if you're up for it. Your setup is completely portable. Just point your hosting provider of choice to your site's repository and you're done. Not to mention all the ways you can customize your writing experience with plugins in Obsidian. When it comes down to it, Vault CMS is just a folder with preconfigured settings and a set of bespoke plugins for Obsidian. That means it also interfaces wonderfully with AI tools if you so choose to use them, but can also be completely siloed away from AI tools if you prefer that. It's your content with your customizations on your terms. I also wanted to mention that along with this video will be a companion guide you can download in the video description, and that'll kind of provide a checklist you can walk through to help you along here. And so, um, I also want to mention that this is a constantly evolving product, so things you're looking at might not look one-to-one with what you're seeing on your side because I am developing this very rapidly. But I did want to get this video out there, so without further ado, let's jump right into the prerequisites. Obviously you're going to need Obsidian. We'll download Obsidian for your platform of choice. This whole process will work across Windows, macOS, and Linux. Wherever Obsidian installs or works. And if you can get Git and Node installed, you should be good. The next thing you'll want to think about is what theme you want, what Astro theme you want. If you go to the Astro website and browse the themes, you're going to want to think about that as well. The other prerequisite is installing Git. Now that's separate from GitHub, which you'll also need to make an account for, but you'll want to install Git for your operating system. Then you want to create a GitHub account, which is separate from Git, and you'll want to create either a Netlify, a Vercel, or a Cloudflare account. If you're a beginner, I recommend Netlify, and we'll also go over examples of how to set things up with Vercel and Cloudflare in this video, so don't worry about that. And then lastly, Node.js is optional. For the first beginner section, we're not going to use Node, so it's if, if, but if you're familiar and you understand what Node is, I would definitely have that installed so you can run your website locally and preview it that way. All right, that's the beginning prerequisite steps. So let's go to the fully manual option here. All right, so the first thing we're going to do is we're going to find a theme to install. And so to do that, I'm going to go to Discover More Themes on the themes page for Astro. And I already know the name of the theme that I want, so I'm going to type in Slate. And surely enough, Slate Blog is right here. This is the one that I want to use, and you can preview it by clicking this live demo button. And if you click that, you're going to see it's a pretty nice minimal theme. It's got a— it's got table of contents on the right, it's got tags and a few other features, a theme toggle as well, which is pretty nice. So if we want to get started and install this, what we're going to do is click the Get Started button here. And that's going to take us to the GitHub page for this theme. And because this is the beginner tutorial, we'll just download the code manually, uh, like so. So just save it, and then you can extract it immediately with your zip extractor of choice. Now you're going to want to find a permanent location to put this. Don't just throw this in your Downloads folder or what have you. I'm going to create a folder in my development folder called Slate— or I'll call it example Slate site. You call this whatever you want to name your site, and then you want to extract the contents of that folder underneath it. So I'm just going to click and drag, and here we have all the folders like that. So I've got a single folder with the name of the site, and I've got all the contents of the Slate blog in there. Now the next step is you'll want to go to vaultcms.org and download Vault CMS. Now to do that, you just click this download button right here, and when you do that, it's going to give you some instructions on where to place it. Then we have to extract this folder, these 3 items there, and, um, I'm going to just really quickly— so I can give you— I'm going to make sure to give you a visual. So if I go to source and content This is the location where you want to export your Vault CMS installation. This could vary depending on what theme you're using, but generally speaking, the source content folder is the right place. So I'm just going to extract it to that location exactly. And if everything worked out, we should have our folders in here. I'm going to change the view to, uh, details so you can see the folders. Okay. So it's in the right place. The next thing to do is to actually open it with Obsidian. All right, so we're going to do that. We're going to remember this location. I'm going to copy it to my clipboard and I'm going to open Obsidian. And then I'm going to open a new vault. So I'm going to click Manage Vaults down here and I'm going to click Open a New Vault. And here we have the location. That, uh, that I saved. So if I click Select Folder, it's going to say, trust the author enable plugins, and I will say yes. It's currently setting it up, and here we have the wizard that kind of introduces you to Vault CMS. So rather than kind of click the Get Started button, because we're using Slate and that's one of the presets that we have, I'm going to select a preset instead. And all I'm going to do is type in this box, and I'm going to type in Slate, and then Apply Preset. So it's going to be fetching this information, and we're going to let it do its thing. It might take a little bit to extract the contents of that remote repository, but eventually a window will pop up, and we'll progress when that happens. Okay, so here is the preset applied, and it's going to ask me if, if I want to delete the backup. That's totally fine, there was nothing there to begin with. So I'm gonna click delete and reload. And now you can see Vault CMS is loaded with all the content in it, which is great. So the next thing I'm gonna do is I'm going to go into settings. I'm gonna scroll down on the left here and select Vault CMS from the list, and then scroll down to here, and I'm gonna click these three project optimization option items. So I'm going to ignore certain files in Git, I'm going to ignore workspace and homebase folders in Vite, and I'm going to neutralize the developer Git hooks. And that's going to make your experience a lot smoother. You don't really need to know why, um, but you'll see here in a second why that's important. And so what I'm going to do is before I set up the Git configuration, which is an important step, I want to show you how easy it is to customize the interface of your environment. Because if you're spending time in here writing posts and things like that. You want it to look familiar and comfortable to you. So I'll give you a brief example of how that would work. So if you want to look like native Obsidian, what you could do is go down here to settings. And let's say you wanted to change the theme. So I'm going to go to appearance and you can see Oxygen is selected. That's the custom theme made for Vault CMS. But if you'd like, you can change that to default. And now you have the normal Obsidian look and feel here. And if you go to UI Tweaker, which is another plugin on the left, and select the reset to default reset icon here, I'm going to click that button and I have reset everything. So it visually looks like Obsidian out of the box. And if you're an Obsidian user and you want it to kind of look like how you're used to, that's an approach you might take to get there. And as you can see, this blog post is one-to-one with the theme. So if I were to go to this About post, for example, you can see all these— all this content in here. If I were to open the, the preview site, let's go back to the Slate Blog demo site and click About Slate Blog. You can see here's what it looks like on the front end with all the emoji and the table and all that. And on the back end, you can see it is one-to-one. It looks the same. Images show up, tables show up, this formatting shows up. Markdown syntax is essentially one-to-one, which is really cool. And that's the experience you get with Vault CMS. Another thing you might notice that's a little different than what you might be used to in Obsidian is this home icon on the top left. That's a plugin called Homebase. And what's nice about it is if you want to open a blog post, it'll open a new tab. You can always click this home icon up here to open your home base. In this case, it's this Bases CMS view, and you can see all your posts in here. If there are images, they pop in that top card area, and you can kind of open the post and make edits, um, there. If you want to go a step further to make this feel a little bit more familiar, if maybe you're newer to Obsidian, if you click this arrow down here on the top right, the the toggle editing toolbar button, you'll get your own little editing toolbar. And that's useful if you want to say you don't want to use Markdown syntax by typing, you want to just be able to click something. Well, that's going to do it for you. Or you can of course do this instead, whatever you prefer. The whole point of Vault CMS is because you're leveraging Obsidian as your sort of composer, your writer, what have you, you can customize whatever you want. Whatever plugin exists for Obsidian, you can pull it in and add a UI feature or change some behavior, and you can get this to work exactly the way that you want. There's even a full screen focus mode button built in. It is something that you can customize to your heart's content. Okay, so let's go ahead and create a new blog post, and the way you can do that is using the standard new note button on the top left, like maybe you're used to, or You can use the base view new button on the right over here. Let's go ahead and click this one first. And you can see it's asking us for the title of our blog post. I'm going to call this Why I Publish From, and I'm going to use title case for this blog post. And if I click create, it's automatically going to create a kebab case post here. If you're not sure where you created it in your vault, you can click this button here, this auto reveal current file, and it's going to show you where your, what your note is in your broader vault. So this happens to be April 1st. Um, so that's why the date was injected there. And I'm going to say the reason I publish from this note-taking app, and I might give it a few tags. Maybe I'll give it a demo tag and an Obsidian tag. Now I already have a— I have some body copy that I wrote already, so I'm just going to paste it in here. Here's my blog post, uh, I tried WordPress, I tried Substack. And you can see, just like, you know, Obsidian is normal, you can go in and make little tweaks with Markdown and get it looking exactly the way that you want. So now if I close out of this tab, you're going to see there's this draft post here. If I want to make it go live, I can either go back to the home base and select this badge to make it published, or I can go in here and toggle this draft, uh, toggle off, and that's going to make it ready to go and publish ready. Okay, now that you've published your first post, I want to kind of show you another example use case of why you might use this view. If you hold the Shift key, you can actually select multiple posts at once and do bulk actions. You get set the tags by selecting this and toggling on whatever tags you'd like, or you can set or remove various properties. You can hear the remove option if you want to remove some properties. And, uh, so all this is pretty intuitive, or you can use the checkboxes if you prefer, and that'll help you do bulk actions a lot more easily. We'll actually showcase this a bit more later. I also want to show you inserting an image into a post, which is pretty easy. So I'm going to actually enter an image right here, and I'm going to invoke the command palette with Ctrl+P or Command+P if you're on Mac. I'm going to type in insert image. There's a few options here. You can insert a local image, and what that will do is that will find an image on your computer and it will actually copy it to your vault. Or you can insert a remote image and I'm going to specifically select the option Insert Remote Image here. And I'm going to type in, let's say, oranges. I want a photo of oranges for some reason. Here's a bunch of great photos of oranges to pick from. This is pulling from Unsplash, but if you have an API key, you can also use Pexels or Pixabay as well, which is pretty cool. So I'm going to find an image of an orange that I like. I like this photo of oranges pretty well, and I'm going to leave the description as oranges, but you can give it a more descriptive, descriptive text if you like. And insert that in there as is. So here we have the image. Um, and what I'd like to do last before I kind of take this online is I want to do a quick check, uh, a quick SEO check. So I'm going to expand this right, uh, this right column here, this right sidebar, and I'm going to invoke the command palette again with Ctrl+P and then type in SEO audit. And you can see OpenAudit is an option on the command palette. So I'm going to click that and check this out. I'm going to click refresh and it's going to pull in all the blog posts we have. And it's going to give us a score ranking by the ones that have the most issues. Um, I'm going to skip the two that are the demo posts and I'm going to jump right to ours. Why I publish to Obsidian. I'm going to click this audit this note button. And when I do, it's going to open the post and it's going to show me the errors. So it says the The title length is a little short, the meta description is a little short, and so a few things like that. And so what you can go— what you can do is go in and make tweaks. So maybe I'll say, okay, I've just written this longer description. Let's click refresh and see if the audit changes. Okay, now it says it's too long. I wrote a bit of a too long one. So if I— 2 Pro. Now if I click refresh, now it matches that correctly. Correctly, which is great. And if you'd like, you can copy this audit and use an external tool to help you manage it, whatever you prefer. So now what we've done is we've gone in, we've created a brand new post, we've set it to the publish status, and we inserted the image into it. So let's go ahead and make this live on the web. The first thing to do is to make sure that you have Git installed, as we mentioned earlier, and then you're going to want to go to settings here and you're going to want to go to, uh, Vault CMS and scroll down to where it says Git configuration and this missing section. This project root path will be whatever your project root is, and this is where you're going to want to set up with Git. Now make sure you have Git installed and you have a GitHub account created. Assuming that you do, you just click this setup button and you're going to want to also pick the deployment platform. So you also need a Netlify account, a Vercel, Cloudflare account as well. I would recommend Netlify for this. So click select on Netlify, and when you— once that's selected, you're going to click next. And then here it's going to give you the instructions to download and install Git if you haven't already, and then generate a new GitHub personal access token. So I'm going to go ahead and click this link here, which you should do as well, and it might ask you to log in, which is what I'm going to do. And now it's pre-populated for you a personal access token that has all the permissions that it needs. It just needs this repo set of permissions, and you can use whatever name that you'd like. I'm going to say, you know, example SlateVaultCMS site. And best practice is to make sure that you don't have no expiration for your login tokens. But if you care about convenience, you could do no expiration. It's just not recommended because it's sort of insecure. For my purposes, I'm actually going to pick 7 days, but you pick something far longer than that most likely so you don't have to do this again. So click Generate Token, and this in plain text is the token that you have. It's clearly blurred out so that you don't grab my token. This is basically like a password, so you want to handle this very carefully. How I would handle it is copy it by clicking this button here. It's going to say copied. And then I would navigate to your— back to Obsidian, paste it in this little GitHub personal access token field, and then click verify. And after you do that, it should say verified as the GitHub username that you associated this with. And I'm going to call this example Slate Site. That's fine. My personal Slate website, whatever you want for the description in GitHub. And I'd recommend making it a private repository if you'd like. That's certainly an option available to you. If you use Vercel, Cloudflare, or Netlify to deploy. And you can change the default branch name from main. You can change it to something like master if you prefer, but it will default to main. And then auto-configure the Git plugin to work with it. You want to check that as well, and then click initialize and push to GitHub. And once it does that, it should take some time, and it is now live. Your next step is to get it live on Netlify. So I'm going to click deploy on Netlify as the next step, and it's going to ask me to create a new project. So, um, if I click GitHub, it's going to open this. Make sure your GitHub and your Netlify accounts are connected. It'll just be a simple prompt for you. And if I type in Slate here, you can see there's actually going to be a couple of sites, but the one I want to pick is this example Slate site. Repository here, and I'm going to call it example-slate-site, and that's going to have it go to example-slate-site.netlify.app. And, uh, these, these default options are all great, and I'm going to select deploy example slate site. So if all goes well, we'll have gone from just downloading some files, creating a few accounts, clicking a few buttons and you're going to have your blog post that you wrote live on a website that you own on a public URL that anyone can see. That is what I'm hoping we'll accomplish here. So we're going to get a couple minutes or maybe even a couple seconds to deploy on Netlify's side. We'll view the live site and compare it to our Vault CMS instance. Okay, great, it seems to have worked. Let's go ahead and give it a shot. Let's click this link, and here is our blog. We have this Why I Publish from Obsidian blog post as of today's date. So let's open it up, and sure enough, we have that image, that, that the image of oranges right there. We've got the copy that we've written, and, uh, there you have it. It's all right here, and that's really exciting. So the next thing we can do is let's say we want to delete a lot of the demo content in this theme. So I'm going to click next and kind of close out of this modal because we have everything that we need. And I'm gonna collapse this sidebar as well because we don't need it right now. And I'm going to hold Shift and click every demo item, and I'm going to click delete. Now, I don't necessarily recommend deleting all of them right away because sometimes it can be helpful to open it and see some example posts so you know what you can do. So actually, rather than deleting them I'm going to set them to the draft status. So if I click draft, it's going to ask me if I want to set them to a draft, and I do. So now they are currently in draft status. And if you— whenever you make a change to your website, if you want to push it live, there's a button right down here that if I hover over it, it says get commit and sync. If I click that button or hit Command+Shift+S on Windows or Con— con— Ctrl— no, Ctrl+Shift+S on Windows and Cmd+Shift+S on Mac. It's going to push that live automatically. If you open up Netlify again and I go to deploys, you can see here it says it's building, and that's because it was prompted by the action we just took. So if all goes well, we'll open the website again and we'll only see one post, and the other ones will all be in draft status, meaning you won't see them on the production live site. So it should only take a couple more seconds, and then when it's done, you should be able to open the site and see the changes. Looks like it's done, so let's check it out. And check it out, our single post is the only one that is up. So if your theme supports drafts, and this Slate blog theme does support drafts, that's pretty handy because it means you can check them out. You can still look at those posts as reference, but you can hide them from the front end of your website. Okay, now as a next step, I thought it'd be useful to show you how you might connect your own domain name to your website as well. So let's go through that really quickly. Let's say you buy a.com or you buy a.xyz or whatever you want. I want to show you how you can get that connected to your Netlify site. So here I have Cloudflare. Here's a domain I purchased called david.guide. I wouldn't try to visit that URL now, uh, independently because I might be using it for something else, but In this case, I felt it was a handy thing to try. So I'm going to go back to Netlify, and on the left here you're going to see an option called Domain Management. Make sure you have the right project selected and then click Domain Management and then Add Domain. Instead of Buy a New Domain, which you could do through Netlify if you wanted to, but you might be using something like Namecheap or Porkbun or GoDaddy that would be separate. In that case, you click Add a Domain You Already Own. In my case, it's david guide, and we'll click verify. And it said it was found, so we're going to add this domain. And this is an important step that will vary depending on which domain registrar you're using. If you click this icon here that says pending DNS verification, you want to scroll down to this A record and copy this value. You can also use an alias record if your DNS provider supports it, but maybe don't worry about that yet. Just copy this IP address. It'll be the same for everyone. And go back to your, uh, GoDaddy or Namecheap or Porkbun and select add a record. This example is Cloudflare, but the same principle will apply. And I'm going to put an symbol for the name, and then the IPv4 address will use this value. If you want, you can proxy it if you're using Cloudflare. I do, but you don't have to. That's the first thing you're going to want to do. And then after that, go back to the Netlify tab and close this. And also click Pending DNS Verification on the www variant, and you're going to want to copy this as well, this example-slate-site.netlify.app. And it will be different for you. And you'll click Add Record, and this time instead of A record, specify CNAME. Use www for name and then the Netlify-based domain for that, and click Save. So now we've set up our domain name to point to this website, and it might take a few minutes to a few hours for those changes to propagate across the internet. But assuming it does, you can go back here and these warnings will be cleared and it will say you're good to go. So I'm going to refresh the page. Sometimes you can get lucky and it will appear faster than you expect. So I'm going to refresh the page and see if the status changes. Okay, it's checking and it cleared, which is great news. So I'm going to scroll down here. The other important step for your own domain name is you want to make sure you have an SSL certificate so HTTPS resolves for your domain name. So let's click Verify DNS Configuration, and it failed as it was expected to fail because it's pretty early. And again, it has to do with it being fairly early and you setting up your domain. So if you just click Retry Sometimes it'll work, and then you can click Provision Certificate. It might error out again, but let's give it a shot and just see. Okay, it is erroring out. We are trying to do this too early, but generally speaking, if you open your new domain name, david.guide, it will resolve to your website, and it looks like it already is resolving, which is great news. So if you have your SSL certificate, you have your custom domain name connected via these DNS records, you have a custom site on a custom domain name that you own. And the hosting is likely $0 a month. And every time you want to create a new blog post, you can open your handy Vault CMS vault in Obsidian and just create new posts if you like, or edit them. And this workflow is extremely fun and extremely rewarding to use. I think when more people find out how cool it is to use Obsidian to write and Astro as the backend, I think we're going to see a lot more, you users with personal websites that are not paying ridiculous fees to Word, you know, whatever WordPress hosting provider, Bluehost or whoever, or Wix or Squarespace or Webflow. People are going to be able to build their own cool websites using Obsidian. And, uh, yeah, that's the dream that I have for it. So this, this beginning one was more beginner-friendly, uh, holding your hand through most of the process. But what I'd like to show next is sort of an intermediate guide. Someone that maybe already has a Git GUI setup like Sourcetree, someone that is a little bit more comfortable running something like Node.js. Maybe there's a little bit of terminal use as well. Um, and I want to show you an example with Fuwari, which is a different Astro theme. So that's our Slate example. So I'm going to put that away for now, and I'm going to open up a new theme, a new Astro theme. So let's go back to the Astro theme directory here. Here we are, and I'm going to search for Fuwari, which is the name of the other one. Um, oops, I spelled it wrong, which is the name of the other theme to use. So here is the theme that we want, and I'm going to click live demo to get a quick— give you a quick idea of what the site looks like and how it works. I use this theme for quite a number of years, and I really enjoyed it. It's one I recommend. You can see it's very smooth. It's got some pretty nice features, a nice, uh, full-screen image viewer, standard pages and posts, and a couple things on the backend I want to show you as well. So let's say that we want to use this theme. So let's go ahead and go to the GitHub page. Now instead of just downloading it, what I would like to do is use it, create a template from it instead. Again, if you're— this is the more intermediate theme, so maybe you've used GitHub before And if so, you can go ahead and select this Use This Template button, create a new template, create a new repository. And I'm going to call this Foo— or Example Fuari Blog. And I'll just call this Another Example Fuari Site. And I'm going to change the visibility again to private, and I'm going to click Create Repository. That's going to create— it's basically going to clone this blog, but attach it to your account. And then from here you can clone this repository. So to do that, I'm going to select the HTTPS location for this repository, and I'm going to open Sourcetree by Atlassian. Sourcetree is a kind of a Git— a GUI for Git that I like to use. Maybe you use the GitHub desktop app or something else. That's all fine. The principles will be the same. You can see it, it's recognizing this as a Git repository, so I'm going to click clone and it's going to kind of go into the right place automatically for me. And here we have it, the, the entire GitHub repository. The initial commit is the entire blog of the site. So now next I'm going to use Terminal to install Vault CMS. If you go on the Vault CMS website, you can see there's two options here. There's a manual install option and a command line option. And I'm gonna use that. Now, if you have, don't have Node installed yet, I'd recommend installing Node.js. And if you do that, you can run this simple command in the root of your project and you're gonna be able to make it work. So let's go ahead and do that now. I'm gonna open up our example Fooari blog project and I'm gonna run terminal right in this directory. And if you're not familiar with how to do that, In Windows, you can open a brand new terminal, uh, if you'd like, and then use cd with the location. So in my case, it would be cd for current directory there, and it would take you to the right place. Or you can just right-click and open it like I did. The next thing I'm going to do is copy this npx create-vaultcms command. I'm going to click that to copy it. And I'm going to paste it and hit enter. After I do that, it's going to ask me a series of questions. Uh, do you want to install Vault CMS or do you want to use a preset? If you would like, you can use a preset from this. Uh, we're actually going to demonstrate that later on, so I'm going to hit no for now. And it's going to say it detected an Astro project at this location. It's suggesting the source content folder, which I'm going to say yes, I do want the source content folder. And it's going to install it. And just like that, it installed it. I'm going to say yes, I do want to open Obsidian and open to this vault. So it's going to open Obsidian for me automatically. And then I'm going to point to our new location, which is the example-fuari-blog. And I'm not just going to open the project. I'm going to go into source and content. The way that you know that you're opening the correct folder with, with Obsidian is if it has the.obsidian folder in it. If it does, that's a pretty good indication that it's correct. I'm going to again click Trust Author, Enable Plugins, and this time I'm going to go through the Vault CMS wizard. You didn't see that in the previous guide because we used a preset, but let's say, you know, like Fuwari, there is not— at least as of the recording of this video, there is no preset for Fuwari. So we'll be going through it step by step. And imagine that you could pick any Astro theme you could think of and run this same process and it should be pretty similar. Okay, so let's go ahead and click Start, Get Started here, and it's going to kind of load the structure and make some guesses. And I'm going to do some, some proofing on this. If I click Browse, it looks like it did find the project root correctly. The config file, I'm not sure if it should be this config.ts file or if it should be this astro.config.mjs file. So I'm going to open this manually myself and see. So this looks like it contains the site name and a few other things. So I'm gonna close out of that and I'm gonna open this source folder and then open this config.ts file. Okay, and this is where the title and the name is located. So interestingly, I might have to edit both of these, but for now I'm not gonna worry about that. Again, this is an intermediate step. So I'm going to select the config file here for the config file, and there are no MDX files in this, so I can skip that. And I'm going to also skip extended file types as well and click next. Now this is where I can decide where content lives, and this is what I want to explain that's actually really cool about folder-based and file-based attachments. So I'm going to actually change this from in in subfolder under current folder, which by default is a folder called attachments, to same folder as current file. And I'll explain why this is cool in a second. So if I scroll down here, you're gonna see it has two content types that it found, one called spec with the special folder and one called posts. I'm going to change the name of this one to pages. And I'm going to change posts from file-based to folder-based. And when that's done, I do want to use index as the index file name, and I'm going to use /posts as the link base path. Because if I go back to Fuwari and let's say I click a post, you can see on the top here posts is the— in the slug of the URL for the, for the page. And if I click the about page it's just at the root of the domain name. So with that in mind, I'm going to go here and change this from /spec to just a slash, because that will mean it uses the root. And the way that I know that— I'll explain the folder-based stuff in a second, that wasn't self-evident— but the rest of it, I can look at the theme of the live demo and discern what the link base path is for posts and what the link base path is for these special pages. So if I click next it's going to suggest front matter properties to use. And so I'm going to review this and make sure it's right. So there's actually a conflict here. Both published and updated are relevant. I'm going to change this property to published because I want the date property to be published, not updated. But the updated will come in handy later, so keep that in mind. And it's going to automatically fill it in to the best of its ability. Title is the title property. I just had to modify the date published property to published. It does have a description, and it's the description property. As you can see here, here's a zoom in, it will give you a sample bit of data to look at. It does have a tags property. It does have a draft property as well. And in fact, uh, it, it will have the draft logic already built in for you. And it does also have an image property as well. This is a pretty good example of Vault CMS identifying the front matter properties in your theme and just mapping them intelligently. And that's what it looks like. Here is the actual template that it generates. You can notice here that there's a category, um, front matter as well that wasn't mapped to anything, but that's fine. If there's additional front matter properties to map, it will just include them in the template by default. And then two more things I wanted to call out. We have the title variable here and the date variable. You want to store the title variable and whatever your title front matter is with quotes, and your date variable should not have quotes because Obsidian interprets the date as a, it's like a, you know, hard number, not a string. So the template is looking really good. Everything is mapped appropriately. And we're going to scroll down to pages here and it's going to look a little empty and we'll explain why in a second. The content type for spec isn't really a standard Astro one that works with Markdown. So we're just going to skip this for now and click next. Okay, so just to reiterate, the exact, the exact template should look like this. It should have a title be title, the published front matter should have this date string here, and the updated one should be these quotes. Even though it thought date should go here, I want to update this so date is here. And in fact, I don't want these quotes for updated because I'm going to use that as a date property later on. So then we can go ahead and click next from there. Content type, we do want to be posts, and I'm actually going to get rid of the spec directory for scanning for SEO stuff. This is the exercise that we did earlier. I'm going to click next, and here it's going to mention the plugins that are considered essential for Vault CMS and some nice-to-have ones that aren't necessarily essential that you could maybe even uninstall or disable if you want, but, but they can be helpful. And earlier, this was going to enable the editing toolbar you saw in the previous step. All right, so I'm just going to click reconfigure to make sure workspace files are ignored in Git. I'm also going to click ignoring home base and folder invite, which is a step we did that was similar before. Click next. And we are already using Netlify, so I'm gonna— actually, in this case we're using Vercel. That's right. So for this instance, I want to show off Vercel, so I'm going to select Vercel and click next. And it already initialized Git. It knows that it's connected to a live repository, so we're totally fine there. If for some reason you wanted to update the settings though, you can extend, extend this and change these settings, what have you. I'm not going to do that. I'm going to click next, and it's going to give you a finalization of all the configurations that you did. 2 content types, no editing toolbar, a couple new views and bases. And oh, that's funny, it added the spec directory again. That might be a bug I have to fix. It should do one SEO directory. And I'm going to click Apply and Restart. So on reload, here we have it. We went from a completely blank project to a completely fully configured one for Fooari. So one thing I mentioned earlier is the folder versus file-based method, and so I want to show that in more detail here now. So you see this post called Markdown Extended Features. If I were to open that you can see on the left it loosely correlates. But there's another post called Simple Guides for Fuwari. If I open that up on the left, you can see it's actually an index file called index.md, and there's a cover photo in that that's in the same folder. And what's really great is if I go to settings right now and I go to files and links, you can see here that the default location for new attachments is the same as the folder. We actually set that up earlier. So that means if I create a brand new post, check out what happens. I'm going to click this and I'm going to type in, this is a new post. And check it out, we created a new folder here on the left that has the file name and an index.md file. Next, I'm going to click Ctrl+Shift+' instead of just Ctrl+' to insert a new image. I'm going to type the word apples in here. And select this image and give it that name. Now check it out, the image is just dropped in the same folder. And also, rather than being dropped in the inline note right here, it's actually inserted as a cover photo because it was inserted in this front matter property. If I go back to the main view, check it out, we have a post that's in draft status with that image that we inserted, and it's all working because it's inside this folder structure. So I'm going to collapse all these folders now, and I'm going to actually— I wrote some content already to use, so I'm going to rename this to, um, Beyond Basic Markdown. In fact, I'm going to rename it like this, and I'm going to give it this description here, tutorial, a brand new tag. And then put it in the category of guides. And I'm going to leave it— actually, I'll uncheck it from draft status for now. Now, I mentioned the updated property earlier. So if I go to settings and I go to Astro Composer on the left here, I'm going to scroll down to the post content type. Actually, first thing I'm going to do is I'm going to get rid of the pages content type because again, I can disable it. I might as well just delete it because this doesn't really work in this theme correctly. So I'm just going to get rid of it so it's not an option. But if I go down to Modified Date Property, I'm going to change this from Modified to Updated. And now every time I make changes to this blog post, it's actually going to automatically update this Updated date right here. So I'm going to go ahead and type the content that I have prepared for this theme here. All right, let's paste it. All right, so here it is, and you can see we have tables here. We actually even have LaTeX in here for advanced math and a few Fuwari-specific admonitions that are here, a code block as well. And so I want to go ahead and preview this post and see what it looks like locally before I deploy it live. So let's do that first. All right, so to preview this locally before it goes live, I'm going to press Ctrl+Shift+D to open the terminal, and I'm going to run pnpm install. This might differ depending on which theme you're using. They might use Yarn or npm or pnpm or what have you. Just, you can just install whatever dependencies are needed, and once you do this, you'll be able to run astro dev, which will show you in real time what your site looks like, and that is very handy to preview and look at things before they go live on directly to your website. So it's finished installing the prerequisites and the dependencies. Let's type in pnpm dev and look at localhost and see what our site looks like and see if our brand new post shows up or not. So let's go ahead and check that out. Okay, here it is. So I'm going to open this localhost URL here. Okay, and here is the site, and here is our new blog post with the image working perfectly. If I open it up, here's all of our content. Here is our LaTeX math. Here are our admonitions, our code blocks, and our footnotes. All of this is working perfectly. So the next step to do— I'm— now that I'm pretty happy with how this looks, I could go in and, you know, mark some of these draft examples as a draft again if I'd like. In fact, Maybe I'll just go ahead and do that proactively. So let's do the same exercise we did earlier where we selected a bunch of items. I can use the checkboxes or I can hold Shift and select them. I'm gonna set them to the draft status and kind of hide them and go back to my site. It's gonna refresh and these are all now marked as drafts. Okay, so let's go ahead and get this on to Vercel. So first off, I'm going to push all these changes to GitHub so it syncs all my changes. So I'm going to click this button down here or press Ctrl+Shift+S, which is what I'm going to do now. It's going to commit all these files and push them to the remote repository. Let's go ahead and open Vercel and create this new project. So I'm going to do that. I'm going to open Vercel into a new tab. And click Add New. And I'm going to select Continue with GitHub. I'm going to do the same thing I did the first cell where I'm going to— or with Netlify, where I'm going to connect my account. And as you can see right here, example-fuari-blog is right here. So I'm going to click Import. The default options should be fine, and I'm going to click Deploy. Now, like Netlify, it might take a minute or two to get going, but hopefully it'll get launch real soon. The initial deployment is always the longest, but eventually it happens pretty quickly. So okay, check it out, it looks like it was deployed and complete. So I'm going to go ahead and open that View Deployment button and check it out. Here it is, it's on vercel.app. And I— forgive me, it is April Fools', so I have this silly clippy showing here, which is kind of annoying for the purposes of this video, but whatever. You can ignore it for now. Here is the live version and it is up. You can go through the same steps we did with Netlify where you take your own domain name and pair it here as well, and that'll work just fine. So we have successfully gone through the beginner and their intermediate examples. Before I move on to the advanced, I do want to show you a couple more little fun things with the plugins that we have installed. Let's say you have a post with not just one image like this but you have a post with a ton of images and this list just starts getting really long. One thing you can use is something called Explorer Focus, which is a plugin that I created. If you click that, it narrows down to just the, the folder that you are in, no other distractions, and you can toggle that pretty easily. Another one to show you, if you have— if you want to search an example of Obsidian's quick switcher where you hit Ctrl+O and you type in maybe the name of your post and hit enter, um, what you can do is press Ctrl+Shift+O to open OmniSearch, which gives you even more in-depth search that doesn't just look at the title, it also looks at the content itself and makes a very robust search, which is really cool. I do recommend it. Tag Wrangler is another really helpful one if you want to rename a tag easily. You just open this sidebar here, go to the tag section and right-click anything you'd like. So let's say I wanted to rename demo to demonstration like this. What I could do is click continue and boom, it's gonna change that to all the tags to look— to use demonstration instead of demo. Here is an example, here's another example. Very handy if you have a theme that deals with tags like Fooari has. And by the way, Slate also has tags and is also useful for that. If you want to get pretty crazy with the look and feel of your website, one that you can do is go to— there's a few ways you can do that. If you go to Oxygen theme settings on the left and you want to choose to use Oxygen, you can pick from these presets that are based on the Minimal theme as well. You can also create your own if you'd like. So if you click here, you can create your own preset. I'm going to call this Custom Preset, and I'm going to scroll down to dark— the dark theme and just pick a random dark green accent color and, uh, another really dark green for the background. And I'm going to click Create and switch the dark mode color scheme to our brand new one, which is this custom preset here. And it's not very visually appealing, but this is an example of how easy it is to create custom themes in Obsidian if you want to use the Oxygen theme to do it. Or if you'd prefer, you can go to Appearance and browse any of the other many themes that are available out here. If I want to switch to Sanctum, I've never used this before. If I click Install and Use, here we are. Wow, that, that is a rough one. I think it probably probably involves a font I do not have. So let's pick it, let's pick a more conservative one. So here we have Blue Topaz installed, a bit, a bit easier to work with here. But you can see how flexible this is. You can make this look and work however you want. And so Oxygen is made for Vault CMS, but you can really tweak whatever aspect you'd like. I also recommend looking at UI Tweaker and exploring some of these options. You can change property icons to whatever you want. You can change Hide behavior, if you want to show or hide the title bar or reveal the title bar on hover, whatever you would like. If I set it to reveal, that means if you hover over it, it appears, and otherwise it stays quiet. It's a nice minimal approach that I really appreciate. Another one worth checking out is the Zen Mode plugin. If I enable this full screen option and I remember the keyboard shortcut, Command+Shift+Z will get you in full screen instantly, and you can really easily toggle— really easily toggle that and just focus on writing, which is something I really enjoy doing. I use it a lot for my own blog post writing. Okay, I know we covered a lot, and we still have one more to go, but so far, if you're a complete beginner, you should be able to handle all that. If you are an intermediate, you kind of got your hands a little bit dirty with using terminal or using Git or something like that. Hopefully you're able to do that whether you're a Netlify or Vercel user. Next, we'll go the advanced path, which is as much terminal as possible and a little bit of Cloudflare as well. So let's go ahead and do that. I'm going to close Fuwari and we'll get on to our next example. Okay, for this next example, we'll be creating a new Starlight website, and Starlight is the Astro documentation theme. And so we're going to use the pnpm create astro-template-starlight. So I'm just going to copy this, I'm going to open the development directory, open a terminal from here, and run this command. It's going to ask me where to put it, and I'm going to give it a name. I'll call it, um, example-starlight-site, and hit enter. And that's going to create a new one. I will install the dependencies right away, and I will go ahead and initiate a new Git repository as well. Okay, so all of it is initiated. Now I'm just going to use cd and type in the name that we just called it, and then I'm going to invoke that same npx create-vault-cms command that we used earlier. And it's going to ask us the same thing here about do we want to install preset, and this time we do. We're going to use yes and we're going to select Starlight from the list. And just like that, we are set up and good to go. So I'm going to go ahead and click and select yes and open the folder so you can see how quickly it was to set up Vault CMS. So if I go to example Starlight site go to source and content and I open this folder and trust the author and enable plugins, we are already live on this new one. Now Git is not set up, so it's having a bit of a panic attack, but that's totally fine. We're going to set up Git with GitLab instead of GitHub so you can show that, so you can see how that works. And then also with Cloudflare for the deployment side, Cloudflare Workers or Pages specifically. So what makes Starlight a little bit different than some of the other content types is you have nested folders for each of the content types. And this is where using this dropdown is really handy. I can pick, I can easily go between the different views. These are guides and these are references. Also, if you want to figure out what the order is, selecting this, um, get this Astro config file is really handy to do that. And so here is the config. This is where you label, you put your label here. And your, you know, your other label, and you just keep adding more labels like that. Um, that's how you'd handle that. What's also really nice is this shows off MDX support. So by default, Obsidian does not support MDX files, but here we have a file that is an MDX file, and here are the nested properties that work as well. Normally, Obsidian does not have support for nested properties or MDX files, But with some fancy plugins, we absolutely do have support for that. So it might not look, you know, one-to-one perfectly, but it does work and you can edit them inside. So now that we have this installed, I'm going to create a new— one more thing to note is if you want to create a new type with the Explorer view, you could either do it here and create a new type. Let's say I want to create a new guide, um, This is a new guide. It will do it that way. Or you could right-click a folder here and say this is a new reference. And it's that easy to create it. If you go back to this view, you can see both are, are there. And again, I'm going to preview this locally with Ctrl+Shift+D and pnpm dev. We already installed the dependencies, so I don't need to install them now. We did that in the terminal earlier. And then all I have to do is click this URL here. It's going to pull up the localhost page, and in front of us we're going to see Starlight. Here it is, everything we were looking at earlier. So if I click example guide— interesting, I spelled reference wrong here. Okay, now we're going to use the terminal to publish this to GitLab. So let's go back to our terminal that we have open here that's already in the right directory, and I'm going to run glab which is already connected to my account to create a new repository for this. I'm gonna hit enter here and let's go ahead and do that. And it's done. I'm gonna add a new remote for it next. So, uh, let me just call this example-starlight-site.git. Done, and then simply run git push -u origin master. All right, that was an odd thing to do, but I'm going to sign with my browser, which should be fine. And once I give it the authority to do it, then it should work, no problem. Okay, great. So now if I open GitLab directly on the web, I should see the repository in there. And, uh, here it is. Our Starlight site is in GitLab. Great, so now that it's finally on GitLab, let's go ahead and get it connected to Cloudflare Pages. So I'm going to open this up here and click Create Application, and instead of continuing with this, we don't have a wrangler.toml file. If we did, we could use Workers, but we're going to use Pages instead by clicking this link down here, and I'm going to click Get Import Existing repository. I'm going to select GitLab from this list, make sure that I have this selected, and then click Begin Setup. And now you want to make sure that the build command is npm run build and the build output directory is dist because that's what Astro needs to work. In fact, you could just select the Astro preset from down here, which will do the same thing, and then click Save and Deploy. At that point, we just have to wait for it to start building and working. and once it does, we can open the live site and view our website live. So let's go ahead and see how long that takes. Okay, not long at all, under a minute. So let's click this and see if our site's live. And check it out, at the pages.dev site, we are live! We have all our notes here and everything, and it's a fully working version of the site. So there you have it, that's a I'm sure you can actually deploy that through terminal as well, though I haven't done that before. That's a as terminal as possible option. So what you've seen is a beginner-friendly, an intermediate, and an advanced user. Next though, I want to show you the premium experience. So imagine this will work with any Astro theme as I've demonstrated. Okay, so imagine if an Astro theme was created with Vault CMS in mind. What you're about to see is the premium experience. So there's a dedicated plugin for Obsidian for this theme. And so if you look at it, looks like it's got some Obsidian-specific theme features here. Like it's got this, this, this graph view and it's got, you know, it's got, uh, all kinds of features like a table of contents on the right. It's got a linked mentions section and it's designed to be very snappy. Fairly minimal and highly customizable. It's got this command palette so you can just type in text to quickly get to things. You've got a toggle. And so the idea here is a very appealing theme that works really great with Vault CMS. So let's check that out. I'm going to open this on the back end, and as soon as you open Astro Modular and Vault CMS, this wizard comes up and you can start editing this. So let's say you make one called, you know, my personal blog example. So you call it personal, and you know, Joe Smith, Ian, and you can walk through it like a standard experience. Let's say I want a compact design for my blog. And let's say I want it to have kind of this Flexoki, Flexoki look. And then if I want to change the font to say Poppins for the headings and let's say Lora for the body font and then maybe IBM Plex Mono for the monospace font. And I want to use the folder-based method that we talked about earlier. This kind of gives you a visual reference representation of what that is. And then you can also pick what pages you want along the top in a pretty easy drag-and-drop interface. Let's say I don't want to use, uh, projects or docs, and I don't need this privacy one. I can just close out of those and I can create a new page. Let's say I want to link to my X profile or something, so I could do X here, an external link with my x.com link here, and I got the navigation links here as well. So I'll just add a new one for YouTube, and then we'll use the YouTube icon from Font Awesome Brands. That is all easily customizable. And I'll also— why not add a profile picture as well? I'll just use the placeholder one, and I'll make it a URL so when you click it, it goes to google.com It'll be in the footer, it'll be a circle, I'll make it small size. I'm not going to enable comments for now, but you see where this is going. It's a very high-touch option. I'm going to keep it on Netlify and I'm going to configure this automatically so that it works and then click complete setup. So it's all done. All I really have to do is launch pnpm dev and see it, see what it looks like. So let's run the command Shift+D to open terminal. I'm going to run pnpm dev. You'd have to run pnpm install first, but I've already done that. So let's see what it looks like locally first. Okay, so here it is living here. Let's open it up and check it out. It's very different. It's using the Flexoki color palette. It's using the different fonts. It's the more minimal design, and if you compare it with the normal one, you can see the differences and how easy that was to set up. So if I go to the top or go to a different page, that all the profiles work. We have a little blurb here. Here's the profile picture that we added before, and here's Joe Smith, the, the copyright name. And all that, if you want to— let's say you wanted to edit that again, you can open this and you get this beautiful Settings plugin where you can go in and actually make these changes. So if I were to go here, I can change a detail. I can call this, you know, custom homepage title. I can, uh, go to the navigation and go and, you know, drag and drop these items around at my leisure. I can add new items, I can nest them, make child pages. In here I can, I can go to change the template back whenever I want. I can change the deployment option, the content type. I can go and change the theme to whatever I'd like. You can also create custom themes. You can enable the, the projects of the docs feature, which I've disabled. Here's where you change the footer if I want to change it to the current year, for example. And you have tons of toggles on things you can turn on and and the minute you change them here, they change on your local dev preview. So here's the 2026 that we added. All of this is happening in real time, and you can check it back and forth. It's incredible. It's a really great experience. And if you go to Advanced, this is where you can kind of go and export your settings, save your settings, import them. And so Astro Modular has been a pretty fun experiment in that I can make this work with Vault CMS out of the box. This is basically like a, a high-touch settings app for your theme. So I want to show you a few more examples of this in practice. So next, I wanted to show you my personal website, and the reason is because you don't even have to leave Obsidian to run your website and preview it before it goes live. And I'll show you what I mean. So if I— there's a, a plugin that you can get from Obsidian called Terminal. So if I run Ctrl+P and type in terminal and open the terminal integrated in current direct— in a root directory— in current directory, I should say. Check it out. We now have a terminal right here, so I can run pnpm dev right in here. And when I do that, it's going to work just like the standard terminal right inside of Obsidian, which is great. This works across macOS, Linux, and Windows. And then if I open the web browser, check this out. If I do, if I run the core plugin, open web viewer, I'm gonna make this full screen. Look at this. I am previewing my website. You can see the address at the top, the localhost address at the top. I can preview it in real time. If I go to this homepage on the left, you can see the content here and the content on the right matches. If I hit enter, I say, hello, this is a test. The webpage will refresh with the text that I'm typing in real time. Here it is. So you don't even have to leave Obsidian to run this, which is incredibly powerful. And just like that, if I, if I were to say hit Ctrl+G, and open the graph view, and I were to open the graph view on this theme that I have, they're very similar if not identical. The only difference is this is color-coded and this is not, and that, that was a design choice. So pretty incredible what you can get. And, uh, so this just scratches the surface of what you can do. I also wanted to mention that bundled in with Vault CMS are a few extra plugins One is called Folder Notes, and that's really helpful if you use the folder-based approach like I do here. When I expand my posts here, these are all actually folders. So here's an example of one, but when I click— I'm going to close out of this, uh, this extra section here— but when I, you know, click the folder name, it actually opens the index note associated with it. I'm also going to close this terminal as well. Um, but you can see how it makes things a little cleaner and all the images in this post are organized within each post. And if no post has any images at all, there's no dropdown arrow next to it. So it just makes things tidier and easier to understand. And like I said, let's say this post, let's just find one that has a lot of images. Um, I guess it doesn't need a lot of images. Okay. This is a pretty good one. So here's my post about the split keyboard. Um, for one thing, I also have like dimmed properties so that they're hidden unless you hover over it. That's a choice that I made. What you can see is if I were to expand this and then use Explore Focus, the left is a lot cleaner and less disorienting because I'm just worried about images related to this post. And so that's really handy, a really handy feature. It becomes really nice when you have tons and tons of posts on the left and tons of content to kind of rummage through. And this has been an amazing way to blog on my site. I've been using a version of Vault CMS for basically 2 years or so, and I started formalizing it with the Astro Composer plugin and went on from there. You can add all kinds of other plugins to this. I have a dictionary one that I use all the time, so if I'm writing on a topic and I want to use a certain word, like, you know, what does scourge mean? You can look it up and hear the pronunciation. Here's the noun of it and here's the verb. Like, that's just one example. If I want to run an SEO audit on the whole thing, it's going to be able to do it and give me results. It's going to find me the most problematic blog posts and tell me why and what I can do to fix them and make them better for search engines. This thing is just an absolute dream to use, um, and the potential is wild. If you want to use a theme like this one, there is one called Axis that you can purchase right now. It's my only paid theme. Everything else is open source. Astro Modular is open source. The vast majority of Vault CMS is open source. This is my premium theme. It's got the same really great, um, graph view that actually does not just connect to blog posts, but it also connects to your standard pages or documentation, things like that. It's got some really nice under the hood stuff as well that I want to show you. So if I go to the settings app of Axis, which would be Axis settings, I go to advanced, you can insert header and footer codes. You can, you can turn on a cookie consent banner— that's optional by default. You can also set up some really nice looking navigation items and a new improved UI. There's some new layout options you can pick. There's magazine, there's grid, there's minimal, and all the stuff that you loved about Astro Modja but even better and even easier with more robust cool features. You also have an entire redirect section, so if you want to create a custom redirect like yourexample.com/whatever there's a whole built-in interface for that that makes it very easy to do. And you can also tag your— you can, you can link to your tag notes and really quickly do that as well. So this, this kind of deserves its own video, to be honest. So I don't know if I'll cover much about Axis in this video, but all this to say, you can very quickly imagine how amazing it is to go from just any old Astrocyte to plugging in Bolt CMS to it, then really making it your own, getting it, you know, first off, getting connected to GitHub or what have you, and then Netlify, and then getting it out there, uh, your own domain name, and then using plugins that you want to use and really improving your experience. So we covered a lot in this video, but hopefully by now, after seeing how you can use it with Slate at the beginner level, Fuwari is an example of your intermediate, and the Starlight, the advanced level, and the custom angle with Astro Modular. I am hoping that you have enough confidence to create your own blog, and if you're an Obsidian fan, you can use your favorite note-taking app to do basically all of it. If you go the, the route we showed in the beginning, you're never touching a config file, you are never touching a a terminal at all. You're never touching Node.js. You are just, you know, using everything inside of Obsidian and the occasional, uh, config file within that as well. And this little rocket icon is helpful for that. So, uh, thank you so much for watching. Um, I'm— I've poured so many hours into this. It's been a labor of love. I've really poured a lot into it since August when I really You know, I really increased production there. I've made about, I don't know, a dozen Obsidian plugins here or there. I made an Obsidian theme and a bunch of functionality for that theme, and I've tested it across the main providers: GitHub, GitLab. I haven't tried GitT yet. I've tried Netlify, Vercel, Cloudflare, and I want to expand it to even more offerings. I want this to work with as many Astro themes out of the box as possible. So I'm looking for people to help me add presets on the preset repository, which is also all open source. And, uh, that's, that's everything. That's everything I want to show for this video. And I'm looking forward to any feedback, any questions, any comments you have. And if you'd like to support me, you can purchase the new Axis theme, or you can support me on Patreon. All the links will be in the description below. Thank you so much for watching to the very end of the video. I really appreciate your support. I look forward to seeing all your comments and your questions and any pull requests. Anything you can do to help improve this would be greatly appreciated. God bless you, and I'll see you in the next video.