GitLab

Building Docusaurus website using docusaurus container.

The guide will help you develop websites and host it on to github using Docusaurus.

Requirements

1. WSL 2 (only for windows)
2. Vscode
3. Docker

Note: The guide assumes that you have installed required tools.

Starting Docker container in Vscode.

1. Download ready made docker-containers for the module - https://gitlab.iotiot.in/newbies/pre-office-office/docker-containers/-/archive/master/docker-containers-master.zip

2. Unzip the docker-containers-master.zip

3. Open Up VScode.

4. Press Ctrl + Shift + p in VScode. A bar will open up at the top.

5. Search for Remote-Containers

6. Click on "Remote-Containers: Open Folder in Containers".

7. In the pop up Window, Navigate to Downloads --> docker-containers-master --> docusaurus-container.

8. Vscode will take some time to start up the container, once done the window will look like this below

9. To open up terminal you can Press Ctrl + j.

10. Initialize the docusaurus by running the command

    npx @docusaurus/init@next init {name-of-the-website} classic

11. To preview the website run command

    cd {name-of-the-website}
    yarn start --host 0.0.0.0 --port 3000

    See your website by typing http://localhost:3000 in the address bar of your browser.

12. Making changes to the website - Navigate to folder {repo-root}/docusaurus/{name-of-the-website}, you will find all the docusaurus website files here. - Edit and make changes to these files in any text editor of your choice.

13. Uploading website to Github.

    • Configure your website for Github, You need to these changes to your docusaurus.config.js

      ...
      url: 'https://__userName__.github.io', // Your website URL
      baseUrl: '/testProject/',
      projectName: 'testProject',
      organizationName: 'userName'
      ...

      For example : Lets say my github project name is - Shuny-Interfaces and my user name is shunyaos

      Then the docusaurus.config.js will be

      ...
      url: 'https://shunyaos.github.io', // Your website URL
      baseUrl: '/Shunya-Interfaces/',
      projectName: 'Shunya-Interfaces',
      organizationName: 'shunyaos'
      ...

    • To upload the website to github run command.

      git config --global user.email "{your-email-id}"
      git config --global user.name "{Your-name}"
      GIT_USER={your-git-username} yarn deploy