Transcription
Hello, my name is Callum, also known as wots, and welcome to the tutorial on how to publish your Obsidian Vault for free as a digital garden or as a blog website. The choice is completely up to you.
I'll be walking through how I use the Obsidian Digital Garden plugin to publish my own selected portion of my Obsidian Vault so that I could create a digital garden on a new website and point it to a custom domain. This is by far the easiest and cheapest way to launch your own website based on your Obsidian Vault, and it will allow you to build your own blog or your own digital garden.
I'll be showing you how you can use the markdown files that are created on your Obsidian Vault to produce a static site using a static site generator that's connected to the Digital Garden plugin for Obsidian, and also how you can host this website using Netlify. I'll also show you how you can then connect this vault in your Obsidian Vault to your own custom domain name so that you can produce your own website bootstrap from your existing Obsidian vault as easily as possible.
Okay, so now that I've explained a bit of the philosophy, we can get into the details on how you can actually launch your own website, which I'll be putting on wanderloot.xyz. There are three different elements to building a static website. The three parts are markdown files, a static site generator, and hosting.
So, for markdown files, I'm going to use Obsidian, which I'll show you a bit more later. For the static site generator, I'm going to use the Obsidian plugin called Obsidian Digital Garden. The Digital Garden plugin, which uses 11ty to create a static site using a static site generator, which is converting markdown into HTML. And then I'm going to be using Netlify as my hosting service, though you can also use Vercel, GitHub Pages, or some other hosting service.
So, all of the websites that I've talked about here, I will link in the description below, which includes some starter guides on how you can get going with the Digital Garden plugin if you want to have a written copy afterwards.
Okay, so the first thing that you're going to need to do is create a GitHub account. The GitHub repository is going to be used to populate the static site generator of the Digital Garden plugin. There we go.
Next, I'm going to go to Netlify and I'm going to create an account. I'm going to sign up and I'm going to use the same sign-in as GitHub just to simplify the connection between Netlify, my hosting service, with GitHub, the file management system. There we go.
So now I have almost set up my Netlify project. And just briefly, I want to show you why I'm using Netlify, checking out their pricing model. So, on the free tier, I have up to 300 build minutes per month, and I can have up to 125,000 visitors, and I can have 100 gigs moving through the website per month as the bandwidth. So, for me, using markdown files and probably a few images, I will not be hitting this 100 gig a month. I don't really expect to hit 125,000 site visitors per month. I also don't expect to take more than 300 minutes of building per month. So, for me, this free tier is great.
I know that some people use Vercel, but what happens with Vercel is they sometimes have a limitation to how many changes you can make per day. I believe it's 30. So, people have run into issues where if they add more than 30 notes to their digital garden per day, then they can run into issues. Now, I'm not sure if the Digital Garden plugin has fixed that because I know they were working on batch committing to GitHub, so batch publishing the notes. The Vercel issue might be moot at this point, but for now, I'm just going to use Netlify. The beauty of being able to use markdown and GitHub is that we can always change to a different hosting provider later.
Okay, so now I'm going to take a look at the getting started in the Digital Garden docs of the Digital Garden plugin, and it tells me to download and install the community plugin. So, let's go do that for a moment. So, I'm going to go back to Obsidian, settings, community plugins, browse, Digital Garden, install, enable. There we go.
Now, we need a GitHub account, which I've already signed up for. You'll need a Vercel account. I'm using Netlify, which again, is completely fine.
Okay, so if you want to use Vercel to deploy your static site, your digital garden, you can click this button here, "Open the repo," and that will take you to the repo where there's a button at the bottom, "Deploy," and this will deploy it on Vercel. As I just mentioned, I'm planning on using Netlify rather than Vercel. So, if I go over to the side here, there's an option under "Guides and How-tos" for "Hosting Alternatives." I can click on that, and if I scroll down, I can see that there's a "Deploy to Netlify" button. So, I'll click on that. There we go. That's it.
Now, this should have created automatically a repository on my GitHub. So, I'm going to go back to my GitHub, and there we go, "digital-garden." So, if I click on that, I can see that it's cloned it from the digital-garden GitHub repository and then it's deployed it on Netlify. I click "Skip." There we go. Now I can see that my website has just deployed successfully. So, that took a few minutes. The build time was 31 seconds. So, that means that every single time I click "Publish" on a note on my Obsidian, it's going to take a certain amount of time to build the website. So, I have up to 300 build minutes per month. If you start to run into issues with that, you can pay a little bit per month, or you can change your hosting provider and just deploy that GitHub repository to a different hosting provider.
Back to the startup guide. Okay, so now I can go into my digital garden into my vault, go take a look at the options. I can check, double-check that my repo name is "digital-garden." Yep. So, this is the title here. So, I can just copy that, put it into GitHub. My username, I can see here, is "wander-loots." So, I typed that in.
Okay, so the next step is that we need to connect the GitHub account to my Obsidian Vault. So, if I go to this button here, it's going to try and generate a token, which allows for the authorization between GitHub and Obsidian. And if you go to the Obsidian Vault, you can see that there's a GitHub token generator here. And if you click on it, it takes you to a place where you can generate a new personal access token. This is the classic authorization. However, as it's noted here in the description of the how-to guide, there's a different feature that you can use where it's much more secure because the fine-grain token gives you access only to a specific GitHub repository, which means that if you had multiple GitHub repositories and you were using the old token access, it would give Obsidian access to all of your repositories, which, depending on what you're working on, is not very secure. But as it's noted here, if you only have one single repo that you're giving access to, it's not that big of a deal to use the original token type, the classic token. But because I have other GitHub repositories, I'm going to generate it as a fine-grain token on GitHub.
Going to give it the name "digital-garden." We give it 90-day access. There we go. And see here, with the fine-grain token access, I can select the repository that I want to give it access to. So, I'm keeping these other ones locked, and I'm giving it access to the "digital-garden." Now, this is a little bit more complicated, but I do have to give it select permissions. So, if I go back here, so if I go to the "Contents" section, I need to give that read and write access. And "Pull Requests," I need to give read write access. And I believe that's it. And then I give a summary of the permissions on the bottom, three permissions for my one repository, and it gives no access to my account. Again, I selected 90 days for the expiration, which means that I will have to generate a new token after 90 days. If you want to make this last longer, you can select "Custom" and extend it, and I believe the duration maximum is one year.
Now, let's click "Generate token." There we go. Once you've generated the token, I can go back to the Obsidian plugin and copy and paste the token. And there we go, my GitHub is now authenticated.
Now that I've copied it in, and we can see that I have the authentication check mark there, it's time to create our first note. There are two main features that are essential to consider for the Digital Garden plugin. They are "DG Publish" and "DG Home." So, let's create my home. Now, I can write something briefly, and I can add a new property here. The property needs to be `DG Publish` and `DG Home`. So, let's add `DG Publish` first, and let's make this a checkbox type. And `DG Home`, and we'll make that a checkbox type as well.
So, I'm going to check this one because it's the home. By checking this box right here, I tell the Digital Garden plugin that this note is going to be the homepage of my digital garden that will be displayed as a static site on Netlify, or Vercel, or GitHub Pages, whichever hosting service you did. That means that you should only ever have one note that has this box checked, otherwise you're going to start to get into conflicts. So, if you ever have an issue with your website being displayed, check to see if perhaps you've accidentally selected another note to have the `DG Home`.
Now, I want to publish this note. Click "Publish." And then, if I press Command P, I can click "Publish Digital Garden single note." Publishing notes successfully. Publish note to your garden. So, now if I go back to my URL, which should be on my Netlify site, there we go. We can see that it's building and it should be launched now. Let's take a look at the actual website. If I click "Open production deploy," you can see that I have "digital-garden," and this is the home of my digital garden. Woo!
So, again, what just happened here is I created a new note that I just called "My Digital Garden Home." I added two properties here, "Publish" and "Home," and then typed some words in. By clicking the command of "Publish Digital Garden Publish Single Note," it sent this note to my GitHub repository, to "notes/vault," and here we go. I can see that I have my markdown file called "wander-loots.xyz-digital-garden-home," and that's it.
So, now if I wanted to create a new note, say I want to call this "What is a Digital Garden?" There we go. So, if I add property `DG Publish`, `DG Home`, and I click "Publish," to go to "Publish Single Note." Successfully published my garden. That has now added a new file to my markdown folder. So, now if I go back and publish multiple notes, it's now publishing multiple files. I just click "Go." So, it's going to take a moment for it to build. There we go. Now it is building in progress. So, if I go to my website and click "Refresh," now I can see that I have a new note in here that I've linked to in my first note. If I click on it, it shares what I just wrote. That's awesome.
One quick thing I want to point out is that by default, your GitHub repository is a public repository. So, I'm going to quickly show you how you can change this setting to private. You go into your "digital-garden" repository that you just made, go up to "Settings," you scroll all the way to the bottom, there is the "Danger Zone," and this is where you can change the visibility of your project. So, I've already clicked mine and changed it to private, but yours will start off by saying "Public," and you can change it to private. You'll receive a warning, but as this is the first thing that you've created in your "digital-garden" repository, it's no problem to change it to private if you want. And this will just stop other people from being able to access the contents of your repository. So, it's a pretty important step if you want to maintain full privacy, even though you're publishing these notes to your public website.
Anyways, okay, so now that you have an understanding on how to publish the notes, let's figure out how we can make this look a little better. So, let's take a look at the "Manage Note" settings. I wanted to put all of the settings on here. "Showing the home link" is going to indicate whether or not the current note goes back to the home note. "Showing a local graph" is going to show how that note connects to other notes. "Showing back links" is going to show the notes that are linked in that file, so you can easily click back and forth between linked notes. "Showing a table of contents" will show if you have different headers, it will pull automatically to help people navigate as they read. "Showing inline title" will show the title of the note as a title of the page on your digital garden. "Showing a file tree sidebar" is going to show a folder-type navigation system, so you can move back and forth between notes that way. "Enabling search" is going to turn on search so that I can search for whatever it is I'm looking for on the website. "Enabling link preview" is going to allow me to hover over top of a note so I can see what the note is that I'm linking to. And "Show tags" is going to pull the property of tags in my notes so that I can use different types of categories to help organize my notes on my website.
Now, I'm going to manage the appearance. So, rather than calling my site "Digital Garden," I'm going to call this "Wanderloots Words." And I'm going to add a timestamp and updated timestamp. Adding a timestamp will show when the note was created, and adding an updated timestamp will show when the note has been updated. So, this gives an indication to how long it's been since the author has updated the note, which could give you an indication on whether the note is up to date or is perhaps even relevant anymore.
Let's click "Apply settings." Apply settings. And if you want, you can introduce custom CSS. This will allow you to manipulate a lot more with how the notes are displayed on your digital garden, but I'm not going to get into that at the moment. And with the theme, you can select any number of different themes here. So, there's probably 100 here that will allow you to go through and create some different form that you can customize the website to look a little better, or a little more personal for what you seem to like. So, just as an example, let's go with "Aurora Twilight." That sounds nice.
Settings to site. Here we go. Let's add the property of `DG Home`, `DG Publish`, and click "Publish." And now I'm going to publish multiple notes. There it's successfully published. Now let's go back to Netlify, refresh, and here we go. It's now starting up, building. There we go. So, I can see that three assets were changed, the previous files, and I generated different pages, and it's built. So, let's go back and refresh.
Now you can see all of the different changes that I've just implemented here. So, I have the new theme, which is the "Aurora Twilight." I have the title of the note is up here. I have a search function on the side. I have a new title, and I can go and I can see that all of these files are sorted in the folder of "vault." So, if I wanted to introduce a different folder system to help organize my digital garden, I can do that in Obsidian, and then I can update the build so that it shows all the different notes along the side here.
So, now if we look at the side here, I can see that there's a backlink section. So, I can see that the "digital-garden-home" shows this. And if I hover over that note, it shows a preview of what that note is. So, if I go there, I can now see what was displayed here to the home. And on the side here, I also have a knowledge graph. So, this is a fully manipulatable knowledge graph where I'm able to see how the notes connect to one another. You can expand and make it bigger. So, this provides a cool way where you can see that my "digital-garden-home" links in this direction to the note "digital-garden," in the same way that it links to the note "Self-Sovereignty is Underrated." Close that again. If I hover over this, I have a preview. And it's nice because I can see that this note was created at 1:35, and then it was updated at 1:36. So, again, this shows you how relevant the note is based on how long ago it was created.
So, now before I get too far into it, I want to show you quickly how I can also create a template for this digital garden system. As you saw, I've been putting `DG Home` on every note and `DG Publish` on every note. I also will want to add tags in so that I can bring in a category, potentially add aliases. Maybe I want to have this be referred to purely as "self-sovereignty." That means that now if I wanted to link to this note, I could type in "self-sovereignty," and it would link to this same note of "Self-Sovereignty is Underrated." So, instead of having "digital-gardens," "what is a digital garden" at the bottom here, if I went back to "What is a Digital Garden" and added an alias, I could add "digital-gardens," "digital-g," and then if I went back to this note, I would be able to introduce that same previous note, the "digit," "what is a digital garden," but use the words of "digital-gardens." So, that just helps it provide a little more seamless of a way to read it in writing without having to link the direct note name itself.
Okay, so now I want to create a digital garden template. There we go. I want to click "Add property" `DG Publish`. And I'm going to uncheck the `DG Home` because that should never happen again. And `DG Publish`, I'll leave because I only want to click that when I'm about to actually publish the note. And then I'll add "tags." There we go.
So, now what I can do is I can move this note to a different folder, and I'm going to add it to my "templates" folder. And if I go into "templates," the "digital-garden-template" is already in existence in that template. So, if I want to create a new note, let's call this "Web 1 + Web 2 + Web 3," I can press Command Shift T, which is the hotkey that I've set for myself. I can type in "digital garden," and it will automatically create this here. So, that's just a really quick and easy way for me to be able to go and add these properties. And you can add as many properties as you want to here.
Now, if I want to publish all of these changes, press Command P, "Publish multiple notes," and it should publish two new notes, didn't delete any old ones. And now, again, if we go back to deploy details, I can see that there's a new deployment that's about to happen. There we go. Everything went. So, I should be able to go back to wanderloot.xyz. Oh, and I saw here, I thought I published this note, but I didn't click `DG Publish`, so it didn't go through. And you can see here, I'm using the alias of this note called "self-sovereignty," called "Self-Sovereignty is Underrated." So, that just again makes it easier for me to write in a more natural language format that will enable people to go back and forth between the different concepts, but it gives me more flexibility to entitle the notes differently.
So, let's publish this single note. There we go. So, go back to digital garden, refresh, and now there's a new note here called "Web One Web Two Web Three." And again, I can see that these notes are linked here. By changing the depth of the note, I can now go and see that even though "Self-Sovereignty" is linked from "Web 1 Web 2 Web 3," I can see that "Self-Sovereignty" also links to "Digital Gardens What is a Digital Garden." If I go to two links.
Now, if we go back to the guide, you can see there's a lot that you can do here. There's a ton of commands, there's a ton of note settings, there's a lot more detail here. So, if you're looking at adding a lot more customization, I suggest that you take a look through this FAQ, and you can start to make this space really your own. You can see that this website was actually built with the Digital Garden plugin, and there's quite a lot of notes. You can expand and you can go and you can follow. So, if you're looking for features, maybe you want to go to "Data View." There's a lot of options here for you to go and really make this your own safe space, your own digital garden that other people can wander through.
And also, if you want to make this into a blog, you could totally just write the Obsidian notes that you're creating as long, blog posts, and it'll update in exactly the same way as the digital garden, but it has the extra features like the knowledge graph navigation and the backlinking between notes.
Okay, now that we have the digital garden set up, I just want to do a quick run-through of what we've accomplished so far. We created a GitHub account, we connected that GitHub account to Netlify, we connected the Digital Garden plugin to Obsidian by installing it and authorized the GitHub repo from the Digital Garden plugin, and then we introduced some notes and changed the theme of the Digital Garden plugin so that we could have the notes appear in different ways and managed to publish every new note that we've created into the GitHub repository that is then read by the Netlify deployment and hosted to create the static site generator with the plugin so that you have your own website.
So, what does that all mean? It means that now you can at any point in time go to Obsidian, create a new note, add the `DG Publish` button, and when you click "Publish," you can launch the command of "Publish Digital Garden Single Note," and that will automatically appear on your website. So, this enables a very frictionless way for you to get your thoughts out there without overthinking it, while creating a place for others to go and view what you're creating.
Now, the final step that I want to take at this time is, if you take a look here, you can see that the name of the website is `m-regal-dalky-58964.netlify.app`. Oh, I think I've been calling it Netlify. It's Netlify. So, what you can do here is you can create your own custom domain, like I have, wanderloot.com is my custom domain for my blog site. I'm going to create a custom domain for my digital garden so that way it's a lot easier for people to find. And the title that I want to use is `wl.xyz`.
So, what we need to do here is we need to buy a domain. You need to actually purchase it from a site, and then we need to connect that custom domain to the Netlify app that we've deployed here. You can use any domain service that you want to. There's GoDaddy, there's Bluehost, there's WordPress, there's Elementor. But the cheapest one that I've come across is Namecheap. Like you can see here, if I want to do "wander-loots.xyz," that's really easy. It's only $2.71 a year. So, I'm going to get that. I don't need web hosting because I'm using Netlify. I'm not connecting any of these other elements. And then I'm also going to purchase the SSL, which is a secure socket layer, which is an encryption. So, this effectively allows me to have HTTPS, where there's another layer of security for my website. I don't want someone to hack this. I want to add as much security as possible. And if you look at Namecheap, it's only $8 a year.
Click "Check it." Okay, so I can see that my current cost is $11 for the year, which is not bad. And I'm going to just up this to two years. Confirm order.
Okay, so now that I have purchased my `wl.xyz`, so let's go back to Netlify and I'm going to go to "Domain management." I'm going to "Add a domain." Let's go `wl.xyz`. Click "Verify." Click "Add domain."
Now that I have Netlify and I've added `wl.xyz` to my Netlify as an external server, I need to connect the actual domain itself through its DNS records on Namecheap onto my Netlify app. So, the first thing I do is I go to my `wander-loots.xyz`, my recently purchased domain, "Manage." And rather than using a name server, I want to use a custom DNS. Now I can go back to my DNS records where I need to point my name servers to Netlify. So, I'm going to go through and copy each of these and add my name servers. And I'm going to click "Save."
Okay, now that I have added my custom DNS, I have to go back to my Netlify. I just have to wait for my Netlify DNS to connect this redirect. When I'm waiting for the Netlify DNS to connect, that can take anywhere from a couple hours to a couple days. So, I have to wait and see how that goes. And I will come back once it has connected.
Okay, so I waited about another 5 minutes. This took overall around 20 minutes for my domain name to propagate. And now if I go click on `wl.xyz`, there we go. I can see my full digital garden here along with my vault, everything that I've set up.
A quick overview: what I did was I went to Namecheap, I bought my domain, and then I went into the domain, changed the DNS name server from Namecheap to custom domain. And then I went to my domain management on Netlify, added `wl.xyz` here. That gave me my name server option, which I copied into my custom DNS here. Once that was done, I clicked "Save," and then I just had to wait a while for the DNS to propagate.
Now, again, if I go to `wander-loots.xyz`, I can see that I have my custom domain set up, which means now I can publish anything from Obsidian through the Digital Garden plugin to my GitHub repo, where it is then read by Netlify and then directed to `wander-loots.xyz`. So, this is a very cheap way for you to set up your own website with free hosting. The only thing that it cost money was to pay for the domain itself. But now you can see here, I've got this symbol up here which says "Not secure." So, this means that I'm dealing with HTTP, not HTTPS.
Okay, so it looks like actually Netlify is part of a program called Let's Encrypt that will give you free security using the updated TLS protocol rather than the SSL protocol. So, I didn't need to pay for that year of SSL. So, what I need to do instead is introduce a new record that will give Netlify permission to connect to the certificate authority authorization, which is CAA, and that should automatically generate an encrypted version of my `wander-loots.xyz`. So, I'm going to copy in the Let's Encrypt and click "Save." And I'm going to give it the tag of "issue," which means that I can allow Let's Encrypt to issue an encryption for my page. Okay. And then I'm going to do the same thing, but for the `www` the alias as well, and click "Save." Oh, flag should be zero.
Okay, so now that I've added two more records, I've enabled Let's Encrypt to create a TLS for my website. Let's go back. I'll include a link to this in the description below. This is where I got the information from, the URL that allows Let's Encrypt to generate a certificate for my website. And I Googled it, and it said that I should use "issue" and I should have the flags that to zero. So, this is zero and issue, which you can see if I go to my domains and CAA, zero issue. There we go. My site has now been HTTPS enabled.
Just to confirm, what this did is I created a wildcard version of `wander-loots` with `www.wander-loots.xyz` and I included `wander-loots.xyz` so that created a link to Let's Encrypt, which is a free system that is trying to improve the encryption of the internet to protect people. So, now if I go back to `wander-loots.xyz`, you can see the "Not secure" has gone away, which means if I type in HTTPS with the security there, I now have `wander-loots.xyz` and it directs to my website. Just to clarify, I did not need to purchase an SSL certificate to secure my website through Namecheap. If you're using Netlify, they will connect to Let's Encrypt for free, so you can get the encryption for your website.
So, there we have it. I've connected Obsidian through the Digital Garden plugin to my own website with a custom domain. The next step is for me to write some more notes to build out my digital garden, turn it into a bit of a blog, and I'll probably do some connection back and forth between my other website at wanderloots.com and `wl.xyz`. My goal is to use the entire spectrum of publishing content for different purposes. I'll use Forecaster, which is my Twitter-like platform, to communicate with other people, to have conversations, and to share microblogs, short-form posts. I have my private notes in Obsidian that's not available for anyone in public. And then now I'm taking a select portion of my private notes and publishing them into my digital garden where I can think in public and build in public. And as I have ideas for blog posts that accumulate as I cultivate my digital garden, I will take that information and research and writing and accumulate it into the blog post. And I'm actually working on a book as well. So, all of this is meant to have this seamless content publication system that reduces friction because as I have ideas, I can publish them into the place that they're meant to be, and I don't have to think about where they should go.
If you're interested in learning more about how to structure your digital garden and more about the philosophy on why digital gardening is different than writing a blog, I'm making another video, so you can take a look at that if you are interested in learning more.
I hope that this tutorial was helpful and that you now understand how you can publish your Obsidian notes online to your own website for free, and how you can pay a very small fee to connect a custom domain so that you can control the name of your website and promote your brand, so that you can direct people to your digital garden and they can explore as you write in it.
If you found this tutorial helpful, I would love if you could please consider liking and subscribing, as your support really means a lot. And I think this will be my first video out since YouTube enabled Hype. So, if you want to hype this video, please feel free to go ahead. If you're interested in learning more about how to build your content creation system, how to build a sustainable ecosystem, please take a look at my Hypersub, which is kind of like Patreon, and it's where I give more custom advice to people and help them build out their ecosystem.
Thanks again for listening, and I will see you in the next video.