Transcription
What's something that Anthropic, Zapier, Perplexity, as well as Cursor all have in common? And that's that they use Milify for their documentation.
In this video, I'm going to be showing you how you can harness the power of Milifi to create top-notch documentation quickly and effortlessly. Whether you're launching your first app, scaling up a startup, or streamlining the process of your documentation at an established company, you'll see how easy it is to produce simple, well-structured, and elegant documentation with MILFI. Let's get started.
But before we get started, just make sure that you do have a code editor installed. I'm going to be using cursor in this example. You could use VS Code or whatever editor you'd prefer. Once we've done that, you can go and sign up for a free account on Milifi. You can choose to do this with your email. I'm going to be using single sign-on with Google.
Once you've logged in, you can go and establish your company's name. In this case, I'll just set it to developers digest. We'll click continue. And then we can sign in with GitHub. Here, we're going to authorize Milifi to access our GitHub account. We'll just go ahead and accept that. One thing that I do want to note is that GitLab is also supported, but I'm going to be walking you through the GitHub example today.
Next, we're going to create a documentation repo. So, once you've created the documentation repo, you'll be able to find it within your GitHub account. And in this case, it's going to be at this docs route. Now, you can always change this after the fact as well. Just make sure that you do have Node.js as well as Git installed on your machine. And once you have that, we're going to go within our code editor here.
Here is my workspace. You can just make a new directory and open it up with whatever code editor you're going to be using. Like I mentioned, I'm going to be using cursor. And the first thing that we're going to do is we're going to install milify globally. You can just `npm install -g milify`. Once that's installed, we're going to pull down the repo here.
Once the repo is pulled down, we'll just see the within docs here. We'll be able to see everything within the left-hand panel here. All right. So now we have the repo locally for our documentation. And if you go to the dashboard, you'll be able to see all here as well.
Within the dashboard now, you see your own custom subdomain. As you can see within the starter kit, it basically has everything that you need to quickly get started with building out great documentation. If we just take a quick look through the starter kit, you have the introduction, you have all of these nice components that you'll be able to easily edit within the MDX files. And there's just great examples on how to get started with basically everything that you need to create good documentation. They have code block examples. They also have the ability to add inline images as well as embed videos right within your documentation. And you also have the ability to change out things like the global navigation here.
The other thing to note is you can set up all of your API specification within here. Here's just a quick example of what that looks like. There are two ways on how you can build out your API documentation. In this example, we're going to be using the open API specification, but you can also use MDX components as well.
Next, what we're going to do is go within the editor pane here. We're going to install the Milifi GitHub app. This is going to give access to automatically deploy our applications as soon as we push it up to GitHub. Now that's set up, we're just going to go ahead and start our development server. We'll just `npm run dev`.
Once that's set up, we have our localhost environment for editing the documentation. Now, if we just quickly look through how the documentation is structured on the left-hand side here, we see introduction, quick start, as well as development. To edit any of these pages, you can do it within these MDX files. If I were to edit anything within here, there is going to be hot reloading that's going to automatically render on the screen as soon as I save it within my code environment.
Next, I'm just going to show you a couple examples on how you can get started with changing out some of the aspects of the documentation. Let's say I'm trying to set up a piece that's within the repository here. Let's say I want to swap this out for it. I can just grab this absolute path. I can go within here and then I can swap out the source for this hero image on the page here. I could also swap it out for the light image as well. It's nice that it does give you the option whether it's the dark theme or the light theme within here.
Basically anything that you want to edit, I'd encourage you to use the command shift F on cursor or VS Code to search for whatever you want to find here. Say if I want to edit something within the API reference. Say I want to go to the plant store endpoint and I just search for plant store. I go down to the specification itself. You could paginate it here as well. And say if you want to update the endpoint and look through the specification and just swap out whatever you'd like between the API reference or the documentation.
Once we're done with the edits, if we just exit with control C here and let's just add the changes here. If I just `git add .`, `git commit -m "first commit"`, and then if I push this now, if I go back to the Milifi dashboard, we see that as soon as I push up those changes, we see that it's now updating. And then as soon as it's updated, we have it on a live domain. We have the edits that we made to the page. We have the edit that we made to the component in the API reference. We have the image that we added. You can see how easy it is to configure this.
Another thing to note if you do want to change out the repo that you're using is you can just swap it out here within the settings tab under the git settings. You can just go over and select the repository of where your docs are and then you can select the branch on where you want to have that for your auto deployment. And also this is where you'll find the information on how to set up GitLab.
To set up a custom domain, all that you have to do is add the domain and make sure to add in the DNS records wherever you have them hosted. In my case, I have them on Cloudflare. If I make two new records, I'll make a TXT record with the name of `_vercel` and then with the value that it's shown here. We'll save that. And then a similar thing here. I'll just add in a CNAME record with the value as it's shown here. You do have the ability to refresh and check it here. So now it might take a little bit of time for your DNS records to propagate.
One last thing that I wanted to show you is there's also analytics built in. Let's say you want to see what popular pages that people are visiting. You'll be able to have everything referenced out there. And then if you have the search capability set up, you'll be able to see the queries that people have put in.
And on that note, there is the ability to have this AI chat functionality. If your users have questions about your documentation, like "how do I update my docs?" and I search that, it will give you a summary of an answer based on the context of what's within your documentation. This can be really helpful and it's really a modern version of search. Instead of looking for keywords within documentation, you can have users ask with natural language whatever they might be wondering in terms of how to set up whatever they might be looking for.
Now, that's pretty much it for this video. I wanted to thank Milify for partnering on this video. If you found this video useful, please comment, share, and subscribe. Otherwise, until the next.