Build and deploy a documentation website using Docusaurus 2

hi everyone in this video i'm going to show you how you can get started with docusaurus version 2. how you can install it on your local computer change the content of the documentation website and then upload it on github pages or on netlify so the full stack so we're going to start from the beginning all the way to the end so you can have your docus hours website online and ready for other people to be searched okay so first thing what is uh just a couple of words about what is goku's hours so what we are actually go docus is generally used for a documentation website and what you're going to get straight out from the box without almost very little work is a website that is going to look like this which you are going to have like a landing page so docusaurus itself was built with docus so we're going to have a landing page as this one here where we have icons and we have a navigation bar here at the top and we have a folder is also very nice because it's mobile friendly so if you look it in the mobile version here as you can see it renders very well but let's go back to the windows like to the computer version so let me close this one here you have the landing page as i previously mentioned the documentation page all straight out from the box you will not have to do anything where you have this navigation bar here on the left you have this navigation here on the right in which you can navigate between headings so as you can see you have introduction disclaimer and then you have a better document is coming to town so you can easily navigate through the page with this navigation here while with this left navigation bar you can navigate to different pages and you have a blog section which you can use and write your blog if you want to you can use the kozarus just for blog or you can use docus just for documentation you can remove the landing page if you want to if you don't want to have it and go straight directly to the documentation page so we'll try to see all of that in this video and i will try to show you how you can create it another question that you might ask is why would you like to use docozaro's well docusaurus is very nice because you will you can build the documentation very fast and yes true if you want to document your um your project you could use like github pages and i'll github the wiki so the wiki section so each github repository as is on wiki and you could do that if you want to you could use the wiki of the of github so let me just show you very quickly the only problem with that is don't you don't have a lot of flexibilities it's not easier to just to like to add the new pages to add a navigation bar so for instance here if you want to you having github this wiki and you can create like different pages and then you could have a small navigation body on the right but is not as user friendly as honestly is document because you're going to get a full website a full documentation website or a blog another advantage is that is built with react so if you are familiar with react you can add the pages using reactor we are not going to do that we are not going to focus on that we are going to use actually the power of markdown so as you can see here like you can add pages with markdown and that's the real advantage because even if you don't know how to code with html sure you could make a website which the html file for instance and you could make a documentation website the only problem with that is that you need to write a lot of html and maybe you're not familiar with that so with the docus you can actually write markdown documents which are super simple to write and i will show you how to do that and then you can add all these pages to your documentation website so it's going to be more or less like writing like a simple text file or a word file but when docusaurus just get extract the information that you put in the markdown file and it renders it on the website so it's extremely extremely powerful and also is ceo friendly so what does it mean ceo friendly so you search it can be easily searched by google by google it renders very fast because the is a static website so is going to be client-side routing and pre-rendering so as you can see we can change pages like there is no lag because all the pages are pre-rendered so it's super fast the website and as you can see there is no lag between opening a page and the other because it's client-side and is pre-rendered okay so i think i've already covered the basic and which are the advantages if you want to learn more or if you want to read more about the advantages of using documents you can go on their official documentation in the docs section here so docus and then docs and then eventually you can read about uh why um it would be good to use docus for uh documenting your project of course if you have a full want to have a full website probably you could use different things like react.js app or gatsby app but if you want to just have a simple simply document your project i would highly suggest you to just check out the quesados okay so the first thing that we need to do is to install it on our machine and we can see here in getting started we have installation and we can actually start with this um code and we can just code type this code here in the terminal keep in mind that you will need two requirements okay you need to have install node on your computer and if you don't have node installed on your computer you can actually click here in the link or you can search for node.js and then you can download it i'm using windows and then eventually i just clicking windows you get the windows installer just check that is like the right version so i have a 64-bit computer so i'm getting the 64 version and in addition we need to have yarn installed again if you don't ibm install just click here or look for yarn and then you can say install yarn and then you can install yarn on your computer you can select the operative system you can select a version download the installer and install it on your computer okay i have both already installed on my computer so i'm going to go to the desktop i'm going to keep the project inside here guitar project and i'm going to create a new folder and we're going to call it docus example example a youtube okay so we have created our repository when we are inside our repository we can either open the terminal and navigate to this repository or we can click here at the top type c m d and then enter and as you can see the terminal is actually open here inside this repository so we can type node v so it means that i have node installed if you get an error message means that you don't have a node installer and then the same goes with yarn so i've already yarn and node installed so if i type yarn-dash v i have also yarn installed okay so i will not have to install neither yarn nor node and we can actually um get the disk a folding of the project here by copying this line here inside our repository so we just copy this line here and we're going to initialize the website i would suggest you to initialize the website with the name my website okay so it's going to create a sub directory inside our project folder and we're going to use the classic template i will not change that for the beginning if you are a beginner just keep it simple and just keep it the the classic so just a copy that string from their website type enter it's going to take a little bit of time and it's going to download all the files inside our repository another important thing that i would like to mention is that you can have you have two options as you can see is creating my website inside here so you have two options either you can keep the documentation website in a completely different repository from your project or you can keep it inside so let's say here that i had another file which was a python file or an r file or javascript file here which was my main code and this main directory here is not kudo kusaru's example but was like a project like how to [Music] calculate the weather forecast i could have had all my code here inside and i could have had my website inside my project folder that is nice because you can keep your uh source and your documentation all together inside the same folder which in this case is docus example youtube okay so it's up to you you can have two different folders and then upload those into github repositories so you will have your documents website separate from your project repository and this could be actually handy if your project is not is not public because github if you don't have a pro account you can have a github repository only if your project is set to public so if you want to keep your file private and you want to use github pages maybe it's better to have two separate repository one which will contain the docu's website one which will contain your um the source code of your project however if you use a public repository maybe you can combine the two so inside the same repository you see you both have the docusabros as well as your source code okay alternatively you could use netify and netify or net leafy i don't know how is pronounced this website here to host and we might see later on how to so you can use net leafy and in this case you can actually um even if your repository is private you can have free hosting thanks to natalie okay so that's also an alternative an alternative to github pages so let's go back to our terminal as you can see all the files have been downloaded everything was fine success the only thing that we need to do is inside our repository as i previously mentioned docusaros created my website for me so this is my website so what we need to do now is we need to cd into this repository so let's go back to the common window here so we're going to cd into my website and then once we are inside my website we're going to type yarn start and that's why you need yarn so you're going to type yarnstart and is going to run a development service server on our local computer and as you can see here we have localhost 300 3000 and we are going to have our docus website appearing in a second as i previously mentioned you get the similar very similar to the docus website and this is all straight out of the box we didn't have to write anything we didn't have to do anything you can change between dark and light mode you have the document section which as you will see later how to change this markdown file we also have the blog section and we have my site okay so let's go step by step how we can actually the first thing that we are going to do is we are going to connect this full website because it's already a full website as you can see here you can go from one part of the website so you have all the links which are already working as you can see super fast we're going to connect these with github okay so the first thing that we are going to do is to create a github repository and we are going to call it so we we're going to open our github okay so we're going to create a new repository you can give it any name that you want to uh in this case i'm just going to call it docuzaro's example youtube just to be consistent doesn't really matter goku the example youtube we are not going to add any description at the moment we are going to keep it public because it doesn't really matter we are not going to initialize this repository with redmi we are not going to add a git ignore just because as you can see inside my website here we have already a git ignore file so docusaros already did that for for us so we don't need to do we don't need to do that and we're not going to add a license at the moment so we are going to create a repository so now the repository is created we are going to do push in existing repository from the command line because we have already the our repository so let's go back here in this case we are not going to push my website but you are going to push this docus example as i previously mentioned if you wanted to have two separate repository one for your website one for your project well you could just push this my website to github in this case i'm going to push this docus hours example youtube all to github because later on i'm going to add my my code inside here and then i have the website which explain what the code does okay so we're going to go back here we're going to open another terminal because that one is running our website so the first thing that we need to do is do git init so another thing that you will need to have installer is you need to have git installed so in this case i have already installed it but as you can see you can see if you have it installed by git dash dash version if you don't have git installed on your computer you will have to install it so get installed and you can install it from here so again if you have a mac or if you have a windows just follow the instruction and you can download it on your computer so we can go back here to the terminal where we were so we are going to do git in it so we are going to initialize this repository with the git so this the next step that we we're going to do is git add so we're going to add all the files that are inside the repository don't worry because we have already a git ignore file in the document then we're going to do git commit okay and the message is going to be first commit okay so we have committed the file and then the what we need to do is we need to push this file to the remote repository okay so how do we do that we just copy this string here keep in mind that don't copy the string specifically here because yours is going to be different is going to have your github username and it's going to have the name of your repository here so just don't copy exactly this one but just copy here on the side on github the message that it prompts and then right click and then we are going to push to to master okay so now it's pushing the file to master and in a second once it's done now we should have all the files inside here so as you can see this repository doesn't have a readme we could add the readme if we want to and inside here there are the same files that we had locally on our computer so we have my website we have blog docs source static and all the files okay so the last step that i would like to show you before start editing the website i want to show you how you can have this website online and deployed with the github um with github pages so what do we need to do is we need to go back into the documentation of docus okay and then we just have to look for advanced guides so let me just have a look so github pages okay so we look at the deployment here so it's going to explain everything that we need to do we need to to so if we want to have it put it on netlify we just have to do yarn build is going to build our project in a build folder and then we can actually deploy deploy just copy that file to netlify actually let's do that first we netlify so you need of course an account with netlyfly so you will need to sign up i already have account i i already have an account so i can just sign in into my account so login here okay i'm going to create a new site here for you will not have anything probably here once you sign in so new site from git okay actually sorry just let's create a new um site so we just have to subside okay actually you just have to drag and drop your site folder inside here so it's even is even easier so let's do that in a second so we go back to the terminal here so the terminal that we use to push to github so as you can see we are inside desktop data project docus example so we need to cd into my website okay now a cd into my website and we do yarn build okay so docusaurus is going to build our website inside the build folder so as you can see here yarn run build or yarn build is the same so you just uh create once it finishes the static file will be generated in the build directory okay so it's just going to take a second now that as you can see here we have the build folder we didn't have this folder before as you can see uh is just a new folder so we could we drag and drop this file inside here so the site has not yet been deployed it's going to take a second now the site is deployed so if i click here here we have so we have our website deployed in almost no time in few minutes we have our website deployed on net leafy or netlify i don't know how to pronounce it so if you want to and i will not spend too much time you can even change this name so you can edit site name so you can call this one from cranky johnson you can call it the example uh docusarocs example [Music] docus example youtube of course maybe you will want to find a better name but if this name is available well now we have our website so if we go to docusaurus example youtube this is our website so in no time our website has been deployed online and we have our website up and running as you can see you can navigate through the website very quickly and if you want to of course you can even add a custom domain which i believe you can purchase from natalie netlify or you can purchase it with the um custom with a domain provider online okay that's out of the scope of this video i just want to show you how you can get your website online okay now that we have our website online and so this is our repository let's have a quick look because i think it's important how to actually change the content of that website okay so in this case i'm going to use a web store which is an ide you can use any um any id you want so vs code webstorm by charm doesn't really matter it's up to you whatever you whatever you prefer is is fine so we're going to navigate through all the file and i'm going to show you all the files that are important that we need to consider and we're going to edit them in order to configure our page okay so let's have a look quickly at the file that you are going to modify so as a preview so as you preview did this so our local lost is still running so we have here on our localhost so actually let me just sorry i don't want to confuse you but we have our website running here in this common the window so we're going to close this okay so this we're going to close it actually this one was running so we're going to press ctrl c we're going to terminate the job so if you reload the page now is going to give us an error because is no longer running on our computer as you can see here cannot be reached so let me actually just close a couple of tabs here let me close this one and the reason why i closed that one is because right now we are going to use um webstorm so there is a terminal inside so if you don't use an id which has a terminal inside of course no problem you can use the terminal of windows but i just prefer to use the terminal inside here because all inside the id so we cd into my website as you can see here same thing as we did before and then we're going to do yarn and then we do start okay so we're going to start the deploy the server here on our local machine or local lost 3000 and we just have it inside here and then we can open different terminals okay so let's look at the project so the project that i can see inside here is the same as if you would navigate through your directory so inside here my website so the main file that we are going to edit are located in different folders and i'm going to show you here so let's starting from the beginning so we have the blog so we have three blogs currently written and as you can see there are blogs here so there are hola hello and welcome it is auto author loading so if we change uh one of the of the file and as you can see this is written in markdown so blog feature are powered so as you can see here blog feature are power so this is exactly what is rendering from this text file or this markdown file is rendering here so instead if you say blog or i type website and i save it can you see the changes are uh loaded in real time so are reflected all the changes that we make are reflected in real time on our website which is running on local lost of course the one that is running online is not going to be changed unless we deploy a new a new folder and we build the file and we deploy but locally we can make changes on the fly so website is and then we see all the changes reflected here okay so this is the the first thing that i wanted to show you so let's go back so as you can see block features now so we have the blog which is very important with which we can change inside here we have the docs so the docs contain all the document file let me close this view of the markdown file so if you go inside our website we have docs okay and here we are so we have four documents style guide document two document three so document one document two documentary and power power by markdown is the last document here so as you can see here power by markdown again if you want to change it uh i don't think that we cannot change it from here we need to change it from another location which i will just show you in a second but you can change the text as we did for the blog and you can type something can [Music] you and then we save it and then can you is just appearing here okay so we go back we save it so we have the documents so we have seen the blog the document another file and another very nice thing and a very nice feature is that if you guy you go inside header one so this is the style guide here as you can see here as i show you before there is the markdown syntax there is the header so we can navigate through this thing if you update this file and we add a new section to add a new section if you want to add an adding one section so you just have one ash two ashes is an adding two and so forth so as you can see here there is an example of the header so different type of headers that you can get let's add the introduction so this website contains um our documentation we save it so here without pressing refresh or anything we have this our introduction here and this also navigation panel here on the right has been updated so now we have introduction okay so it's honestly fantastic it renders very fast and it's super easy to modify okay so final thing we have inside source so you will probably navigate and use this file just at the beginning because you will want to change the main landing page so we have inside source we have custom css in which we can change the colors so right now as you can see you have this greenish color which you can of course change and an easy super easy way to do it is you type docus and then you type color so you get styling and layout in docus okay so you can pick any color so you can scroll down you can pick any color that you like for instance let me choose like uh an orange i don't know it's just it's just an example so we just have to copy this x color and you can find like whichever like if you want to find x colors you can find any any like a lot of website they can give you this this code we're deciding you just get it from here but you can pick and choose whichever color you you want practically and it doesn't really matter i mean i will just let you play with that but as you can see here you get the same thing so you just have to copy the color that you like so let's say that we like this orange here so we're going to copy this this code here so we go back here to styling and layout primary color we just paste this one we just go here at the back copy and then we are going to replace all this one here so we copy and paste we look at our website again now it's going to be looking orange okay so again super simple if you want to change that so and it's very nice i mean to some extent you could find it a bit little bit limited later on because is like you have this color which is of course just going on in all your website but i think it's very nice because it's pretty simple to just change the color and we are not building a website we're just building a documentation website so those things matter a little bit less okay so inside your custom css you can add other custom css classes i will not go into detail outward and what is css but basically you can apply styling to your text so or to your classes or to some ids here i will just suggest you to have a couple of video or look a couple of videos on css if you want to know learn more what is css but to be honest you don't need it for these for these docus hours because again we are focusing on the content we are not focusing on building the website okay then we have this index website which uh i mean just changing to react.js so it's not to this um website is not built with the html but is built with react okay so as we mentioned before so i really like react but it depends a bit on on you if you are familiar with the reactor so is similar so there are tags similar to the one that you will find in um html5 but is slightly different okay so for instance here so here we are looking at this header can you see i'm inside the home page here so this is the home page so sorry maybe i click without explaining so we have source pages index okay so this is the index file that we want to modify if we want to modify this landing page okay so we can scroll through the file we have some imports which are by default we have some feature which are basically these three features here which we're going to change in a second we have a function that is going to render our feature okay so let's just have a quick look so each feature can you see it has an adding tree so this one and it has a paragraph okay so if you want to change that we could add another paragraph so let's add another paragraph i mean of course you will not probably want to do that but i just want to show you and these these is my text okay so if you want to now we have this is my text inside here and i've written to all of them of course because what i'm doing here i'm looping through these features that are written here at the top and i'm actually then um creating this feature three times here in the code okay so probably a better way would have been to go back here into these features so this feature contained like a title easy to use so we're going to say my website so this case is going to change just the first one my website here and then we have the description we have an image okay so each one has a title image and description okay if you want to have another text so like you're going to say second paragraph you want to say second para graph okay so you can add another text and you can say so we just copy exactly what we did here so in the description so we're going to write first so we are going to we need to do it in all of the features so feature one is this one so we collapse it then we have feature two we write second and then we go in feature number three so second feature third feature and then we do ctrl v and then we type third we save it we save the file now we have added the second paragraph of course nothing is appearing because you haven't added here in the feature component here so underneath here we need another p tag okay but inside here we pass the second paragraph so we just copy these and we need to import it here inside the feature so this is what we're going to do and now we have first second and third okay so it's very nice if you want to add another paragraph you can add that and if you want to modify the text you can modify the text as i said instead of extext extended you can say very nice i don't know and you save it very nice so it's very very nice very simple to just change it and to be honest this is the most complex part because it's the only file which is built with react a part of this landing page all the other pages are actually written in markdown so it's much easier to to change them so here we have the features then we have the home which will contain this layout and this layout as the name of my site the tagline which we are not going to change it here we are going to change it from the configuration so as you can see here we have site title site tagline we are going to change it from the configuration and we can actually say where this link is sending us so when we click get started we go to the documents so we go back to the docs but if you want to you could even change it to the blog yes to the blog section so if we go back here and we click again now we are redirected to the blog so basically you can select where this link is heading to so this as you can see is a link tag and is wrapping the button so basically the get started button so you can redirect it to the documentation or to the um blog section or eventually you could even add a link to send an email or contact me if you want to say like if you want to add a contact us contact us and then eventually inside here instead of using two base url maybe you will want to add an a tag with ih reference to send an email okay and finally here in the main body of the page which in this case is this part here at the bottom you have so you look through the features okay so the feature that we actually wrote before so the different features and we are going to loop through and we are going to add the features the feature so the feature is that react component that we actually modified just up here and we added another p tag okay so i hope this is not overly complicated this to be honest is the most complex page to honestly change in this github in these docus hours so i wanted to cover it because i think it's very important but you will see that the other markdown pages are much simpler if you want to you can even either straight away this page so you don't even have to add it you can have that your landing page is the person directly redirected to the documentation and for instance if you look at this website that i have i mean i'm one of the developer when you click on help here at the top so as you can see there is no landing page so inside here we have the we have straight away the documentation so as you can see there is no landing page we remove the landing page all together so you have the documentation we also remove the docks and you have docs and help okay so of course you can add the inside of the dock so you can add another section which is help or you can add as many sections as you want okay so that was just to let you know and now we can go to static and inside static we have the images okay so the images are the images that actually are appearing on our website so this is the image that is actually appearing here so when we go into my site here i think a very nice website is this one and drone okay and you can find the name sorry i misspell it on draw okay so you can find illustration for free and you can actually even change the color to match your main color so if you go back to the index.js page and you can see here that we are importing like the the image so as you can see here i'm importing image andro docus so this image was actually downloaded from this website here the very nice thing is that if you go back to the custom css and you copy the primary color so you copy this primary color and you click here you can paste this primary color here so now this primary color will match exactly the color of your website so let's see that i want to doesn't matter we just get this image here so we download the svg in our project okay so now we have in downloads we have this folder here so we are going to get this file here control copy and we are going to paste it into my website so as i said in static images and we're going to paste it inside here okay so the only thing that we need to do so let's just call it a figure one just i just call it figure because it's easier just to reference so undraw figure so if you go back to we need to add to git so with the ide for instance we just have to add it here to git so we don't want to add this file but we want to add this andro figure so we're going to do add so now the file is green because it's added to our repository so if now we want to change that image so let's go back to the index you remember that we are the feature here so we want to change the first image so we look for andro okay so just let me copy this uh this file name so we are inside images okay so we are images here and then we have andro figure dot svg we save our file we go back here our image has changed okay so you can download of course you can download images from wherever you want i think this website is very nice because it has a lot of images and they are free you can use them in your website and i think it's a very nice place where you can download otherwise you can also look for unsplash but on splash you don't get you get very beautiful images so if you want to use an image instead instead of an icon or you can use and you can use this website to get very nice images so we have covered this one you can change this image you can actually change also the uh the icon here so this five icon is the icon that is going to appear here at the top of course you will want to replace this with your own image so generate um ice five icon from svg so if you want to i mean you can do that easily with the inkscape or something else but if you want to if you have a png image and you want to convert it to an icon we can actually simply do it with this one so i just want to show you how you can simply do it so five icon dot io i guess is called this website so we can say the website is called i don't know and we call it example uh docus youtube so edwy we select the same color as we picked before so the primary color here so we change that and so the background is a circle and font size a little bit smaller because i think yes perfect so we download this icon so now that we have this icon downloaded and we add these five icon to our repository so we go inside here five icon and we just replace sorry for that we just replace this with this one replace this file in the destination yes so i would have expected this would have changed yes so this has changed it's just uh slow so let me see if we see knight now a new icon perfect so as you can see here the five icon here at the top it has now changed so we have our new icon here at the top so it has changed from that docker's hours into our icon of the website of course you can also change that logo so this is the logo which is in svg so let me go to the file that we have actually downloaded so we don't have it in svg we have just in png file but let's get this this one here so it's going to be big enough so we're going to add this file to the um to our images so let's get this file drag it up here so we call it uh we call it logo it doesn't have to be in spg i mean of course spg is better because svg doesn't lose any resolution but if you just have your logo in png let me show you how to change it so we are going to have to look into the file so always keep remember that you need to add this file to the github repository otherwise when you're going to deploy your website you're going to get some errors and the basically the icon will not appear because you have not added to the github repository if you don't you are not using an ide just open a new terminal and you could do when you did the live remember before we did git add and then a dot is going to add all the file to the repository so but if you're actually using yarn build that's not a big deal because you eventually are going to build the website locally and then you're dragging into netlify so don't worry about that too much sorry so if you look for logo so we can see that our logo is svg so our logo is used here in the index so okay so here is where our logo is actually imported and we haven't covered this file so let me go in one second to cover this file so index is done we have seen how to change the images how to change the text how to add a new feature again last thing that i want to show you if you want to add a new section i mean probably you will not want to do this because it's repeated just copy the same file the same like code that is here and then you can save it and then now you have the same section twice which probably of course you will want to change it you could want to have features maybe one and features two but as you can see now we have double and we could add more information okay i just wanted to show you that if you are not familiar with react component now you can just simply just copy and paste okay and you can find more on that topic probably another video videos the other two file that we need to learn about and they are very important are these docusaurus config and this sidebar okay so let's go first to docus config file which is important and then finally we go to the sidebar and then we're going to deploy our website again and then i think with the video we are practically done so you will want to change a couple of things here so you remember before that i told you we are not going to change the title of my site from the index js because it was inside here so inside the home you remember there was site config so we are actually entering this file we are looking at it right now so site config and we are going to go into title okay and the reason why we didn't change it here which you could have changed like i just want to show you in a second if i type hello this is going to change my title but we don't want to do that we just want to specify the name of the website just one time so let's go back to what was the default value i'm going to navigate back to this docus config file here so you can find it here so if you want to have a look here so you can change the title here so we we call our website that we say that is called e d y doesn't matter and we say the tagline is documentation website education website okay so we save this and now we have edy we have documentation website here so you will want to add your url of the website if you are going to purchase one if you don't purchase one doesn't matter we can go back here soon if i so right now we have our url which was this one so we just copy this one it doesn't really matter but it's much better for uh ceo so google is going to be finding your website much easier so we have the url the base url we just keep it like a forward slash so it means like where is the first page you will need to change these if you deploy on github pages but you can easily use natalify and you have the five icon and you remember the five icon that we just changed before was inside images feb icon the five icon is just the image here at the top not to be confused with this logo here organization name ddy is just the organization project name is usually the repo name so let's change that to i guess it was uh goku so this is important if you are going to github goku so sorry for that and so we call it docus example youtube okay uh so this is actually user your github organization username so it this is this configuration is actually important only if you deploy to github pages let's see let's ignore this one for a second sorry and then let's see if i have a little bit of time at the end but uh probably is easier that to be honest at the beginning that you use this service because then there is a little bit confusion if you're going to buy a domain because if you change the static url probably is better that you use this service i think is probably easier for you to get started and of course you can actually i will leave you to read the documentation deployment on github pages so it's very very well very well written so deploying on github pages organization name you need to write the github username so there is actually an example here so the url will have to be your uh website url so it's going to be https in my case would be federico tartarini.github.io the base url keep in mind that will have to be the name of the repository no this url forward slash project name is going to be like your project name the name of the github repository for example okay so this will be the project name will be the name of the repository the organization name is the the github user account so mine will be federico tartarini the the url is going to be this one so you just have to change username with github so this url here is going to be https federico tartarini and the base url you need to put these project name okay so okay yeah exactly so the project url in this case will be something like this however if you do this then it's not going to work or metallify so you will have to choose either to use github pages or netlife okay i would recommend you probably to use netlife sorry so we have the same configuration so we have the nav bar so let's look very quickly what is the navigation bar so here we have the navigation bar which is the bar at the top you can change it so we call it edy is our website so now it has change so we have our logo which we defined before and now we want to change it because you actually have added a logo in png so as i said if you want to use it in spg is better because it's a lossless format but since the log is very small doesn't really matter so let me save that and as you can see our logo has changed so we change the five icon the logo up here then we have the items that we want to display in the navigation bar that is an array so we have the document here and then we have the blog okay so we have two elements and we have github actually three elements sorry we have one element which i cancel the parentheses sorry so we have one element which will redirect to documents one elements which will direct to blog one element which will redirect to github so of course you will have to change your h reference inside here so i probably could have increased the font size from the size so appearance here okay sorry for that yeah is it big yes so let me change it actually to 16 no it's not really changing much i think sorry for that it's just i wanted to increase the font size okay so probably in your skin story is going to be a little bit small but if you want to add docs if you want to add the blog as i previously mentioned if you want to add a new one you could say to help you can have a new label which is help and position left is going to be on the left side so now of course yes you can see there is help of course he's going to break because there is pay is not found because we haven't created an help page yet and we're not going to create it in this video but i just want to show you that if you want to add a page here or a new link you can easily do it by adding one element to the array you can add a link to your github right now of course it's not linked to my github that is linked to docus just change this link and or if you want to add it to your linkedin whatever you want you have the footer so that's the other part that we can change with this config so we have the footer so we have the style which is dark and we have all the links that are actually displaying the footer so we have documents and we show we have all the labels that we can change so you can change it to documentation and save it so here the first link is sending to documentation i mean of course it's wrong we just want to show you an example so we go back to style guide or the same thing you can change the title you can say documentation appear so now it's going to look like this again this is an array of elements so if you want to change one and you don't want to have this community for instance you can just delete the full element and now that is gone okay so i just want to show you so now i just have collapsed it but basically everything that is between these curly braces and this one and even the comma so you just cancel everything out so let me save this one and show it again so you can cancel this whole thing now it's gone and now we save the file and the part is is gone okay so you can have all the links so community more uh documentation and support at the bottom you can change the copyright so this message here copyright my project so we say that my project is called edy and inc built with docusaurus you can say the name of your company and so forth and then we have the presets so we are not going to change that at the moment and is more an advanced thing but is what is preset so the the classic theme that we used at the beginning we have the documents what is the home page so at the moment when you click on docs you can see you'll get redirected to document one but if we click and you change it to doc3 we save it again when we're going to click on docs can you see we're going to change the page which we are redirected and we have blog show reading time true edit url so you can actually change that and you have the team okay final thing that i want to show you actually i want to show you the important thing is how to add a new document to your to your website and how to delete the one that are default so currently as you can see in the docs there are four documents okay we want to add a new one how can we do that so inside here inside the docs okay we're going to click new and then we do um file is going to be a markdown file so we call it introduction okay intro dot md has to be a markdown file you could have done the same exact thing by just going into this repository into the folder here into static my website so my website docs you could have either copy and paste this file here or you could have created a new like a new file here with extension that was marked down so i've created this intro here so the only important thing that you will need to add is these tags here at the top okay so let's just copy from the document number one then we're going to change it so the id is going to be the id that this define define our file so to be consistent we use the id the same as the file name that's very important this is actually very important the title of the page we are going to call it introduction introduction this is what is going to appear to our user okay same as was document number three can you see this is the document number three so we want to add here in the title we want to add what is going to appear to the user and finally the last thing we want to add a sidebar label so we want to add it same intro let's call it intro uh intro doc i mean of course it's misspelled i just want to show you the what is going to look like okay i want to show you what is the difference between intro introduction and intro okay to um let's call it introduction it doesn't matter okay so here we are going to look at document number one which help us a bit with the markdown syntax so we're going to add headers we're going to add a bit of emphasis so you can actually copy and paste here so let's say that you like this horizontal line you can add a bit of emphasis you can add a list you can add links and so forth you can add images so just copy and paste so basically we are going to add either number two which we which we like so we add here so welcome and then we are going to add these is our official documentation and then we have the the sit and then we have the horizontal line and then we add another h2 tag actually let's add an h2 track so let's say install and here you explain how to install so you can see follow these steps and then we can add a list so we can add one download our code and then we can add actually without the one and then two we can say [Music] save it on your laptop then we can add let's say let's add an image as you can see here from document number one so we can add a link actually let's add a link and you can say era you can say for more for more info and then you can put a redirect url okay i will let you play with that so now that we have created our file and we are happy with with it so if you want to i can show you how the file is going to look like here on this ide because it kind of shows you how the file is going to look like so now that we are um now that we have added our file how can we add it to our document to our website because as you can see here now you're going in the docs and there is nothing new actually our file is not here so we need to look at the last file that i haven't covered so it's the sidebar here and here in docus so it depends where you want to add it so we want to add it let's say under these documents but here at the beginning so you remember that key that we define at the beginning so intro okay so that was the name of our id intro here so we go back to the sidebar and we have added this intro here and now the this file will appear up here it's not actually going to appear actually no yeah it's actually appearing already so if it's not appearing it could happen that is not appearing you will have to stop the autoreload here you remember here on the terminal that we started the server so let's do that so we press ctrl c terminate and we do again jam start so this is going to run again our deployment server and is going to load it here on your computer on our computer yes so this is our website documents introduction okay so if this doesn't happen automatically like as it did for me you all just have to change these uh you have to reload the deployment server in our case actually work out straight of the box so it's even better so if you want to remove now document one and document three because they are not really any longer needed because this is just an example you just cancel those elements from the array okay of course your website is not going to call rocco's hours so we can change that and we can say edy website if it's two word you need to be in caption okay so now we have edi website or you could have call it like getting started whatever you want i mean you are free to just modify that and if you click can you see where the link is going to redirect us to google of course that's not the case i mean you will want to add another link but as you can see it's very nice because you have this welcome and installer so just to recap these tags here are just needed for documents to understand your uh your file so will not be actually displayed here on the page so now let's change this one to intro production so as you can see it was introduced now we change it to introduction now it's fine i just want to show you the difference so this is the label that appears in the sidebar this is the title and this is the id that we need to pass inside the sidebar file here okay so that's the same i want to show you very quickly how to add a blog and that i think is all for this video so we can just duplicate this file and let's just me find so let's add the inside blog click here new file we call it uh usually they use this format that they use the data so let's use the same thing 2020 08 23 dash first blog okay so the type has to be a markdown so mark but now so in just asking me which type of file i'm going to add so no i don't want to exit so we are going to copy the ola here so in this case you just have to add a little bit more information so id you just type first blog we call it uh ciao outdoor you just call it ft your name outer title you just have to change of course all this information the image url blah blah blah you can change the tags so we want to call it blog and here we are going to just type some random text doesn't really matter so inside here then we're going to add it to the to the blog to the blog section so in order to add it to the blog section we actually i guess is the fit yeah we don't even have to uh do anything you should be reloaded automatically but these as you can see there is no blog here the new blog is not has not yet appeared so let me actually stop the server here yarn start again blog and no so how to add a new blog so just one sec actually sorry for that i just realized that the only reason why the blog was not appearing is because the markdown file that i added before was not i mean i explain how to to the id how to open the file but i did not save a markdown file so let me just show you so i just copied this file that we just created in a few seconds ago so we delete this file but that was okay but we delete this file so we delete the file we create a new file which actually has to be called specifically date followed by like some text so 2020-08-23 dash first blog doesn't matter the name itself but so we added to git we copy and paste what we just actually wrote here so the id title author blah blah blah as you can see the file is not here we reload the page and now okay so i'm having the same issue as before so really sorry so blog new file so we call it 2020-0823 and then we type first dot md okay so now everything is fine so we pasted the text we saved the file and now the blog is here so you can click on the blog and you can change the blog okay now it's done we go back to the terminal we open a new terminal yarn and we do yarn build so yarn builder so now it's going to build the um file and we're going to deploy to the um the docus example on netlify so that okay is giving me an error because i open that like here we are not cd into my website so cd my website because here we are in the root directory we need to go cd into the website cd my website yarn build okay sorry for all these messages they are a bit in the way another way that you can do yarn build here is from package.json as you can see here you can have docusaros build so you could have clicked here in this id as a matter let's just use the terminal so it's done success so what do we need to do is we go back to the here to our computer we are inside here we go my website build okay so we just have to draw drop drag and drop this website so we are going to go back here we are going to uh deploy a new deploys so here at the top inside so we are inside my user docuzaro's example deploys and then no need to update your site drag and drop so build you just drop it here he's going to upload the file publish is super fast and super and very nice so you click here no now we go in blog we have my new blog here we have the new document which we're starting from document number three as we change before but if we open the page like here we have edy so we have the contact house you have the my website so basically we have all the things that we've just added and is the the website is full and operational thank you very much for listening if you have any question please just comment down in the section below give it a like to the video if you liked it or subscribe to my channel if you want more video like this one thank you very much

Channel: Federico Tartarini

Views: 11,557

Keywords: docusaurus, docusaurus tutorial, docusaurus nested sidebar, docusaurus blog, docusaurus nested docs, docusaurus demo, Docusaurus github pages, how to get started with docusaurus, documentation website, Documentation website, Deploy to netlify, docusaurus v2, docusaurus install, deploy docusaurus to netlify, get stated with docusaurus, setup docusaurus, docusaurus full tutorial

Id: I-hYKNgaMmE

Length: 73min 52sec (4432 seconds)

Published: Sat Aug 22 2020