Getting Started With Docusaurus

today we're going to build a website with docusaurus docusource is an open source static site generator brought to you by the people at facebook it's quite easily my favorite and i think it's easy to get started with so today we're gonna build a website that has light mode dark mode built-in search it's powered by markdown it's built using react and it's translation ready um i think the first thing we should do is give it a start on github this helps other developers find it more easily and contribute next we should click the getting started button which will bring us over to the documentation here we are now there's a lot here and it might seem a bit overwhelming don't let it i'm going to be your guide and i'm going to walk you through so give the intro a quick read but we're going to use the fast track method now the first thing it wants us to do is install node.js we're going to use the long term support that's what lts stands for i'm on windows so i'll use the windows installer once that downloads we're gonna follow the prompt okay here i am i'm just going to go through the install process so accept the agreement choose the path oh let's talk about this it's going to install a few uh dependencies for us such as chocolaty node package manager and it is going to add it to the path for us this is handy so we can call node commands directly from the command line you'll see that in action later it's not very complicated uh give this checkbox a tick it's going to install dependencies that are going to speed up our development workflow uh such as chocolaty which is another package manager much like npm um if you're new to development uh package managers will help you install uh packages of pre-written code that'll speed up your development workflow um it's great oh i have a little bit of a security issue i just have to give some permissions here if you notice that my windows is looking a little different from yours that's because i'm on windows 11. uh don't worry nothing is too different about it it's got a nicer ui and it's a lot faster let's go ahead and accept this it's just asking for our permission to install python and chocolatey a few other things it may or may not need to to work one thing i should mention if you're new to development and you don't know what the hell a node.js is i'm assuming you've read the about section before you installed this but if you haven't it allows us to run asynchronous javascript and that opened a lot of doors for the world of javascript development now we can run server side javascript etc now this looks different for me than it will for you because i already have chocolatey on my path that's okay just follow the prompts and you shouldn't have any problems if you do you might need to run your you might need to run your powershell as an administrator i don't think you will though the installer should take care of that for you um yeah so here's the about section that i was mentioning and this little snippet of code right here that's all you need to run a server with javascript so it opened a lot of doors for javascript developers javascript was initially intended to be a front-end language it's an interpreted language which means that the browser interprets it and then it translates it or interprets it for the computer so chrome does a lot of the work whereas a compiled language such as c c sharp dart these can be compiled down into a machine code bytecode or even binary okay so let's go back over to docusaurus for one second here we are so i'm going to click copy on this next line of mystery code i'm going to explain this npx at docusource blah blah blah okay so bundled up with node.js is npm which is a package manager package manager is a way to manage packages of pre-written code open source code so npm will allow you to basically import some pre-written code that'll speed up your development workflow and make your life a lot easier anyhow it comes bundled with node.js and phys or sorry uh microsoft recently bought it it's uh now part of the github family so this little command npx docusaurus start uh that's the npx part that is node package installer so you will see npm install package name whatever and you'll also see npx there is no difference it's still npm npx is just the installer it's not going to install it to your computer it's going to install it to the project and then you'll notice after it's all said and done you'll have this weird folder called node modules and it's got a bunch of mystery stuff in it don't worry about that that's just dependencies that um the project needs to make docusaurus run behind the scenes um you're not gonna have to upload it as part of your website and you're not gonna have to understand all of the code that's in there anyhow i wanted to take a quick sidebar on package managers because they confused the hello to me when i started and another thing we're going to be using the command line i avoided the command line as a noob developer for a long time and i regret it it's much easier it's a little awkward once you get the hang of it it speeds up development really really fast you know when the cowboys twirl their gun right after they do a shootout or before they shoot the bad guy using the command line kind of makes me feel like that clintus was just thrilling my gun you know anyways so don't worry about those little errors you saw me getting that's because i have um a plug-in installed that's not behaving has nothing nothing to do with this yeah okay so let's fire up docusaurus for the very first time and check it out so the first thing we're going to do and i'm going to call out all of my shortcuts i feel it's very important to mention don't memorize syntax you will eventually repetition is the master of learning um the ten thousand hour rule you do anything enough you're gonna get the hang of it but memorize your shortcuts if you can you're gonna forget but look them up shortcuts speed up your development workflow again it gives the whole cowboy twirl in the gun kind of feels i am elite hacksaw okay so control tilt that's this little squiggly there or the back deck so control tilde will open and shut this little drawer um we're going to click on terminal this is also a microsoft powershell so here on the command line we're going to change directory so cd dot dot um that's how you move up a directory i'm actually gonna go back in there so cd and then i just started typing out the name of my username and i hit tab for autocomplete so now i went back into the folder i just left i typed in ls this lists everything in that folder i'm trying to decide where i should put this i might actually just make a new folder so mkdir for make directory and now we put a name i'm going to call it dev cool so cd dev change directory dev okay now we're in dev ls nothing shows up it's empty let's put stuff in it let's put a docusaurus website in it so on my clipboard if you remember i copied this this weird little command so it's gonna tell npm that i want to install this package i just changed it to facebook there's different versions different flavors of donkey source you can install um so what it's doing now is it's initializing with npm so it's doing a lot for me it's making sure i have all the right dependencies and if i don't have them it's going to go out and grab those for me dependencies again are just packages of rewritten code that help the software run you don't have to understand it all or how it's working behind the scenes right now we're just building the website with docusaurus when it comes time to know about these things as a developer i hope you understand by now that it's mostly looking things up and less memorizing it looks like everything went went okay it says thank you cool and then it it even showed us a bunch of commands that we can run like npm start uh let's try that and see what happens oh first we have to go in to the correct directory oh i made a mistake okay so we're going to type in code dot dot just denotes the current directory that we're in on the command line boom it just opened an instance of vs code so this is one of those shortcuts i was telling you it would be cool to memorize because see how fast it was and it opened up of instance of vs code in the my website directory that we were currently in on the command line so yeah it just made things faster don't worry about those errors that's a shopify plugin misbehaving we're working on fixing that uh nothing to do with this uh yeah that's overwhelming huh all those files up there let's not worry about them right now most of them we won't have to touch let's type in that command that we were told to i'm going to shout this and i just wanted to show you that i am syncing with my github and i find that really really handy it helps me if i'm moving from computer to computer it helps me keep my vs code settings in sync okay so yeah this is my website and it's got a bunch of stuff in here and it's really overwhelming don't worry about it just don't um with anything start with the readme okay now in here it just gives us some very basic instructions some commands that we can run here it says yarn start uh don't don't let that confuse you either yarn is just facebook's uh version of npm um npm works just as well they work the same they're both package managers here let's just go over there so you're not confused install them both i i mean i do yarn package at yarnpkg.org oh they switched it to com okay uh yeah it's the same it works the same you can use the search function and you can look for uh pre-written packages you can use either or on the command line most packages are oh error there just one is owned by microsoft the other is owned by facebook it's all open source all of the same packages will be there they behave much the same so we want to run one of these commands in the readme let's do the npm start and see what happens we don't have yarn installed so see we got an error um no no let's not worry about it npm start gotcha okay oh i have a little i'm gonna switch this over to private boom we have a website it's running on our local host colon 3000 that's the port it's running on click stuff oh my god it works um dark mode it's already done for us um and there was the github link it brings us to the official docusaurus github page now here you can learn a lot more about it everybody involved contributors you can become a contributor uh backers these are people who will financially help us out and sponsors companies that want to kind of get behind it okay back to docusaurus this is our website so you have a website my it's called my facebook project um it's got a blog uh light mode dark mode uh we got some feature boxes um and even some links in the footer to help us get through so the style guide the discord community and i showed you the github next step is we're going to customize this and we're going to make it our own

Channel: Patrick K

Views: 62

Keywords: Web Design, Web Development, Docusaurus, How to

Id: ihvNJw707CY

Length: 16min 11sec (971 seconds)

Published: Fri Sep 17 2021