Lab 6 Apply a Cool Feature from Docusaurus to my SSG

Docusaurus introduction

        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.
        Following the steps to set up a new website:
        Step 1, scaffold project website, $ npm init docusaurus@latest website classic
        Step 2, running the development server, $ cd my-website, $ npm run start
        Step 3, build my website $ npm run build
        Step 4, create a new repo in my GitHub account
        Step 5, push my website into the new repo
        Step 6, deploy my website. $ cmd /C "set GIT_USER=Yoda-Canada&& yarn deploy"
        After completing these steps, I set up my own websit.

Plan new features

        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.

Added the first new feature

         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.
        After I upload the new feature to the GitHub, that's what it showed:

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.