Lab 6 Apply a Cool Feature from Docusaurus to my SSG
Published: 2021-10-28 18:29:35

### Docusaurus introduction
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Docusaurus is an open-source static website generator for Facebook. It is easy for teams to publish documentation websites without having to worry about the infrastructure and design details.  It can be used to quickly create common content driven websites, such as documents, blogs, product landing pages, marketing pages, etc. Although Docusaurus mainly focuses on helping developers build document websites, Docusaurus 2 can build any type of website.
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Following the steps to set up a new website:
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Step 1, scaffold project website, ` $ npm init docusaurus@latest website classic `
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Step 2, running the development server, ` $ cd my-website `, ` $ npm run start `
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Step 3, build my website ` $ npm run build `
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Step 4, create a new repo in my GitHub account
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Step 5, push my website into the new repo
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Step 6, deploy my website. ` $ cmd /C "set GIT_USER=Yoda-Canada&& yarn deploy" `
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;After completing these steps, I set up my own [websit](https://yoda-canada.github.io/tengzhen-docusaurus-sample/).

### Plan new features
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;I plan to apply 5 new features to my SSG. I will complete these tasks step by step and finish the first one this week.![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cxlpnzdnpmsfurekrbne.png)
 
### Added the first new feature
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; The first task is create static asset. Every website needs assets: images, stylesheets, favicons etc. I create a directory named static at the root of my project, and store some images in the subfolder. Also I create a file named .nojecyll. Every file I put into that directory will be copied into the root of the generated build folder with the directory hierarchy preserved. E.g. I add a file named example.png to the static/img folder, it will be copied to build/img/example.png. ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6o2fso6s0ae1l4xe5fhf.png)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;After I upload the new feature to the GitHub, that's what it showed:![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/usjn46b1oke05f81zfik.png)

###Description of other new features
- Themes: Like Plugins, but themes are mostly focused on client-side, and also designed to be replace-able with other themes.
- Plugins: Each plugin handles its own individual feature. Plugins may work and be distributed as part of bundle via presets.
- Configurable Sidebar(i.e., table of contents):Creating a sidebar is useful to: Group multiple related documents; Display a sidebar on each of those documents; Provide a paginated navigation, with next/previous button.
- Own search: I will create a src/themes/SearchBar file in my project folder. Restart my dev server and edit the component.