Hi, everyone, my name is Federico Tartarini. And in this video, I'm going to show you how
you can add this very nice search bar here at the top on your Docusaurus website. Okay, so here as you can see, we have a search
bar, and you can search it throughout the documentation for different terms. Like for instance, here, we can open install,
or if you look at the documentation like we want to look for, like others. So let's go back here we go insert, and we
look for others. And we're going to be redirected to the part
of the documentation where we want to actually that we want to read. Okay, so this search bar is, is called by
default in your proposals to website. So the console has to come with this search
bar option that you can enable, however you and is powered by Algolia Okay, so you're
going to add two options to add any sales part to your recommendation website that I'm
going to show you both. One is the hard way and the complex way which
we should do in this video. And one is the simplest way. Okay? So if you want to add it in the simplest way,
you just have to go in the recommendation of the resolvers. Here, look for search. And you can actually use the search bar that
a provider you can look for sir and using a lawyer doc search. Okay. So if your documentation website that has
all the recommendations, you can apply for a doctor here by clicking on this link or
going on DocSearch apply and you can join the program. However, if your website is not purely documentation,
but it only so as you can see, it must be a documentation website and for instance,
my website didn't comply with these requirements. Was it just a documentation website but was
also advertising like one of the products that I created which is an open-source product
but anyway, he's not a was did not go to sci fi for this documentation website and therefore
I could not apply or better I mean, I applied here, but he didn't give me the API key. Okay, so if you apply here and your request
goes through, everything is fine. You're going to receive a visa which I'm going
to show you where you need to add them and you can skip in this video later on in YouTube. You can skip later on to the section in which
I'm going to explain how to add these key to your project. Alternatively, if you are like me that you
didn't comply with these guidelines, I will show you how to use Algolia file to create
an account in Algolia then eventually created an index database and then you can still use
the service Okay, the only difference is that if you use doc search, they will run the code
on their machine every 24 hour, as is explained here, and they will run it every day. The crawler every 24 hours and they will extract
the content from your website. If you use the second option like I'm going
to show you I'm going to run it on my personal computer. So the content of a website that is going
to be crawled every time I run that search. Otherwise, no one's stopping you to put the
scroller on cloud machine and then eventually run it as as often as you want. Okay, but just to let you know all these is
for free as long as Docker search is definitely for free because you never have to pay Algolia
and what I'm going to show you today as some video for eight years, so you can use the
free account. However, you are limited in the number of
requests that search that your user can do. Or if you go above and beyond that, if you
go beyond the 10,000 server to request or monitor then that you will have to pay and
these devices have their have their standard account. Okay. But without any further ado, let's start and
I will show you how to get started. If you have regular office hours searchable
website, please start working on adding the file to your locker to your repository. Otherwise, if you want to follow along with
me, you can just go on my GitHub account. You can search for the office hours dot example. dot dash YouTuber and you can clone this chord
here on your computer and you can test that and you can play a bit with that and then
add it to your website. Okay, so I'm going to show you by adding it
here today, my website so this repository here, and I have already cloned later on my
computer and this is how it looks. Okay, I've already added all the files that
we need and we will need to change it and I will explain everything step by step. Okay. So first, please clone this repository on
your computer or follow along with your documentation. That was our church documentation website. And the first step that we need to we need
to do is to create an account in Algolia. Okay, so if you don't have already an account,
please sign up. And you just have to put your email address
and your username and password you sign up and an application to be created. Okay? My application, okay. And this is going to be the key of the application. So you have logged in, please get your API
key. Okay. This is going to be our search all we need
in the configuration file. That was our application. I didn't mentation website, config file. Not actually specify that and then we need
another API for making the API key. So this API didn't, however, namely our water,
because you probably don't have it. So you will have to pay the new API key and
description. You can say like whatever you want, I can
say, age. We don't have to add any indices or momentum. And then Valley. We want them to of course, then define the
maximum number goals. I get easier because I want to be a little
because they must be again and that's the only thing
some options. Option, we can actually turn on your own setting
and then index objectives in the last one, okay. So we can just leave description in this is
clearly these API clicking OK. And what he was getting right now and as you
can see, our new idea. So I'm actually to the old one, I will delete
the old one is API. I can fight. Okay. So let's go back to our product on our computer
society like the main file. The structure of the site that actually we're
going to need to adopt and actually get that and the big thing that we have testing. So that's the API key that we
generated. So this version of the application is not
the naming these properties are individual trading. And then we are what we do after graduation
on websites like that. So the configuration can copy from mine so
I will upload that on GitHub, typically for the USA,
or wherever, in doc Center. In finding what is the definition of a specific
site, okay. You can go and cheat. Recorded conference. Okay. We're going to be doing and we're going to
be coming here from okay, I would like to feature whoever you
always talk to my source code to be able to get down into this. So just because basically
three things need to change the index names which are going to give an index to your indices. My Keynesians, I called eBay, that's the name
of our Okay, which is going to be actually I'm going
to add it. So, yes, is my website is not essential to
bog you and if you don't follow my previous web page. Already, which we actually need to change
in this case config because there's only three free to keep in mind that you Of course. Okay. You need to do other things. Okay. Set up the environment, wherever it is, it
is. So we have
we, in addition, we have to change it you have to change the API key to run the crawler
to the unborn need to show you on your computer again. I'm running a random so does that mean and. Try to use it on your doctor, okay. Day just turn on your computer, Danny's going
to distract you. So they're not asking to do. If you want to discuss okay. He's not technically still on your computer
because you want to have the most likely. Okay. Windows, your turn. Yeah. Remember to put that in the description right? I forgot to do that. So let's see. Okay, so first of all, we need to go to their
website. Let me actually go back to C and we're going
to cd into the recommendations and websites bathroom Mike again, started
with the other video CDs and audio. Okay, so let's just stop here. Going to need to do a couple of things. Okay. So our environment is
everything's a JSON file. Okay. In my case, the server so we can go so this
is where they start with the sitemap is different based on the API key than the application. So just the user first thing take a little
bit of time. On your computer, a Docker file it says this
one the opportunity, all the bases that we have here, okay. Oh, this is not the intro. This is the stock one. So buy one
look for because ours so go back to my roots tell you why. Because what basically differentiation from
your development should I say? Going to get the data Okay, so the answer
is yes. Monday we are going to need to change the
file picker okay. So it was confirmed by you we will need to
this to Algolia column and then I can use these curly bracket tiny API. This is
reality that config dot y is not the same API key cannot actually you can use as you
can see in our web API API API up to Philadelphia officer
index to be good sports. Okay. So what we need to do we even need to reverse
team component enough you have not that also. Okay. Need to index name and select in the config
file please choose let's choose with an index okay. Next year next week. Hey so sorry okay. You're going to run this is going to be local
or running minutes okay. So we have the search engine here we want
to look for but he didn't get it I couldn't get what he stole
before they show you that data set okay. Just started. NCT prepster nothing fire and the Chamber
Yes, so it's tentative And now, let me just go back
to the fines here. Okay. So now we go to GitHub and we need to deploy
okay. So the other thing that we need to do is now
the changes are here. So example you do so you should see the changes
like example you do. Not the changes have not been not being pushed,
okay. So I'm going to push the changes. Just very important. Make sure that the is the pushing. So make sure that you're not pushing the dot
envir and the dot config files. So those will not have to be there. But what needs to be there is that the crusaders.config.js
that is, is fine. I mean, we have changed that. I know that this API key is going to expose
the parties just for certain purposes. So when does need to be there? And the last thing that I'm going to do is
I'm going to do the deployment so you're in package dot JSON, I can type yarn, deploy
and deploy is going to deploy it Okay, so first I need to cd into the my website and
then I need to do yarn deploy is going to deploy to a Okay, just one second. I'm going to have a look at what is the error. Okay, sorry for that. Something attainted so I had to change a little
bit to the package the package dot json file so I've added this line of code, which I'm
going to push it to the GitHub repository. So don't worry about that. I, you just basically need to add a new command
which is going to be deployed. These can be as you want them, it doesn't
have to be called deployed Chiquita pages. But just make sure that it's not called deploy
because deploys already there. And we would put this one in stereo anyway,
just copy this one in, it's fine. And then it's idea you need to add to this
comment here. And basically, you can copy from mine. But of course, you need to change the GitHub
user. So just remember to put your user ID inside
here. So what we need to do you just have to do
the yarn and then deploy GH Pages. Okay. And so there was a deploy GH Pages is going
to be in the website here as you can see is building it for you. And is going to deploy two data pages. So first is building it. And then inside here, it was our SWAT example. You can see that in the activity log. Now we should just deploy it another time. So was deployed one minute ago, and now technically
we should have a new deployment. Okay. So this is going to be just going to have
data and then you can just click here on the deployment. I don't think it's going to change because
I haven't actually changed anything is the same website. So it up has not detected any changes. So it's going to show me that there is another
one but I can just I can distribute my website that you're going to hear now we have our
search bar that we have to be sorted. So for the search, that's why everything is
done, and everything is ready. So now this is your website, but the only
downside is that if you want to update these indices, and these records inside here, every
time you will have to come back here to your local computer, or if you run these on a cloud
server, and you will have to run that command that we ran before which I'm going to put
a link in the description, which is this one this Docker run and this command here so every
time you run this one is going to update the indices, and it's going to be the end who's
going to send them to algo. Leah. So if you're able to use DocSearch, you don't
have to do all these, and they do it there for you every 24 hours. But I think in the case of my website that
basically the content doesn't seem to matter. So please find the identity to run this command
every time I decided to update the content of the website is up to you to change that. And that's basically it. The only thing that I still want to mention
for you is that if you were able so I mentioned at the beginning if you are able to join the
program here and the documentation you are our URL and with an email address, and DocSearch
sees that you are eligible to be indexed by their map, then eventually, you don't have
to add the ER in the documentation website is dot
m file, this config dot json file, they will take care of that. The only thing that you will need to do is
to go into the resolvers dot config file and add this path here. So inside team configure these Algolia. And basically you don't even have to put the
app ID because you will not know the app ID we just have to put the API key, the search
API key and the index name. That's all as is written here in the documentation website. So if you go here, the only two things that you're going
to vote is the API key and the index name that's all. And
of course, that is much simpler, but I just wanted to show you both the options so you
are a little bit more flexible. And if you are like me that you couldn't use their
service for free, you can still use Algolia for free and allow people to search your website
with the search bar. I hope you found this video interesting. And
if you did, please consider liking and subscribing to my channel. And thank you very much for listening. And please feel free to add any questions or comments
down below in the video. Bye
